Explication détaillée du mécanisme AJAX et de la communication inter-domaines-js tutoriel-php.cn

Dans un projet sur lequel j'ai récemment travaillé, j'avais besoin d'Ajax pour obtenir des données sur plusieurs domaines, mais quelque chose s'est mal passé. J'ai donc examiné Ajax, enregistré les points clés sur les problèmes inter-domaines et les ai partagés avec tout le monde

1.Ajax

1.1. Introduction à Ajax Introduction à Ajax Dans cette partie, nous parlons principalement de l'origine d'ajax. Parce que cela n’a rien à voir avec la technologie. Par conséquent, la plupart des détails sont mentionnés d’un seul coup.

L'origine de l'Ajax ?

Le terme Ajax provient d'un article intitulé "Ajax : A new Approach to Web Applications" publié par Jesse James Garrett en 2005. Dans cet article, il a introduit une nouvelle technologie, selon ses mots, dites, c'est Ajax. : l'abréviation de Asynchronous JavaScript +XML.

Qu'est-ce que l'Ajax ?

L'objectif principal de cette nouvelle technologie est de permettre à la page Web frontale de demander des données supplémentaires au serveur sans décharger la page. Depuis l'émergence de cette technologie, Microsoft a pris les devants en introduisant l'objet XHRt (l'objet principal qu'Ajax peut implémenter), puis d'autres navigateurs ont implémenté cette technologie les uns après les autres. Dans l’ensemble, ajax est une technologie qui permet une communication asynchrone.

1.2. L'objet principal d'Ajax --- XMLHttpRequest Parce qu'IE5 a été le premier à introduire cet objet XHR, il n'y avait pas de standard de facto à l'époque. Il existe trois versions différentes d'objet XHR dans IE : MSXML2 🎜>

Après qu'IE ait introduit cet objet, d'autres fabricants de navigateurs ont également emboîté le pas. À cette époque, l'objet XHR est devenu le standard de facto !

function createXHR() { //IE7之前的版本通过这种方式
  var versions = [
    &#39;MSXML2.XMLHttp&#39;,
    &#39;MSXML2.XMLHttp.3.0&#39;,
    &#39;MSXML2.XMLHttp.6.0&#39;
  ];
  var xhr = null;
  for (var item in versions) {
    try {
      xhr = new ActiveXObject(item); //若不存在该版本，可能会出错
      if (xhr) break;
    } catch (e) {
      //一般对这种错误不做处理
    }
  }
  return xhr;
}

Copier après la connexion

Créer des objets XHR dans les navigateurs ;

1.2 Utilisation de XMLHttpRequestL'objet XMLHttpRequest a 6 fonctions :

Il existe 5 attributs de l'objet XMLHttpRequest :

function createXHttpRequest() {
  if (typeof XMLHttpRequest !== &#39;undefined&#39;) { //不要用 if(XMLHttpRequest){}这种形式，
    return new XMLHttpRequest();              //如果是这种形式在找不到XMLHttpRequest函数的情况下，会报错。
} else if (typeof ActiveXObject !== &#39;undefined&#39;) { 
         return createXHR(); //用到刚才我们创建的函数 
  } else { throw new Error(&#39;不能创建XMLHttpRequest对象&#39;); } }

Copier après la connexion

Description de l'attribut
responseText Le texte renvoyé comme sujet de réponse

responseXML Si la réponse est de type text/html ou application/xml, cet attribut enregistrera le document XML de réponse

open("method",url,boolean);
              //该方法的三个参数,分别为----提交方式"get"或者"post"等 
　　　　　　　　　　　　　　　 //&& url是相对于执行代码的当前页面的路径（使用绝对路径是允许的）&&是否异步 
send();    
           //这个方法接收一个参数，这个参数是作为请求主体发送的数据, 
           //说明： 如果有参数，请使用post方式提交 使用方式如下，send("user="+username+"&pwd="+password);
           //如果没有参数，为了兼容性考虑，必须在参数中传入null,即send(null)；该方式使用get方式提交

abort();       //取消当前响应，关闭连接并且结束任何未决的网络活动。

          //这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决             //的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。

getResponseHeader()   

          //返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任             //何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。

          //该方法的返回值是指定的 HTTP 响应头部的值，如果没有接收到这个头部或者 readyStat             //e 小于 3 则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并             //返回，使用逗号和空格分隔开各个头部的值。

getAllResponseHeaders()       

          //把 HTTP 响应头部作为未解析的字符串返回。

          //如果 readyState 小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的

          //头部。头部作为单个的字符串返回，一行一个头部。每行用换行符 "\r\n" 隔开。

setRequestHeader()

         //向一个打开但未发送的请求设置或添加一个 HTTP 请求。

Copier après la connexion

status Code d'état de la réponse http

statusText description de l'état http

readyState Les bits d'état de l'objet XMLHttpRequest 0 1 2 3 4 représentent respectivement 5 états

timeout Définir le délai d'expiration, l'unité est actuellement uniquement prise en charge par. IE8+ --- pas encore standardisé (non recommandé)

L'attribut d'événement onReadyStateChange de l'objet XMLHttpRequest : -----Tous les navigateurs sont compatibles

Cet attribut Ce qui est surveillé, c'est le changement de l'attribut readyState de l'objet XMLHttpRequest :

Le changement de readyState correspond aux états suivants :

0 : Pas encore initialisé. Avant que open() soit appelé

1 : Démarrer. Après avoir appelé open(), mais send() n'est pas appelé

2 : Envoyer. J'ai appelé send() mais je n'ai pas encore reçu de réponse.

3 : Réception de données. À partir du moment où les données de réponse sont reçues jusqu'au moment où la réception est terminée.

4 : Terminé. Réception des données terminée.

Il y a un problème auquel il faut prêter attention dans ce mode d'utilisation, c'est-à-dire qu'après le délai d'attente, l'événement onreadystatechange sera toujours déclenché après la réception des données. L'attribut xhr.status est accessible lors du traitement de l'événement onreadychange, quelque chose va mal se passer. Nous devons donc effectuer un traitement try{}catch lors de l'accès à cette propriété. Cependant, cet attribut n’étant pas compatible pour le moment, nous ne nous y attarderons pas.

Attribut d'événement onload onerror onloadstar onprogress de l'objet XMLHttpRequest :

xhr.onreadystatechange = function () {
 if (xhr.readyState == 4) {
  if (xhr.status >= 200 && xhr.status <== 300 || xhr.status == 304) {
   alert(xhr.responseText);
   //处理接收的数据
  } else {
   //请求失败，未得到响应数据
  }
 }
}; //补充说明：注册事件必须发生在send()以前

Copier après la connexion

-----Les navigateurs non-IE et IE 10+ ont été implémentés

XMLHttpRequest对象的事件属性ontimeout -----仅限IE8+,不过最新的主流高版本浏览器也已经实现（不推荐使用）
xhr.timeout=1000;//一秒钟
xhr.ontimeout=functon(){  //处理代码  ......}

Copier après la connexion

onload peut être implémenté dans IE8 ou supérieur, la plupart des événements peuvent être réalisés en fonction des modifications de readySate, les événements ci-dessus sont juste pour plus de commodité.

Les deux événements onload et onprogress correspondent respectivement à readyState=4 et readyState=3 Les méthodes d'utilisation sont les suivantes :

Supplémentaire : Certains événements peuvent être utilisés en fonction. à L'état readyState est simulé. Seuls certains navigateurs ont rendu les choses plus faciles.

3. Technologie inter-domaines unidirectionnelle --- CORS

   xhr.onload= function (event) {
      //event只包含一个属性 event.target=xhr;使用方式只是在readyState=4时差不多..
    }
   xhr.onprogress=function(event){
     //event除了包含event.target=xhr之外，还包含三种属性
     //lengthComputale(进度信息是否可用)，position（已接受字节数）和totalSize(总字节数).
     
   }

Copier après la connexion

Ce dont nous parlons aujourd'hui, c'est que la page Web du client demande des données à un serveur qui n'est pas dans le même domaine. Le client reçoit Lorsque les données renvoyées sont reçues, utilisez la fonction de rappel pour traiter les données.

C'est-à-dire :

1. Le client demande des données au serveur hors domaine
2. Le serveur envoie des données au client après avoir reçu la réponse.

3. Le client exécute la fonction de rappel en fonction des données renvoyées.

我知道不同域下的iframe也可以进行通信，而且这也是一种跨域通信技术。但是，这种iframe页面之间的双向通信，我们在下一个专题里面讲解，今天主要讲的是单向通信。

3.1.CORS跨域请求的原理
在用xhr（XMLHttpRequest）对象或者xdr(XDomainRequest)对象，发送域外请求时，大概的实现原理如下图：

3.2.IE中CORS技术的实现
IE8引入了一个XDR类型，这个类型与XHR基本类似，但是其能实现安全可靠地跨域通信。

XHD的特点：

1.cookie不会随请求发送，也不会随响应返回。

2.只能设置请求头部中的Content-Type片段。

3.不能访问响应头部信息。

4.只是支持get和post请求。

XDR支持onload和onerror事件属性，且其使用方式和XHR基本一致，不过其open()只接收两个参数，默认是异步的。

var xdr = new XDomainRequest();
xdr.onload = function () {
 //处理xdr.responseText
}
xdr.onerror = function () {
};
xdr.open(&#39;get&#39;, &#39;绝对url&#39;);
xhr.send(null);

Copier après la connexion

3.3.跨浏览器的CORS技术实现

在标准浏览器中XHR对象就已经可以自动实现跨域请求，但是XHR和XDR的不同之处：

1.XHR可以在设置 withCredentials =true时，浏览器会把cookie发送给服务器，服务器此时通过设置头部Access-Control-Allow-Credentials:true时来响应。如果，服务器不设置这个属性，则浏览器会触发onerror事件。

2.在回调函数中可以访问status和statusText属性，而且支持同步请求。

以下是实现跨域请求的代码：

function createCrosRequest(method, url) {
 var xhr = new XMLHttpRequest(); //IE7+
 if (&#39;withCredentials&#39; in xhr) { //IE8-IE9浏览器没有这个属性
  xhr.open(method, url, true);
 } else if (typeof XDomainRequest != &#39;undefined&#39;) {
  xhr = new XDomainRequest();  //IE
  xhr.open(method, url)
 }
 return xhr;
}
var request=CreateCrosRequest("get","url");
if(request){
 request.onload=function(){
 //处理request.responseText;
 }
 request.send(null);
}

Copier après la connexion

4.单向跨域技术 ---JSONP技术

JSONP技术比较简单，其主要原理主要是利用script标签的特性。

script标签和image标签一样，它们都具有src属性，而且这个属性是可跨域的。

因为script标签返回的都是js代码，且该js代码会自动执行。所以，如果我们请求返回的数据也是类似一段js代码的形式，岂不是就可以实现在脚本加载完毕后自动执行。

如果我们的请求，返回的数据是 callback + '(' + json + ')'; 这种形式的数据, 那么在脚本加载完毕之后也就能自动执行callback()函数了.

4.1.客户端写法

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
    <button id="button">请求数据</button>
</body>
<script>
  window.onload=function(){
    var button=document.getElementById("ibutton");
    function callback(data){
      //处理data
    }
    button.onclick=function(){
      var script=document.createElement("script");
      script="http://www.sasd.com/json/?callbak=callback"; 
      document.body.insertBefore(script,document.body.firstChild);//加载脚本
      
    }
    
  }
</script>
</html>

Copier après la connexion

1.客户端将回调函数名写入

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours