Implémenter la méthode ajax pour envoyer des requêtes asynchrones

Cette fois, je vais vous présenter comment implémenter ajax pour envoyer des méthodes de requêtes asynchrones , et quelles sont les précautions pour implémenter ajax pour envoyer des requêtes asynchrones. cas, jetons un coup d'oeil.

ajax envoie une demande asynchrone pour votre référence Le contenu spécifique est le suivant

. Première étape(Obtenir XMLHttpRequest)

Ajax n'a en fait besoin d'apprendre qu'un seul objet : XMLHttpRequest Si vous le maîtrisez, vous maîtriserez ajax !!!

. 1. Obtenez XMLHttpRequest

La plupart des navigateurs prennent en charge :var xmlHttp=new XMLHttpRequest();
IE6.0:var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
IE5.0 et versions antérieures d'IE:var xmlHttp =new ActiveXObject( "Microsoft.XMLHTTP");

2. Écrivez une fonction qui crée un objet XMLHttpRequest

function createXMLHttpRequest(){
     try{
     return new XMLHttpRequest();
     } catch(e){
     try{
     return new ActiveXObject(“Msxml2.XMLHTTP”);
    }catch(e){
     try{
      return new ActiveXObject(“Microsoft.XMLHTTP”);
     }catch(e){
       alert(“哥们儿,你用的是什么浏览器啊?”);
       throw e;
    }
    }
     } 
}

Étape 2(Ouvrir la connexion au serveur)

xmlHttp.open() : utilisé pour ouvrir une connexion avec le serveur, il nécessite trois paramètres :

Méthode de requête : peut être GET ou POST
URL demandée : spécifiez la ressource côté serveur, par exemple : /day23_1/AServlet
Si la requête est asynchrone : si c'est vrai, cela signifie l'envoi une requête asynchrone, sinon requête synchrone

xmlHttp.open("GET","/day23_1/AServlet",true);//Par exemple

Étape 3(Envoyer la demande)

xmlHttp.send(null) : S'il n'est pas indiqué, certains navigateurs peuvent ne pas pouvoir envoyer

 ! Paramètre : C'est le contenu du corps de la requête ! S'il s'agit d'une requête GET, null doit être donné.
S'il s'agit d'une demande POST, ce qui suit est

xmlHttp.send(“username=zhangSan&password=123”);

Étape 4 :

Enregistrez un écouteur sur un événement de l'objet xmlHttp : onreadystatechange
L'objet xmlHttp a un total de 5 états

0 : L'initialisation n'est pas terminée, l'objet XMLHttpRequest a seulement été créé et la méthode open() n'a pas encore été appelée
1 : La requête a démarré, la méthode open() a été appelée, mais le send() la méthode n'a pas encore été appelée
2 : état d'achèvement de l'envoi de la demande, la méthode send() a été appelée
3 : commencer à lire la réponse du serveur
4 : terminer la lecture de la réponse du serveur (généralement, nous ne nous soucions que du dernier statut !!!)

Récupérer le statut de l'objet xmlHttp

var state = xmlHttp.readyState;//可能是0、1、2、3、4

Récupérez le code d'état de la réponse du serveur (200 : Succès, 304 : Le statut n'a pas changé, 404 500 : Erreur du serveur)

var status=xmlHttp.status;//例如200、404、500

Récupérez le contenu de la réponse du serveur

var content=xmlHttp.responseText;//得到服务器的响应的文本格式的内容(这更通用)
var content=xmlHttp.responseXML;//得到服务器的响应的xml响应的内容,它是document对象了!

L'auditeur devrait donc être écrit comme ceci

xmlHttp.onreadystatechange = function(){
  //xmlHttp的5种状态都会调用本方法
    if(xmlHttp.readyState ==4 && xmlHttp.status == 200){
  //双重判断:判断是否为4状态,而且还要判断是否为200
      var text=xmlHttp.responseText;
     } 
};

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 l'utilisation de vue-cli+sass

Comment créer une fonction de compte à rebours avec Date objet

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!