English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Spiegazione dettagliata delle basi di Ajax

La funzione principale di Ajax è implementare l'accesso asincrono del browser al server: inviare una piccola quantità di dati attraverso l'oggetto XMLHttpRequest del browser per interagire con il server, il server restituisce una piccola quantità di dati, quindi aggiornare una parte della pagina del client.

1. Eseguire l'istanziazione dell'oggetto XMLHttpRequest

var request;
if (window.XMLHttpRequest){
 request=new XMLHttpRequest();
}
else{
 request=new ActiveXObject("Microsoft.XMLHTTP");
 //Compatibile con ie5 6
}

2. I metodi di XMLHttpRequest inviano la richiesta al server

request.open("POST",get.php,true);//Richiesta
//Imposta le intestazioni HTTP, informa il server che invieremo un modulo in modo chiave-valore
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//Deve essere impostato il valore di Content-Type tra open e send per POST
request.send("name=王二狗&sex=男");//Utilizza il metodo send per inviare al server

3. Metodi per ottenere la risposta

responseText ottiene i dati di risposta in forma di stringa
responseXML ottiene i dati di risposta in forma XML
status e statusText restituiscono il codice di stato HTTP in forma numerica e testuale
getAllResponseHeader() ottiene tutti gli intestazioni di risposta
getResponseHeader() consulta il valore di un campo specifico nella risposta

4. È molto importante monitorare le variazioni dell'attributo readyState

    La richiesta 0 non è stata inizializzata, la chiamata open non è stata effettuata

    La connessione del server è stata stabilita, la chiamata open è stata effettuata

    La richiesta 2 è stata ricevuta, le informazioni dell'intestazione sono state ricevute

    3 means the request is being processed, and the response body has been received

    4 means the request is completed, and the response is ready, the response is complete

//Trigger when readyState changes
//Determine the change of readyState attribute through the onreadystatechange event
request.onreadystatechange=function(){
 if(request.readyState===4&&request.status===200){
 //Do something like get the response data request.responseText
 }
}

5. Complete XHR

var request=new XMLHttpRequest();//1. Create an XHR object
request.open("GET","get.php?number=" + the data to be submitted in the form true);//2. Call the open method
//Here if it is a POST request, send is an object containing data
request.send();//Send some data
request.onreadystatechange=function(){ //3. Listen and judge whether the server responds correctly
 if(request.readyState===4&&request.status===200){
 //Do something like get the server response content request.responseText
 }
}

This is the full content of this article, I hope the content of this article can bring a certain amount of help to everyone's learning or work, and also hope to support the shouting tutorial more!

Declaration: The content of this article is from the network, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, does not undergo manual editing, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (when sending an email, please replace # with @) for reporting, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.

Ti potrebbe interessare