Compréhension approfondie des quatre étapes de la demande de données ajax

Ajax est souvent utilisé dans le travail front-end. En fait, beaucoup de gens savent seulement qu'ajax est une requête asynchrone et ne savent pas comment l'utiliser. Ensuite, je vais vous expliquer les quatre étapes principales de l'utilisation d'Ajax. .Les amis qui en ont besoin peuvent le faire pour référence.

Qu'est-ce qu'Ajax ?

Ajax (Javascript XML asynchrone) peut actualiser des données partielles d'une page Web au lieu de recharger la page Web entière.

Comment utiliser ajax ?

La première étape, créez un objet xmlhttprequest, var xmlhttp =new XMLHttpRequest(); utilisé pour communiquer avec les données du serveur Exchange.

var xhttp;
if (window.XMLHttpRequest) {
//现代主流浏览器
xhttp = new XMLHttpRequest();
} else {
// 针对浏览器，比如IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

La deuxième étape consiste à envoyer une requête de ressource au serveur en utilisant les méthodes open() et send() de l'objet xmlhttprequest.

La méthode xmlhttp.open(method, url, async) inclut get et post, l'url est principalement le chemin d'un fichier ou d'une ressource, et le paramètre async est true (représentant asynchrone) ou false (représentant synchrone)
xhttp. send(); Utilisez la méthode get pour envoyer une requête au serveur.
xhttp.send(string); Utilisez la méthode post pour envoyer une requête au serveur.

Quand la demande de publication peut-elle être utilisée ?

(1) Lors de la mise à jour d'un fichier ou d'une base de données.
(2) Envoyez une grande quantité de données au serveur car il n'y a pas de limite de caractères pour les demandes de publication.
(3) Envoyez les données cryptées saisies par l'utilisateur.

obtenir un exemple :

xhttp.open("GET", "ajax_info.txt", true);
xhttp.open("GET", "index.html", true);
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);xhttp.send();

exemple de publication :

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

les données du formulaire de publication doivent utiliser la requête xmlhttp object La méthode setRequestHeader ajoute un en-tête HTTP.

exemple de formulaire de publication

xhttp.open("POST", "ajax_test.aspx", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");

async=true La fonction onreadystatechange sera exécutée lorsque le serveur sera prêt à répondre.

xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "index.aspx", true);
xhttp.send();

asyn=false, alors il n'est pas nécessaire d'écrire la fonction onreadystatechange, et le code d'exécution est écrit directement après l'envoi.

xhttp.open("GET", "index.aspx", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

La troisième étape consiste à utiliser l'attribut ResponseText ou ResponseXML de l'objet xmlhttprequest pour obtenir la réponse du serveur.

Utilisez l'attribut ResponseText pour obtenir les données de chaîne de la réponse du serveur et utilisez l'attribut ResponseXML pour obtenir les données XML de la réponse du serveur.
Un exemple est le suivant :

document.getElementById("demo").innerHTML = xhttp.responseText;

Les données XML répondues par le serveur doivent être converties à l'aide d'objets XML.

Exemple :

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Étape 4, fonction onreadystatechange Lors de l'envoi d'une requête au serveur, si nous voulons que le serveur réponde et exécute certaines fonctions, nous Vous devez utiliser la fonction onreadystatechange. La fonction onreadystatechange est déclenchée à chaque fois que l'état readyState de l'objet xmlhttprequest change.

L'attribut onreadystatechange stocke une fonction qui est automatiquement appelée lorsque readyState change.
Attribut readyState, l'état de l'objet XMLHttpRequest, passe de 0 à 4, 0 signifie que la requête n'a pas été initialisée, 1 signifie que la connexion au serveur est réussie, 2 la requête a été reçue par le serveur, 3 la requête est traitée , 4 la demande est terminée et la réponse est prête.
Attribut de statut, 200 signifie une réponse réussie, 404 signifie que la page n'existe pas.

Dans l'événement onreadystatechange, la réponse du serveur est prête. Lorsque readyState==4 et status==200, la réponse du serveur est prête.
Exemple :

function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
} 
//函数作为参数调用



Let AJAX change this text.
Change Content

<script>
function loadDoc(url, cfunc) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
cfunc(xhttp);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction(xhttp) {
document.getElementById(&quot;demo&quot;).innerHTML = xhttp.responseText;
}
</script>

Voici les quatre étapes ci-dessus pour utiliser Ajax.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!