Analyse des principes d'utilisation d'Ajax

Cette fois je vais vous apporter une analyse des principes d'utilisation d'Ajax. Quelles sont les précautions lors de l'utilisation d'Ajax Voici des cas pratiques, jetons un oeil.

En fait, l'implémentation interne d'AJAX n'est pas gênante. Elle utilise principalement un objet appelé XMLHttpRequest, et cet objet est supporté par les navigateurs existants.

On peut dire que c'est la base de toute l'implémentation AJAX et c'est l'objet utilisé par le navigateur pour échanger des données avec le serveur en arrière-plan. Avec lui, il y a AJAX et l'art du rafraîchissement partiel des pages !

Cet article vous présente principalement le contenu pertinent sur les principes d'Ajax et l'encapsulation de code, et le partage pour votre référence et votre étude. Je ne dirai pas grand-chose ci-dessous, jetons un coup d'œil à l'introduction détaillée.

Exemple de code

var xmlhttp;
if (window.XMLHttpRequest) {
 // code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp = new XMLHttpRequest();
} else {
 // code for IE6, IE5 
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
  // to do...
 }
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

Étapes :

1. Créez.

Syntaxe de création d'objets XMLHttpRequest :

var = new XMLHttpRequest();

Les anciennes versions d'Internet Explorer (IE5 et IE6) utilisent des objets ActiveX :

var = new ActiveXObject("Microsoft.XMLHTTP");

2. Connectez-vous et envoyez.

2.1. Trois paramètres de la fonction open() : méthode de requête, adresse de requête et requête asynchrone

2.2. La méthode de requête GET soumet les données au serveur via les paramètres d'URL, tandis que POST soumet les données au serveur en tant que paramètres d'envoi

2.3. Dans la requête POST, avant d'envoyer les données, le type de contenu de soumission du formulaire doit être défini

2.3. Les paramètres soumis au serveur doivent être codés via la méthode encodeURIComponent() . En fait, dans le format clé=valeur de la liste de paramètres, la clé et la valeur doivent être codées car elles contiendront des caractères spéciaux . Chaque fois qu'une demande est faite, une chaîne avec v=xx sera épelée dans la liste des paramètres. Ceci permet de rejeter la mise en cache et de demander directement au serveur à chaque fois.

3. Recevez.

3.1. Après avoir reçu la réponse, les données de réponse rempliront automatiquement l'objet XHR. Les attributs pertinents sont les suivants

. ResponseText : le contenu du corps renvoyé par la réponse, qui est un type chaîne

 ; réponseXML : Si le type de contenu de la réponse est "text/xml" ou "application/xml", cet attribut stockera les données XML correspondantes, qui sont le type de document correspondant à XML

; statut : réponse Code d'état HTTP ; statusText : Description de l'état HTTP

3.2. L'attribut readyState de l'objet XHR représente l'étape active actuelle du processus de demande/réponse. La valeur de cet attribut est la suivante

. 0 ---> Non initialisé, la méthode

open() 1 ---> Démarré, la méthode

n'a pas été appelée open()send() ; 2 ---> Envoyé, la méthode

send() 3 ---> Recevoir, une partie des données de réponse a été reçue

4 ---> Terminé, toutes les données de réponse ont été reçues

Tant que la valeur de readyState change, l'événement readystatechange sera appelé. (En fait, pour des raisons de fluidité logique, readystatechange peut être placé après l'envoi, car lors de l'envoi, la demande au serveur entraînera une communication réseau, ce qui prendra du temps. Spécifiez readystatechange

programmes je l'utilise habituellement de cette façon, mais par souci de standardisation et de compatibilité multi-navigateurs, il est préférable de le préciser avant l'ouverture). 3.3. Dans l'événement readystatechange, déterminez d'abord si la réponse a été reçue, puis déterminez si le serveur a traité avec succès la demande.

xhr.status Méthode d'encapsulation Ajax :

 ajax({  
  url: "./test.php",
  type: "POST",      
  data: { name: "abc", age: 18 },   
  dataType: "json",  
  success: function (response, xml) {   
   // 执行成功回调  
  },  
  fail: function (status) {   
   // 执行失败回调  
  }
 });
  
  function ajax(options) { 
   options = options || {}; 
   options.type = (options.type || "GET").toUpperCase();  
   options.dataType = options.dataType || "json";  
   var params = formatParams(options.data);    
   
   // 创建对象  
   if (window.XMLHttpRequest) {   
    var xhr = new XMLHttpRequest(); 
   } else {   
    var xhr = new ActiveXObject('Microsoft.XMLHTTP');  
   } 
   
   //接收 - 第三步
   xhr.onreadystatechange = function () {   
    if (xhr.readyState == 4) {    
     var status = xhr.status;    
     if (status >= 200 && status < 300) {     
      options.success && options.success(xhr.responseText,xhr.responseXML);    
     } else {     
      options.fail && options.fail(status);    
     }   
    }
   }  
    
   //连接 和 发送 - 第二步 
   if (options.type == "GET") {   
    xhr.open("GET", options.url + "?" + params, true);   
    xhr.send(null);  
   } else if (options.type == "POST") {   
    xhr.open("POST", options.url, true);   
    //设置表单提交时的内容类型   
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(params);  
   }  
   
   //格式化参数 
   function formatParams(data) { 
    var arr = [];  
    for (var name in data) {   
     arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name])); 
    }  
    arr.push(("v=" + Math.random()).replace(".",""));  
    return arr.join("&"); 
   }

Lecture recommandée :

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!