Detaillierte Erklärung der Funktionsweise von Ajax

Dieses Mal werde ich Ihnen das Funktionsprinzip von Ajax und die Vorsichtsmaßnahmen bei der Verwendung von Ajax ausführlich erläutern. Hier sind praktische Fälle, schauen wir uns das an.

AJAX ist eine Technologie zur Erstellung schneller, dynamischer Webseiten. AJAX ermöglicht die asynchrone Aktualisierung von Webseiten, indem im Hintergrund kleine Datenmengen mit dem Server ausgetauscht werden. Das bedeutet, dass Teile einer Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.

1. Die in Ajax enthaltene Technologie

Jeder weiß, dass Ajax keine neue Technologie ist, sondern eine Kombination mehrerer Originaltechnologien. Es besteht aus den folgenden Technologien.

Dargestellt mit CSS und XHTML.

Verwenden Sie das DOM-Modell für Interaktion und dynamische Anzeige.

Verwenden Sie XMLHttpRequest, um asynchron mit dem Server zu kommunizieren.

Verwenden Sie Javascript zum Binden und Aufrufen.

Von den oben genannten Technologien basieren alle anderen Technologien mit Ausnahme des XmlHttpRequest-Objekts auf Webstandards und wurden häufig verwendet. Obwohl XMLHttpRequest vom W3C noch nicht übernommen wurde, ist es bereits ein De-facto-Standard Fast alle gängigen Browser unterstützen es derzeit.

2. So erstellen Sie Ajax

Das Prinzip von Ajax besteht einfach darin, das XmlHttpRequest-Objekt zu verwenden, um asynchrone Anforderungen an den Server zu senden und abzurufen Verwenden Sie dann Javascript, um das DOM zu bearbeiten und die Seite zu aktualisieren. Der wichtigste Schritt dabei ist das Abrufen der Anforderungsdaten vom Server. Die native Erstellung von Ajax kann in die folgenden vier Schritte unterteilt werden.

1. Erstellen Sie ein XMLHttpRequest-Objekt

Alle modernen Browser (IE7+, Firefox, Chrome, Safari und Opera) verfügen über integrierte XMLHttpRequest-Objekte.

Syntax zum Erstellen von XMLHttpRequest-Objekten:

var xhr = new XMLHttpRequest();

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

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

Um mit allen modernen Browsern zurechtzukommen Browser, einschließlich IE5 und IE6, überprüfen Sie bitte, ob der Browser das XMLHttpRequest-Objekt unterstützt. Erstellt, sofern unterstützt, ein XMLHttpRequest-Objekt. Wenn es nicht unterstützt wird, erstellen Sie ein ActiveXObject:

var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2. Bereiten Sie die Anfrage vor

Initialisieren Sie das XMLHttpRequest-Objekt und akzeptieren Sie drei Parameter:

xhr.open(method,url,async);

Der erste Parameter stellt die Zeichenfolge des Anfragetyps dar und sein Wert kann GET oder POST sein.

GET-Anfrage:

xhr.open("GET",demo.php?name=tsrot&age=24,true);

POST-Anfrage :

xhr.open("POST",demo.php,true);

Der zweite Parameter ist die URL, an die die Anfrage gesendet werden soll .

Der dritte Parameter ist wahr oder falsch und gibt an, ob die Anforderung im asynchronen oder synchronen Modus ausgegeben wird. (Standard ist „true“, „false“ wird im Allgemeinen nicht empfohlen)

false: Im synchronen Modus ausgegebene Anforderungen unterbrechen die Ausführung des gesamten Javascript-Codes, bis der Server eine Antwort erhält. Wenn der Browser eine Verbindung zum Netzwerk herstellt oder eine herunterlädt Datei Wenn etwas schief geht, bleibt die Seite für immer hängen.
true: Eine im asynchronen Modus ausgegebene Anfrage. Während das Anfrageobjekt Daten sendet und empfängt, kann der Browser weiterhin die Seite laden und andere Javascript-Codes ausführen

3 🎜>

xhr.send();

Im Allgemeinen sind die mit Ajax übermittelten Parameter meist einfache Zeichenfolgen. Sie können die zu übermittelnden Parameter direkt mit der GET-Methode in den URL-Parameter schreiben der open-Methode. Zu diesem Zeitpunkt sind die Parameter der send-Methode null oder leer.

GET-Anfrage:

xhr.open("GET",demo.php?name=tsrot&age=24,true);
xhr.send(null);

POST-Anfrage:

Wenn Sie Daten wie ein HTML-Formular POSTen müssen, verwenden Sie setRequestHeader(), um HTTP-Header hinzuzufügen. Geben Sie dann die Daten an, die Sie in der send()-Methode senden möchten:

xhr.open("POST",demo.php,true);
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send("name="+userName+"&age="+userAge);

4. Verarbeiten Sie die Antwort

xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}

onreadystatechange-Ereignis:

Wenn eine Anfrage an den Server gesendet wird, müssen wir einige antwortbasierte Aufgaben ausführen. Immer wenn sich readyState ändert, wird das Ereignis onreadystatechange ausgelöst.

readyState-Attribut:

0: Das Objekt

wurde erstellt, aber die open()-Methode wurde noch nicht aufgerufen.

1: Die open()-Methode wurde aufgerufen, aber die Anfrage wurde noch nicht gesendet.

2：请求已经发送，标题和状态已经收到，并可用。

3：接收到来自服务器的响应。

4：接收完请求数据，表示已经完成请求。

status属性：

200:”OK”

404: 未找到页面

responseText：获得字符串形式的响应数据

responseXML：获得 XML 形式的响应数据

返回值一般为json字符串，可以用JSON.parse(xhr.responseText)转化为JSON对象。

5、完整例子

demo.html

var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
};
xhr.open("GET","./data.json",true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(JSON.parse(xhr.responseText).name);
}
}

data.json

{
"name":"tsrot",
"age":24
}

三、ajax应用场景

场景 1. 数据验证

场景 2. 按需取数据

场景 3. 自动更新页面

四、ajax优缺点

优点：

1、页面无刷新，用户体验好。

2、异步通信，更加快的响应能力。

3、减少冗余请求，减轻了服务器负担

4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

1、ajax干掉了back按钮，即对浏览器后退机制的破坏。

2、存在一定的安全问题。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、无法用URL直接访问。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

AJAX请求数组应该如何实现

在Ajax中怎样清除缓存

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der Funktionsweise von Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!