Explication détaillée des principes Ajax et exemples d'encapsulation de code

AJAX = Asynchronous JavaScript and XML (JavaScript et XML asynchrones), je pense que tout le monde connaît ajax. L'article suivant vous présente principalement les informations pertinentes sur les principes d'Ajax et l'encapsulation de code, qui sont introduites via un exemple de code. détaillé. Les amis qui en ont besoin peuvent s'y référer.

Avant-propos

En fait, l'implémentation interne d'AJAX n'est pas gênante, principalement via un objet appelé XMLHttpRequest, et cet objet est utilisé dans les navigateurs existants sont pris en charge.

On peut dire que c'est le fondement de toute l'implémentation AJAX, et c'est l'objet utilisé par le navigateur pour échanger des données avec le serveur en arrière-plan. Avec lui, AJAX est né, et l'art de. Le rafraîchissement partiel de la page est né !

Cet article vous présente principalement le contenu pertinent sur les principes d'Ajax et l'encapsulation de code, et le partage pour votre référence et votre étude. Je ne dirai pas grand-chose ci-dessous, jetons un coup d'œil à l'introduction détaillée.

Exemple de code

var xmlhttp;
if (window.XMLHttpRequest) {
 // code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp = new XMLHttpRequest();
} else {
 // code for IE6, IE5 
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
  // to do...
 }
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

Étapes :

1. Créer.

Syntaxe de création d'un objet XMLHttpRequest :

var = new XMLHttpRequest();

Les anciennes versions d'Internet Explorer (IE5 et IE6) utilisent des objets ActiveX :

var = new ActiveXObject("Microsoft.XMLHTTP");

2. Connectez-vous et envoyez.

2.1. Trois paramètres de la fonction open() : méthode de requête, adresse de requête, demande de manière asynchrone

2.2. paramètres Les données sont soumises au serveur. POST est soumis au serveur en utilisant les données comme paramètre d'envoi

2.3 Dans la requête POST, avant d'envoyer les données, le type de contenu du. la soumission du formulaire doit être définie

2.3. Les paramètres soumis au serveur doivent être codés via la méthode encodeURIComponent() En fait, sous la forme d'une liste de paramètres clé = valeur, la clé et la valeur doivent être codées. être codés car ils contiendront des caractères spéciaux. Chaque fois qu'une requête est effectuée, une chaîne de v=xx sera orthographiée dans la liste des paramètres. Ceci permet de refuser la mise en cache et de demander directement au serveur à chaque fois.

3. Recevez.

3.1. Après avoir reçu la réponse, les données de réponse rempliront automatiquement l'objet XHR. Les attributs pertinents sont les suivants

responseText : le contenu du corps. renvoyé par la réponse, qui est de type chaîne de caractères ;

responseXML : Si le type de contenu de la réponse est "text/xml" ou "application/xml", cet attribut stockera les données XML correspondantes. , qui est le type de document correspondant au XML ;

statut : code d'état HTTP de réponse ;

statusText : description de l'état HTTP

3.2. L'attribut readyState de l'objet XHR représente le processus requête/réponse. Dans l'étape d'activité en cours, la valeur de cet attribut est la suivante :

0 --> non initialisé, la méthode open() n'a pas n'a pas encore été appelé ;

1 --> démarré, La méthode open() a été appelée, mais la méthode send() n'a pas été appelée

2 - -> Envoyé, la méthode send() a été appelée, mais aucune réponse n'a été reçue

3 --->

4 --> Terminé, toutes les données de réponse ont été reçues ;

Tant que readyState Lorsque la valeur change, l'événement readystatechange sera appelé (en fait, pour des raisons de fluidité logique, readystatechange. peut être placé après l'envoi, car lorsque l'envoi demande au serveur, une communication réseau se produit, ce qui prend du temps. Il est également possible de spécifier le gestionnaire d'événements readystatechange après l'envoi, je l'utilise généralement de cette façon, mais dans un souci de standardisation et de standardisation. compatibilité cross-navigateur, il est préférable de le préciser avant l'ouverture).

3.3. Dans l'événement readystatechange, déterminez d'abord si la réponse est reçue, puis déterminez si le serveur a traité avec succès la demande

est le code d'état commençant par 2 signifie réussi. à partir du cache, le code ci-dessus ajoute un nombre aléatoire à chaque requête, donc la valeur ne sera pas récupérée du cache, donc cet état n'a pas besoin d'être jugé.

xhr.status

Méthode d'encapsulation 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!