Analyse der Ajax-Nutzungsprinzipien

Dieses Mal werde ich die Prinzipien der Ajax-Nutzung analysieren. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Ajax? Hier sind praktische Fälle.

Tatsächlich ist die interne Implementierung von AJAX nicht problematisch. Sie verwendet hauptsächlich ein Objekt namens XMLHttpRequest, und dieses Objekt wird von vorhandenen Browsern unterstützt.

Man kann sagen, dass es die Grundlage der gesamten AJAX-Implementierung ist und das Objekt ist, mit dem der Browser im Hintergrund Daten mit dem Server austauscht. Damit gibt es AJAX und die Kunst der teilweisen Seitenaktualisierung!

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Inhalte zu Ajax-Prinzipien und Code-Kapselung vor und teilt sie als Referenz und zum Studium. Ich werde im Folgenden nicht viel sagen, werfen wir einen Blick auf die detaillierte Einführung.

Beispielcode

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();

Schritte:

1. Erstellen.

Syntax zum Erstellen von XMLHttpRequest-Objekten:

var = new XMLHttpRequest();

Ältere Versionen von Internet Explorer (IE5 und IE6) verwenden ActiveX-Objekte:

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

2. Verbinden und senden.

2.1. Drei Parameter der open()-Funktion: Anforderungsmethode, Anforderungsadresse und ob asynchron angefordert werden soll

2.2. Die GET-Anfragemethode übermittelt Daten über URL-Parameter an den Server, während POST Daten als Sendeparameter an den Server übermittelt

2.3. In der POST-Anfrage muss vor dem Senden von Daten der Inhaltstyp der Formularübermittlung festgelegt werden

2.3. An den Server übermittelte Parameter müssen über die Methode encodeURIComponent() codiert werden. Tatsächlich müssen im Parameterlisten-Schlüssel=Wert-Format sowohl Schlüssel als auch Wert codiert werden, da sie Sonderzeichen enthalten. Bei jeder Anfrage wird eine -Zeichenfolge mit v=xx in die Parameterliste geschrieben. Dadurch wird das Caching abgelehnt und die Anfrage jedes Mal direkt an den Server gesendet.

3. Empfangen.

3.1. Nach Erhalt der Antwort werden die Antwortdaten automatisch in das XHR-Objekt eingefügt. Die relevanten Attribute lauten wie folgt:

Antworttext: der von der Antwort zurückgegebene Textinhalt, der ein Zeichenfolgentyp ist; AntwortXML: Wenn der Inhaltstyp der Antwort „text/xml“ oder „application/xml“ ist, speichert dieses Attribut die entsprechenden XML-Daten, bei denen es sich um den Dokumenttyp handelt, der XML entspricht Status: Antwort

HTTP-Statuscode

; statusText: Beschreibung des HTTP-Status

3.2. Das readyState-Attribut des XHR-Objekts stellt die aktuell aktive Phase des Anfrage-/Antwortprozesses dar. Der Wert dieses Attributs ist wie folgt: 0 --> Nicht initialisiert, die

-Methode wurde nicht aufgerufen

1 --> Gestartet, die

-Methode wurde aufgerufen, aber die

-Methode wurde nicht

open() aufgerufen 2 --> Gesendet, die Methode

wurde aufgerufen und keine Antwort erhalten

open() 3 --> Empfangen, ein Teil der Antwortdaten wurde empfangen send()

4 --> Abgeschlossen, alle Antwortdaten wurden empfangen

send() Solange sich der Wert von readyState ändert, wird das Ereignis „readystatechange“ aufgerufen (aus Gründen der logischen Glätte kann „readystatechange“ nach dem Senden platziert werden, da die Anforderung an den Server beim Senden eine Netzwerkkommunikation verursacht, die Zeit benötigt. Geben Sie „readystatechange“ an 🎜>Ereignis nach dem Senden. Es ist auch möglich,

Programme auf diese Weise zu verarbeiten, aber aus Gründen der Standardisierung und browserübergreifenden Kompatibilität ist es besser, es vor dem Öffnen anzugeben.

3.3. Bestimmen Sie im Readystatechange-Ereignis zunächst, ob die Antwort empfangen wurde, und stellen Sie dann fest, ob der Statuscode, der mit 2 beginnt, aus dem Cache stammt. Der obige Code befindet sich in Jeder Anforderung wird eine Zufallszahl hinzugefügt, sodass der Wert nicht aus dem Cache abgerufen wird und dieser Status nicht beurteilt werden muss.

Ajax-Kapselungsmethode:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre: xhr.status

 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("&"); 
   }

Das obige ist der detaillierte Inhalt vonAnalyse der Ajax-Nutzungsprinzipien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!