Explication détaillée des étapes d'utilisation d'Ajax

Cette fois, je vais vous donner une explication détaillée des étapes pour utiliser Ajax. Quelles sont les précautions lors de l'utilisation d'Ajax Voici des cas pratiques, jetons un coup d'oeil.

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éer l'objet xmlhttprequest, var xmlhttp =new XMLHttpRequest( ); L'objet XMLHttpRequest est utilisé pour échanger des données avec le serveur.

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

La deuxième étape consiste à utiliser les méthodes open() et send() de l'objet xmlhttprequest pour envoyer des requêtes de ressources au serveur.

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 la requête au serveur.

xhttp.send(string); Utilisez la méthode post pour envoyer une requête au serveur.

Quand la demande de publication sera-t-elle disponible ?

(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 la demande de publication n'a pas de limite de caractères.

(3) Envoyer 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 nécessitent le setRequestHeader de la requête xmlhttp La méthode object 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 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 la demande est traitée, 4 la demande est complété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.

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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de la façon de gérer les problèmes inter-domaines de WebService

Explication détaillée de l'utilisation de Ajax() pour interagir avec l'arrière-plan

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!