Une compréhension simple de JavaScript AJAX

Cet article présente principalement les connaissances pertinentes d'AJAX en JavaScript, qui a une très bonne valeur de référence, jetons un coup d'œil avec l'éditeur ci-dessous

Résumé<.>

La technologie AJAX est l'une des compétences essentielles pour la construction de pages Web. Cet article espère aider tout le monde à apprendre cette technologie facilement

1. Qu'est-ce qu'Ajax ?

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

2. Comment utiliser ajax ?

Étape 1 : Créer un objet xmlhttprequest

Créer Objet xmlhttprequest, l'objet XMLHttpRequest est utilisé pour échanger des données avec le serveur.

var xmlhttp =new XMLHttpRequest();

Étape 2 : Enregistrez la fonction de rappel

fonction onreadystatechange, lorsque Une fois que le serveur a répondu à la demande et renvoyé les données, si nous voulons que le client traite les données, nous devons utiliser la fonction onreadystatechange. La fonction onreadystatechange est déclenchée à chaque fois que l'état prêt de l'objet xmlhttprequest change. ReadyState sera présenté en détail dans le chapitre suivant.

 xmlHttp.onreadystatechange= callback;
  function callback(){}

Étape 3 : Configurer et envoyer la requête

Configurer et envoyer en utilisant les méthodes open() et send() du Objet xmlhttprequest Les demandes de ressources sont adressées 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)

xmlhttp.send(); Utilisez la méthode get pour envoyer la requête au serveur.

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

Les données du formulaire de publication doivent utiliser la méthode setRequestHeader de l'objet xmlhttprequest pour ajouter un en-tête HTTP.

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.

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

Étape 4 : Traiter les données de réponse

Utilisez 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.

Utilisez readyState==4 et status==200 dans la fonction de rappel pour déterminer si l'interaction est terminée et si la réponse est correcte, et obtenez les données renvoyées par le serveur si nécessaire pour mettre à jour le contenu de la page.

function callback(){
  if(xmlHttp.readyState == 4){
   //判断交互是否成功
   if(xmlHttp.status == 200){
    //获取服务器返回的数据
    //获取纯文本数据
    var responseText =xmlHttp.responseText;
    document.getElementById("info").innerHTML = responseText;
   }
  }
}

3. 5 états (readyState) pendant le fonctionnement d'AJAX

Dans le fonctionnement réel d'AJAX, l'accès à XMLHttpRequest (XHR) n'est pas terminé en même temps, mais le résultat obtenu après avoir traversé plusieurs états respectivement. Il existe 5 types de cet état dans AJAX. Ces cinq états sont respectivement commutés et définis par le moteur AJAX.

0 : XHR est défini mais pas encore initialisé

1 : La méthode send() est appelée et la requête est envoyée. Une fois la requête envoyée, elle commence à attendre de recevoir la réponse.

2 : Réception de la réponse terminée

3 : Le contenu de la réponse est en cours d'analyse

4 : L'analyse du contenu de la réponse est terminée et renvoyée à l'appel client

Pour le statut ci-dessus, le statut "0". C'est une valeur de statut qui est automatiquement acquise après définition. Pour le statut d'accès réussi (informations obtenues), nous utilisons principalement "4" pour juger.

Il est à noter qu'à chaque fois que l'état est changé, l'événement onreadystatechange

sera déclenché, donc l'événement onreadystatechange est déclenché 5 fois dans tout le processus

4. Avantages d'AJAX Inconvénients

Avantages

1. avec le serveur dans la page sans interruption. Le fonctionnement de l'utilisateur a une capacité de réponse plus rapide, offrant à l'utilisateur une très bonne expérience.

2. Réduisez la charge sur le serveur. Le principe d'ajax est de "récupérer les données à la demande", ce qui peut minimiser la charge sur le serveur causée par les requêtes et réponses redondantes.

Inconvénients

1. Ajax tue le bouton de retour, ce qui détruit le mécanisme de retour du navigateur.

2. Le support des moteurs de recherche est relativement faible.

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!