Detaillierte Analyse mit Ajax

Dieses Mal werde ich Ihnen eine detaillierte Analyse der Verwendung von Ajax geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Ajax? Hier sind praktische Fälle.

Ajax-Einführung

Ajax gilt als (die Abkürzung für Asynchronous JavaScript And Xml). Nun heißt die Technologie, die es dem Browser ermöglicht, mit dem Server zu kommunizieren, ohne die aktuelle Seite zu aktualisieren,

Synchronisierung bedeutet: Nachdem der Absender die Daten gesendet hat, wartet er vor dem Senden darauf, dass der Empfänger eine Antwort zurücksendet das nächste Datenpaket.

Asynchron bedeutet, dass der Absender nach dem Senden der Daten nicht darauf wartet, dass der Empfänger eine Antwort zurücksendet, und dann das nächste Datenpaket sendet.

Normalerweise die Methode zur Kommunikation mit dem Server ohne Aktualisierung der Webseite:

• Flash-Frame

• Frameset: Bei Verwendung Eine Reihe von Frames Eine Webseite ist so aufgebaut, dass nur einer der Frames aktualisiert werden kann, ohne die gesamte Seite zu stören

• XMLHttpRequest: Dieses Objekt ist eine Erweiterung von JavaScript, die die Webseite ermöglicht um mit dem Server zu kommunizieren. Die beste Wahl zum Erstellen von Ajax-Anwendungen. Tatsächlich wird Ajax normalerweise als Synonym für XMLHttpRequest (XHR)-Objekte angesehen

AjaxGrundlegende Verwendung

Ajax ist eine Technologie, die in unserer Entwicklung verwendet werden muss. Ajax ist jedoch normalerweise für die Dateninteraktion zuständig Das Senden und Empfangen von Daten ist ebenfalls die einzige Funktionalität.

Die Implementierung von Ajax basiert auf XMLHttpRequest. Seine grundlegende Verwendung ist wie folgt:

var xhr;
window.XMLHttpRequest?xhr = new XMLHttpRequest():xhr = new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("get","demo!register.action?name=zt&age=23",true);
xhr.send(null);
xhr.onreadystatechange = function(){
　　if(xhr.readyState==4&&xhr.status==200){
 　　alert(JSON.parse(xhr.responseText));
　　}
}

Die Verantwortung von Ajax besteht darin, Daten zu senden und Daten zu empfangen :

　1. Holen Sie sich ein XMLHttpRequest-Objekt

　2. Senden Sie Daten

　3. Empfangen und verarbeiten Sie die vom Server zurückgegebenen Daten

Folgen Führen Sie die oben genannten Schritte aus, um eine asynchrone Datenanforderung zu implementieren. Rufen Sie dabei zunächst ein xhr-Objekt ab. In modernen Browsern können wir ein xhr-Objekt direkt durch Instanziierung abrufen: var xhr = new XMLHttpRequest(); in IE5 und IE6 ActiveXObject zum Abrufen des xhr-Objekts: var xhr = new ActiveXObject("Microsoft.XMLHTTP").

Zu diesem Zeitpunkt haben wir das xhr-Objekt erhalten. Die Methode zum Senden von Daten wird über die xhr.open()-Methode ausgeführt. Was wir häufig verwenden, sind die ersten drei:

xhr.open(arg1,arg2,arg3)

arg1 gibt an, dass die Methode zum Anfordern von Daten im Allgemeinen Get oder Post ist.

arg2 gibt die angeforderte Serveradresse an.

arg3 Gibt an, ob diese Anfrage synchron oder post-asynchron ist. Die herausragende Funktion von Ajax ist asynchron, daher verwenden wir im Allgemeinen die asynchrone Methode. Der dritte Parameter ist auf true gesetzt (true bedeutet, eine asynchrone Anfrage zu stellen, false bedeutet, eine synchrone Anfrage zu stellen).

Die Methode xhr.open() ist nur eine Vorbereitung. Eine Anfrage kommuniziert nicht mit dem Server, nachdem sie open aufgerufen hat. Stattdessen beginnt die Kommunikation mit dem Server, nachdem die Funktion send() aufgerufen wurde ()-Funktion wird als Anforderungsende an den Dienst gesendet. Wenn wir den Anforderungsmodus in der open()-Funktion als get angeben, setzen wir send() normalerweise auf xhr.send(null). Wenn wir Daten über den Anforderungshauptteil senden möchten, müssen wir den Anforderungsmodus von open( festlegen). )-Funktion zum Posten. Verwenden Sie gleichzeitig die Daten, die wir senden müssen, als Parameter der send()-Funktion: xhr.send(param) Nach dem Aufruf der send()-Funktion beginnt die Kommunikation mit dem Server.

Alle Einstellungen für xhr sollten vor der send()-Funktion festgelegt werden:

 xhr.open(...);
 xhr.setRequestHeader(...);
 xhr.overrideMimeType(...);
 xhr.onreadystatechange = function(){...};
 xhr.send(...);

Aber da xhr.onreadystatechange ein Ereignis ist, sollte es nach send() platziert werden. Es ist ausführbar. Aus Gründen der Lesbarkeit platzieren wir die xhr-Einstellungen im Allgemeinen vor der Funktion send().

Nach send() können Sie den Status dieser Anfrage über xhr.readyState und xhr.status überwachen. Wenn xhr.readyState==4&&xhr.status==200 erfüllt ist, ist die Anfrage erfolgreich:

Wenn die Anfrage erfolgreich ist, können wir die vom Server zurückgegebenen Daten über xhr.responseText abrufen. Es ist zu beachten, dass xhr.responseText eine Zeichenfolge ist.

Ajax Common API

　　上面的请求过程是一个最基本的请求过程xhr对象还有几个经常使用的方法分别为xhr.abort()、xhr.setRequestHeader()、xhr.overrideMimeType()。

　　xhr.abort()：终止一个请求，直接调用即可不需要设置参数

xhr.abort()

　　xhr.setRequestHeader()：设置发送的请求头：

xhr.setRequestHeader("Content-Type","application/json; charset=utf-8")

　　第一个参数表示要设置的header，第二个参数表示要设置的header的值。xhr.setRequestHeader()必须在xhr.open()和xhr.send()之间，否则会抛出异常，同时xhr.setRequestHeader()的第一个参数是对大小写不敏感的只要我们字母写的对就能够设置成功，但是出于易读性我们要设置为正确的格式。

　　xhr.overrideMimeType()：重写响应头的Content-Type：

xhr.overrideMimeType('text/plain; charset=utf-8')

 　　xhr.overrideMimeType()同样要设置在xhr.send()之前。

JSON.parse()和JSON.stringify()使用

　　JSON.parse()用来将一个对象转换为字符串，JSON.stringify()用来将一个字符串转换为对象。在利用ajax进行数据交互的过程中返回的数据多数的时候是一个JSON格式的字符串，如果服务器给我们返回了数据此时我们就需要利用JSON.parse()来解析返回的数据（xhr.responseText即为服务器返回的数据）：

xhr.onreadystatechange = function(){
　　if(xhr.readyState==4&&xhr.status==200){
 var data = JSON.parse(xhr.responseText);
　　}
}

 　　在使用post方式发送数据的过程中，如果不是文件上传一般情况下传输的也是一个JSON数据，要想能够成功的发送到后台就需要用JSON.stringify()来将JSON对象来转换为一个字符串，同时Content-Type要设置为application/json：

var sendData = {name:"zt",age:23};
...
xhr.setRequestHeader("Content-Type","application/json; charset=utf-8");
xhr.send(JSON.stringify(sendData));

　　另外利用JSON.parse()和JSON.stringify()可以实现一个对象的深拷贝功能：

var sendData = {name:"zt",age:23};
var copyData = JSON.parse(JSON.stringify(sendData));

$.ajax基本使用

 　　为了方便使用JQ为我们封装好了一个ajax来方便我们的使用：

$.ajax({
 type:"post",//请求方式
 url:"url",//请求地址
 data:"...",//发送至服务端的数据
 contentType:"...",//设置发送数据的类型如果data是一个json字符串这里要设置为application/json
 success:function(data){...},//请求成功的回调函数data可看做是服务器返回的数据
 error:function(){...}//请求失败的回调函数
 });

　　或者：

$.ajax({
 type:"post",
 url:"url",
 data:"...",
 contentType:"...",
 })
 .done(function(data){...})
 .fail(function(){...});

　　回调函数中的data即为服务器返回的数据的一个代理，直接使用即可。

　　为了简化我们的开发JQ提供了一些全局设置函数包括$.ajaxSetup()、$.()ajaxStart()、$().ajaxStop()、$().ajaxComplete()、$().ajaxError()、$().ajaxSuccess()、$().ajaxSend()。

　　$.ajaxSetup()用来设置基本的参数例如：

$.ajaxSetup({
 type:"post",
 contentType:"application/json; charset=utf-8"
 });

　　我们在使用$.ajax时可以直接这样设置：

 $.ajax({
 url:"",
 success:function(){...},
 error:function(){...}
 })

　　最终等价于：

 $.ajax({
 type:"post",
 contentType:"application/json; charset=utf-8",
 url:"",
 success:function(){...},
 error:function(){...}
 })

　　$().ajaxStart()、$().ajaxStop()、$().ajaxComplete()、$().ajaxError()、$().ajaxSuccess()、$().ajaxSend()都是用来设置一些全局回调函数的。例如我们在提交数据时为了防止多次提交我们需要在发送请求时产生一个loading遮罩在数据发送完成后取消遮罩，如果在每一次ajax请求时我们都设置一次就会很麻烦，此时我们就可以用全局回调函数来简化我们的操作：

　　利用全局事件在请求开始时产生一个遮罩在请求完成时取消遮罩：

$(document).ajaxStart(function(){
 loadingMask.show();
 });
 $(document).ajaxComplete(function(){
 loadingMask.hide();
 });

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

推荐阅读：

Ajax请求与Filter解析

ajax的参数过长无法提交如何处理

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