Implementieren Sie Ajax, um asynchrone Anfragen zu senden (grafisches Tutorial)

In diesem Artikel erfahren Sie hauptsächlich, wie Sie Ajax zum Senden asynchroner Anfragen einfach implementieren. Interessierte Freunde können sich als Referenz auf

Ajax zum Senden asynchroner Anfragen beziehen

Der erste Schritt(Get XMLHttpRequest)

Ajax muss eigentlich nur ein Objekt lernen: XMLHttpRequest. Wenn Sie es beherrschen, beherrschen Sie Ajax!!!

1. Holen Sie sich XMLHttpRequest

Die meisten Browser unterstützen: var xmlHttp=new XMLHttpRequest();
IE6.0: var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 🎜>IE5.0 verwendet frühere Versionen von IE: var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

2. Schreiben Sie eine Funktion, die ein XMLHttpRequest-Objekt erstellt

function createXMLHttpRequest(){
     try{
     return new XMLHttpRequest();
     } catch(e){
     try{
     return new ActiveXObject(“Msxml2.XMLHTTP”);
    }catch(e){
     try{
      return new ActiveXObject(“Microsoft.XMLHTTP”);
     }catch(e){
       alert(“哥们儿,你用的是什么浏览器啊?”);
       throw e;
    }
    }
     } 
}

Schritt 2(Öffnen Sie die Verbindung mit dem Server)

xmlHttp.open(): wird verwendet, um die Verbindung mit dem Server zu öffnen erfordert drei Parameter:

Anforderungsmethode: Kann GET oder POST sein

Angeforderte URL: Geben Sie die serverseitige Ressource an, zum Beispiel: /day23_1/AServlet
Ob die Anforderung asynchron ist: Wenn wahr, es bedeutet, eine asynchrone Anfrage zu senden, andernfalls eine synchrone Anfrage

xmlHttp.open("GET","/day23_1/AServlet",true);//Zum Beispiel

Schritt 3(Anfrage senden)

xmlHttp.send(null): Wenn nicht angegeben, können einige Browser möglicherweise nicht senden! 🎜> Parameter: Ja Textinhalt anfordern! Wenn es sich um eine GET-Anfrage handelt, muss null angegeben werden.

Wenn es sich um eine POST-Anfrage handelt, lautet sie wie folgt:

xmlHttp.send(“username=zhangSan&password=123“); Vier Schritte:

Registrieren Sie einen Listener für ein Ereignis des xmlHttp-Objekts: onreadystatechangeDas xmlHttp-Objekt hat insgesamt 5 Zustände
0: Initialisierung ist nicht abgeschlossen, gerade erstelltes XMLHttpRequest-Objekt, die open()-Methode hat wurde noch nicht aufgerufen

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

2: Die Anfrage wird im Abschlussstatus gesendet, die send( ) Methode wurde aufgerufen 3: Beginnen Sie mit dem Lesen der Serverantwort4: Beenden Sie das Lesen der Serverantwort (normalerweise kümmern wir uns nur um den letzten Status!!!)

Rufen Sie den Status ab des xmlHttp-Objekts

var state = xmlHttp.readyState;//可能是0、1、2、3、4

Statuscode der Serverantwort abrufen (200: Erfolg 304: Status nicht geändert 404 500: Serverfehler)

var status=xmlHttp.status;//例如200、404、500

Den Inhalt der Serverantwort abrufen

var content=xmlHttp.responseText;//得到服务器的响应的文本格式的内容(这更通用)
var content=xmlHttp.responseXML;//得到服务器的响应的xml响应的内容,它是document对象了!

Also der Zuhörer sollte so geschrieben sein

xmlHttp.onreadystatechange = function(){

  //xmlHttp的5种状态都会调用本方法
    if(xmlHttp.readyState ==4 && xmlHttp.status == 200){

  //双重判断:判断是否为4状态,而且还要判断是否为200
      var text=xmlHttp.responseText;
     } 
};

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Ajax-Implementierung zum Speichern und Lesen hochgeladener Bilder im Hintergrund (grafisches Tutorial)

Struts2 und Ajax-Dateninteraktion (grafisches Tutorial)

Die Lösung für das Problem, dass die Ajax-Anfrage erfolgreich gesendet wird, aber nicht erfolgreich ist (grafisches Tutorial)

Das obige ist der detaillierte Inhalt vonImplementieren Sie Ajax, um asynchrone Anfragen zu senden (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!