Ajax-Übersicht und Implementierung

Dieses Mal werde ich Ihnen einen Überblick über und die Implementierung von Ajax geben. Was sind die Vorsichtsmaßnahmen für den Überblick und die Implementierung von Ajax? Werfen wir einen Blick darauf.

Ajax ist die Abkürzung für Asynchronous JavaScript XML. Es handelt sich nicht um eine neue Technologie, sondern um eine umfassende Nutzung vorhandener Technologien. In diesem Artikel werden der Überblick und die spezifischen Implementierungsmethoden von Ajax ausführlich vorgestellt. Freunde in Not können einen Blick darauf werfen, ich hoffe, es wird Ihnen hilfreich sein

1. Übersicht über Ajax

1. Ajax ist asynchron ([ə'sɪŋkrənəs) JavaScript XML Kurz gesagt handelt es sich nicht um eine neue Technologie, sondern um die umfassende Nutzung vorhandener Technologien. Diese Technologie kann zusätzliche Daten vom Server anfordern, ohne die Seite zu aktualisieren, was zu einer besseren Benutzererfahrung führt

2. Der Kern der Ajax-Technologie ist das XMLHttpRequest-Objekt (kurz XHR), das erstmals von Microsoft eingeführt wurde. Vor der Einführung von XHR musste die Kommunikation im Ajax-Stil mit einigen Hacks erreicht werden, meist unter Verwendung versteckter Frames oder Inline-Frames.

3. XHR bietet eine reibungslose Schnittstelle zum Senden von Anfragen an den Server und zum Parsen der Serverantwort. Die Möglichkeit, mehr Informationen asynchron vom Server abzurufen, bedeutet, dass nach dem Klicken des Benutzers neue Daten abgerufen werden können, ohne dass die Seite aktualisiert werden muss. Mit anderen Worten, Sie können das XHR-Objekt verwenden, um neue Daten abzurufen, und diese dann über das DOM

in die Seite einfügen. 4. Obwohl der Ajax-Name XML-Komponenten enthält, hat die Ajax-Kommunikation nichts damit zu tun Das Datenformat. Diese Technologie dient zum Abrufen von Daten vom Server, ohne die Seite zu aktualisieren, es handelt sich jedoch nicht unbedingt um XML-Daten

2. Betrieb: natives Ajax und in jQuery gekapseltes Ajax

1, Natives Ajax:

Ajax-Funktion: Anfrage senden (Anfrage setzen setRequest) Antwort empfangen (getResponse)

A. Anfrage auf native Ajax-Weise senden:

Das Wichtigste in Ajax ist auch Der festste Teil ist die http-Anfrage.

1) Verbindung herstellen: (IE7 und höhere Versionen unterstützen XMLHttpRequest)

var xhr = new XMLHttpRequest(); //创建异步请求对象

2) Anforderung abrufen: Das Format muss (url?name1=value1&name2) sein = Wert2)

xhr.open("get","01-register.php?name="+name);//初始化异步get请求
xhr.send(null); //与服务器建立连接

3)Post-Anfrage

xhr.open('post','01-XMLHTTPRequest-test.php');//请求报文行
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); /*post请求设置请求头*/
xhr.send('name=rose&age=20'); //请求报文体

4) Der Unterschied zwischen Get- und Post-Anfragen:

★get muss nicht festgelegt werden der Anforderungsheader, während Post den Anforderungsheader festlegen muss

★Get-Daten werden über die URL übergeben, während Post-Daten in der Sendemethode

B empfangen werden :

/*监听服务器的响应*/
xhr.onreadystatechange=function(){
/*判断当前的响应是否成功 1.服务器做出了响应 2.响应的结果是正确的*/
 if(xhr.status==200 && xhr.readyState==4){
 var result=xhr.responseText;
 console.log(result); //输出从服务器中获取到的数据
 //接下来就可以对数据进行相应的处理了
 }
 };

C. Prozessantwortdaten:

 /*监听*/
 xhr.onreadystatechange=function(){
 if(xhr.status==200 && xhr.readyState==4){ /*判断状态*/
 var result;
 /*获取响应报文中的Content-Type*/
 var ct=xhr.getResponseHeader("Content-Type");
 /*判断Content-Type,进行数据的解析*/
 if(ct.indexOf("xml") != -1){
 result=xhr.responseXML;
 }
 else if(ct.indexOf("json") !=-1){
 result=JSON.parse(xhr.responseText);
 }
 else{
 result=xhr.responseText;
 }
 /*调用回调函数--委托--代理*/
 success && success(result);
 }
 };

Ajax gekapselt in jQuery

 $.ajax({
 type: 请求方式(get/post),
 url: "register.php",
 data: 发送请求数据,
 beforeSend:function(){返回false可以取消本次ajax请求},
 success:function(result){ 成功响应后调用 },
 error:function(err){ 错误响应时调用 },
 complete:function(){ 响应完成时调用(包括成功和失败) }
 });

jQuery bietet eine spezielle Methode zum Serialisieren des Formulars:

 $('form').serialize():   //序列化表单(即格式化key=val & key=val);

3. Antwort

Wir müssen den Antwortstatus des Servers überwachen und dann die vom Server erhaltenen Daten entsprechend verarbeiten.

1) onreadystatechange ist eines der JavaScript-Ereignisse, das zur Überwachung des Status von XMLHttpRequest verwendet wird

2) readystate: Antwortstatus, gibt den aktuellen Status der XMLHTTP-Anfrage zurück

readyState Status	Statusbeschreibung
(0) Nicht initialisiert	Diese Phase bestätigt, ob das XMLHttpRequest-Objekt erstellt wurde und ruft das Öffnen auf ()-Methode Seien Sie auf die Nichtinitialisierung vorbereitet. Ein Wert von 0 zeigt an, dass das Objekt bereits existiert, andernfalls meldet der Browser einen Fehler – das Objekt existiert nicht.
(1) Laden	In diesem Stadium wird das XMLHttpRequest-Objekt initialisiert, d. h. das open( )-Methode aufgerufen wird, schließen Sie die Einstellung des Objektstatus gemäß den Parametern (Methode, URL, true) ab. Und rufen Sie die Methode send() auf, um mit dem Senden von Anforderungen an den Server zu beginnen. Der Wert 1 gibt an, dass eine Anfrage an den Server gesendet wird.
(2) Laden abgeschlossen	Diese Phase empfängt die Antwortdaten vom Server. Erhalten werden jedoch nur die Originaldaten der Serverantwort, die nicht direkt auf dem Client verwendet werden können. Ein Wert von 2 gibt an, dass alle Antwortdaten empfangen wurden. Und bereiten Sie sich auf die nächste Stufe der Datenanalyse vor.
(3) Interaktion	In dieser Phase werden die empfangenen serverseitigen Antwortdaten analysiert. Das heißt, je nach MIME-Typ, der vom serverseitigen Antwortheader zurückgegeben wird, werden die Daten in ein Format konvertiert, auf das über die Attribute „responseBody“, „responseText“ oder „responsXML“ zugegriffen werden kann, sodass sie für den Aufruf auf dem Client bereit sind. Status 3 zeigt an, dass die Daten analysiert werden.
(4) Abgeschlossen	Diese Phase bestätigt, dass alle Daten in ein vom Client verwendbares Format geparst wurden . Parsen Bereits erledigt. Der Wert 4 gibt an, dass die Datenanalyse abgeschlossen ist und die Daten über die entsprechenden Attribute des XMLHttpRequest-Objekts abgerufen werden können.

3) Status: Antwortcode des Servers

Allgemeiner Antwortcode: 200 – Der Server hat die Webseite erfolgreich zurückgegeben

404 – Die angeforderte Webseite existiert nicht

503 – Dienst nicht verfügbar

Einzelheiten zum Server-Antwortcode finden Sie unter – Network Transport Protocol (http-Protokoll)

I Ich glaube, Sie haben diesen Artikel gelesen. Sie beherrschen die Fallmethode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Implementierung der Ajax-Anmeldefunktion

Ajax-Implementierung des asynchronen Ladens

Das obige ist der detaillierte Inhalt vonAjax-Übersicht und Implementierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!