Detaillierte Analyse der Ajax-Nutzungsfähigkeiten in JS

Dieses Mal werde ich Ihnen eine detaillierte Analyse der Techniken zur Verwendung von Ajax in JS und eine detaillierte Analyse der Vorsichtsmaßnahmen für die Verwendung von Ajax in JS geben. Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf .

Ajax ist keine neue Programmiersprache, sondern eine neue Art, bestehende Standards zu nutzen. AJAX kann Daten mit dem Server austauschen, ohne die gesamte Seite neu laden zu müssen. Diese asynchrone Interaktionsmethode ermöglicht es Benutzern, neue Daten abzurufen, ohne die Seite nach dem Klicken aktualisieren zu müssen.

XMLHttpRequest-Objekt

Der Kern von Ajax ist das XMLHttpRequest-Objekt (XHR). XHR bietet eine Schnittstelle zum Senden von Anfragen an den Server und zum Parsen von Serverantworten. Möglichkeit, neue Daten asynchron vom Server abzurufen.

Objekte im Browser erstellen (unterstützt nur IE7 und höher):

var xhr = new XMLHttpRequest();

Verwendung von XHR

Das erste, was wir vorstellen müssen, ist die open()-Methode. Es empfängt 3 Parameter:

• Die Art der zu sendenden Anfrage (POST, GET usw.)

• Die URL der Anfrage

• Ein boolescher Wert, der angibt, ob um die Anfrage asynchron zu senden

Beispiel für den Aufruf von open():

xhr.open("get", "index.jsp", false); GET für index.jsp fragen. Die URL bezieht sich auf die aktuelle Seite, auf der der Code ausgeführt wird. Durch den Aufruf der open()-Methode wird die Anforderung nicht tatsächlich gesendet, sondern lediglich das Senden einer Anforderung initiiert.

Rufen Sie send() auf, um eine Anfrage zu senden:

xhr.send(null);

send() empfängt einen Parameter, der lautet: Als Anfragetext werden die gesendeten Daten verwendet. Wenn Sie keine Daten über den Anforderungstext senden müssen, müssen Sie null übergeben.

Die entsprechenden Daten werden in die relevanten Attribute des XHR-Objekts eingefüllt:

•responseText: der als Antworttext zurückgegebene Text

•responseXML: der Inhaltstyp von die Antwort ist „text /xml“ oder „application/xml“

• status: HTTP-Status der Antwort

• statusText: Beschreibung des HTTP-Status

Nach dem Empfang Überprüfen Sie nach der Antwort zunächst das Statusattribut und bestätigen Sie, dass die Antwort zurückgegeben wurde. Im Allgemeinen ist 200 ein Erfolgszeichen. Der Statuscode 304 zeigt an, dass die Ressource nicht geändert wurde und die zwischengespeicherte Version im Browser direkt verwendet werden kann.

Um eine passende Antwort zu erhalten, sollten beide Statuscodes wie folgt erkannt werden:

xhr.open("get", "index.jsp", false);
xhr.send(null);
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}

Durch die Erkennung des readyState-Attributs kann die aktuell aktive Phase des Anfrage-/Antwortprozesses ermittelt werden.

•0: Nicht initialisiert. Die open()-Methode wurde nicht

•1: Start aufgerufen. Die open()-Methode wurde aufgerufen, aber die send()-Methode wurde nicht aufgerufen

•2: Senden. Die send()-Methode wurde aufgerufen und es wurde keine Antwort empfangen

•3: Empfangen. Teildaten wurden empfangen

•4: Vollständig. Alle Daten wurden empfangen und können auf dem

-Client verwendet werden. Wenn sich der Wert des readyState-Attributs ändert, wird ein readystatechange-Ereignis ausgelöst. Durch Angabe des onreadystatechangeEreignishandlers vor dem Aufruf von open() kann die Browserkompatibilität sichergestellt werden.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("请求成功：" + xhr.status);
}
}
};
xhr.open("get", "index.jsp", true);
xhr.send(null);

Asynchrone Anfragen können abgebrochen werden, bevor eine Antwort empfangen wird: xhr.abort();

HTTP-Header-Informationen

Das XHR-Objekt stellt Operationsmethoden bereit für Anfrage-Header und Antwort-Header-Informationen.

Standardmäßig werden beim Senden einer XHR-Anfrage auch die folgenden Header-Informationen gesendet.

•Accept: Der Inhaltstyp, den der Browser verarbeiten kann

•Accept-Charset: Der Zeichensatz, den der Browser anzeigen kann

•Accept-Encoding: Der Inhaltstyp dass der Browser mit der Komprimierungskodierung umgehen kann

•Accept-Language: Die aktuell vom Browser eingestellte Sprache

•Verbindung: Die Art der Verbindung zwischen dem Browser und dem Server

•Cookie: Die auf der aktuellen Seite eingestellte Sprache. Beliebiges Cookie

•Host: Die Domain, in der sich die Seite befindet, die die Anfrage stellt

•Referer: Die URL der Seite, die die Anfrage stellt

•User-Aent: Das User-Agent-Zeichen des Browser-Strings

使用setRequestHeader()可以设置自定义的请求头部信息。必须在调用open()方法之后，且在调用send()之前，调用

setRequestHeader()：

xhr.open("get", "index.jsp", true);
xhr.setRequestHeader("MyHeader", "MyValue");
xhr.send(null);

调用getResponseHeader()并传入字段名称，可以取得相应的响应头部信息。getAllResponseHeader()取得包含所有头部信息的长字符串。

var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeader();

GET请求

GET用于向服务器查询某些信息。可以将查询字符串参数追加到URL的末尾，查询字符串中的每个参数的名称和值都必须使用encodeURIComponent()编码：

xhr.open("get", "login.jsp?name1=value1&name2=value2", false); 
addURLParam()接收三个参数：要添加参数的URL、参数的名称和参数的值。
var url = "login.jsp";
// 添加参数
url = addURLParam(url, "username", "xxyh");
url = addURLParam(url, "password", "xxyh123");
// 初始化请求
xhr.open("get", url, false);

POST请求

POST请求用于向服务器发送应该被保存的数据。POST请求的主体可以包含非常多的数据，而且格式不限。

初始化请求：

xhr.open("post", "login.jsp", true); 
首先将Content-Type头部信息设置为application/x-www-form-urlencoded,然后建立一个字符串格式。如果需要将页面中的表单数据进行序列化，然后再通过XHR发送到服务器，可以使用serialize()函数来创建这个字符串：
xhr.open("get", "login.jsp", false);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var form = document.getElementById("user-info");
xhr.send(serialize(form));

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

推荐阅读：

jQuery+AJAX实现调用后台步骤详解

JQuery调用Ajax加载图片

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse der Ajax-Nutzungsfähigkeiten in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!