Explication détaillée des étapes pour implémenter des requêtes inter-domaines avec Ajax-js tutoriel-php.cn

Explication détaillée des étapes pour implémenter des requêtes inter-domaines avec Ajax

php中世界最好的语言

Libérer： 2018-03-31 10:54:52

original

2580 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée des étapes pour mettre en œuvre des requêtes cross-domaines avec Ajax Quelles sont les précautions pour mettre en œuvre des requêtes cross-domaines avec Ajax Voici des cas pratiques, prenons. un regard.

Créons deux sites locaux pour démontrer ci-dessous

La première étape consiste à créer un serveur Apache localement
La deuxième étape consiste à configurer deux serveurs virtuels ; les noms de domaine localement ;
La troisième étape consiste à créer un dossier sur le lecteur C et à le nommer "HTML5"
La quatrième étape consiste à trouver la configuration de l'hôte virtuel Apache ; > fichier , puis ouvrez le fichier de configuration

Explication détaillée des étapes pour implémenter des requêtes inter-domaines avec Ajax

La cinquième étape consiste à créer un dossier a et un dossier b sous le dossier HTML5 créé à la troisième étape ;

La sixième étape consiste à modifier le fichier de configuration de l'hôte virtuel Apache, comme indiqué dans la figure

修改Explication détaillée des étapes pour implémenter des requêtes inter-domaines avec Ajax

La septième étape consiste à modifier le fichier hôte et à ajouter le URL de a et b. Habituellement, le chemin du fichier hôte est dans C :WindowsSystem32driversetc Sous

Explication détaillée des étapes pour implémenter des requêtes inter-domaines avec Ajax

nous créons un fichier 7.ajax.html dans le dossier HTML5/a

nbsp;HTML>


<meta>
<title>获取同域下内容</title>
<script>
window.onload = function() {
 var oBtn = document.getElementById(&#39;btn&#39;);
 // 忽略IE6
 oBtn.onclick = function() {
 //创建一个ajax对象
 var xhr = new XMLHttpRequest();
 //监听事件
 xhr.onreadystatechange = function() {
 if (xhr.readyState == 4) {
 if (xhr.status == 200) {
 alert(xhr.responseText);
 }
 }
 }
 xhr.open(&#39;get&#39;, &#39;Explication détaillée des étapes pour implémenter des requêtes inter-domaines avec Ajax&#39;, true);
 xhr.send();
 }
}
</script>


 <input>

Copier après la connexion

Jetons un coup d'oeil d'abord aux requêtes sous le même domaine

Nous créons un fichier php sous HTML5/a et renvoyons 'bonjour'

Explication détaillée des étapes pour implémenter des requêtes inter-domaines avec Ajax

En ce moment, nous ouvrons la page actuelle

Explication détaillée des étapes pour implémenter des requêtes inter-domaines avec Ajax , cliquez sur le bouton et nous constatons que les données sont demandées ;
http://www.a.com/7. ajax.html

Explication détaillée des étapes pour implémenter des requêtes inter-domaines avec Ajax

Mais s'il s'agit de plusieurs domaines, c'est-à-dire, les données que vous avez demandées et le fichier actuel ne sont pas sous le même domaine, dans ce cas, une demande inter-domaines se produira généralement dans ce cas, il vous sera interdit d'accéder à

Par exemple, nous le ferons désormais. placez le fichier Explication détaillée des étapes pour implémenter des requêtes inter-domaines avec Ajax juste dans le dossier HTML5/a dans le dossier b

Après avoir cliqué à ce moment-là, nous avons constaté que la requête signalait une erreur, ce qui signifie que les requêtes inter-domaines ont été restreintes

Explication détaillée des étapes pour implémenter des requêtes inter-domaines avec Ajax

À ce stade, nous avons besoin que le backend coopère, vous devez le dire. Le backend ajoute un en-tête "Access-Control-Allow-Origin" lorsque sortie

Par exemple : comme le montre la figure, cela signifie que tant que la demande inter-domaines pour ce nom de domaine est une politique inter-domaines

Explication détaillée des étapes pour implémenter des requêtes inter-domaines avec Ajax

Quand je cliquez cette fois, je peux obtenir des données inter-domaines normalement

Si vous voulez être compatible avec IE, vous en avez besoin

nbsp;HTML>


<meta>
<title>ajax跨域请求</title>
<script>
window.onload = function() { 
 /*
 在标准浏览器下，XMLHttpRequest对象已经是升级版本，支持了更多的特性，可以跨域了
 但是，如果想实现跨域请求，还需要后端的相关配合才可以
 XMLHttpRequest : 增加很多功能，他也不推荐使用onreadystatechange这个事件来监听，推荐使用onload
 */
 var oBtn = document.getElementById(&#39;btn&#39;);
 oBtn.onclick = function() {
 // 这是标准浏览器写法
 var xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function() {
 if (xhr.readyState == 4) {
 if (xhr.status == 200) {
 alert(xhr.responseText);
 }
 }
 }
 xhr.open(&#39;get&#39;, &#39;http://www.b.com/Explication détaillée des étapes pour implémenter des requêtes inter-domaines avec Ajax&#39;, true);
 xhr.send();
 /*
 如果你想兼容IE浏览器,可以特地为IE做兼容,忽略IE6
 XDomainRequest : IE如果想实现跨域请求，则需要使用这个对象去实现
 var oXDomainRequest = new XDomainRequest();
 oXDomainRequest.onload = function() {
 alert(this.responseText);
 }
 oXDomainRequest.open(&#39;get&#39;, &#39;http://www.b.com/Explication détaillée des étapes pour implémenter des requêtes inter-domaines avec Ajax&#39;, true);
 oXDomainRequest.send();
 */
 }
}
</script>


 <input>

Copier après la connexion

Je crois vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'implémentation par kkpager de la fonction de requête de pagination ajax (avec code)

Comment Ajax implémente Boîte de combinaisons de chargement dynamique (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!