Implémenter ajax pour envoyer des requêtes asynchrones (tutoriel graphique)

Cet article vous apprend principalement comment implémenter facilement ajax pour envoyer des requêtes asynchrones, qui a une certaine valeur de référence. Les amis intéressés peuvent se référer à

ajax pour envoyer des requêtes asynchrones pour votre référence.

La 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 utilise des 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 avec le serveur)

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

Méthode de requête : peut être GET ou POST

URL de la requête : spécifiez la ressource côté serveur, par exemple : /day23_1/AServlet

Indique si la requête est asynchrone : si c'est vrai, cela signifie Envoyer une requête asynchrone, sinon une requête synchrone

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

Étape 3

(Envoyer la demande)

xmlHttp.send(null) : s'il n'est pas indiqué, certains navigateurs peuvent ne pas être en mesure d'envoyer !

Paramètres : 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 requête POST, elle se présente comme suit :

xmlHttp.send("username=zhangSan&password=123"); Quatre étapes :

Enregistrer 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, vient de créer l'objet XMLHttpRequest, la méthode open() a pas encore appelé

1 : La requête a démarré, la méthode open() a été appelée, mais la méthode send() n'a pas encore été appelée2 : La requête est envoyée en statut d'achèvement, le send( ) la méthode 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 !!!)

Obtenir le statut de l'objet xmlHttp

Récupérer le code d'état de la réponse du serveur (200 : Succès 304 : Statut non modifié 404 500 : Erreur du serveur)

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

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

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

Donc, l'auditeur devrait être écrit comme ceci

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

Ce qui précède est ce que j'ai compilé pour vous, j'espère que cela vous sera utile. à vous à l'avenir.

Articles associés :

xmlHttp.onreadystatechange = function(){

  //xmlHttp的5种状态都会调用本方法
    if(xmlHttp.readyState ==4 && xmlHttp.status == 200){

  //双重判断:判断是否为4状态,而且还要判断是否为200
      var text=xmlHttp.responseText;
     } 
};

Implémentation Ajax de l'enregistrement des images téléchargées en arrière-plan et de leur lecture (tutoriel graphique)

Struts2 et interaction avec les données Ajax (tutoriel graphique)

La solution au problème selon lequel la requête Ajax est envoyée avec succès mais n'entre pas dans le succès (tutoriel graphique)

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!