Ajax+js réalise une interaction asynchrone

Ce que cet article partage avec vous, c'est la méthode et le code d'interaction asynchrone implémentés par le javascript natif combiné avec ajax. C'est très simple et pratique. Les amis dans le besoin peuvent s'y référer.

Quand il s'agit d'interaction asynchrone, tout le monde dira ajax, comme si la technologie ajax était devenue synonyme d'interaction asynchrone. Ensuite, nous étudierons le cœur de l'objet ajax  !

<.> Il n'y a que 4 étapes pour utiliser ajax afin d'obtenir une interaction asynchrone :

1. Créer un objet principal ajax

2. Établir une connexion avec le serveur

3. Établir une connexion avec le serveur

4. Envoyer une requête au serveur

Recevoir les données de réponse du serveur

L'asynchrone apparemment mystérieux interaction. Après avoir clarifié ces 4 étapes, peut-être que tout le monde a déjà une idée préliminaire en tête

Nous créons d'abord l'objet principal d'ajax. En raison de problèmes de compatibilité du navigateur, nous ne devons pas prendre en compte ses problèmes de compatibilité lors de la création du noyau. objet ajax, car afin d'obtenir une interaction asynchrone, les étapes suivantes sont basées sur la création réussie de l'objet principal ajax lors de la première étape

 function getXhr(){
      // 声明XMLHttpRequest对象
      var xhr = null;
      // 根据浏览器的不同情况进行创建
       if(window.XMLHttpRequest){
      // 表示除IE外的其他浏览器
           xhr = new XMLHttpRequest();
       }else{
         // 表示IE浏览器
         xhr = new ActiveXObject('Microsoft.XMLHttp');
       }
       return xhr;
 }
 // 创建核心对象
 var xhr = getXhr();

Nous. Si vous avez créé avec succès l'objet principal ajax via le code ci-dessus, nous avons enregistré dans la variable xhr, les objets principaux ajax mentionnés ensuite seront remplacés par xhr

La deuxième étape consiste à établir une connexion avec le serveur et à appeler. la méthode open(method, url, async) via l'objet core ajax

Explication des paramètres formels de la méthode open :

la méthode représente la méthode de requête (get ou post)

url représente l'adresse du php demandé (notez que lorsque

type de requête< Lorsque 🎜> est obtenu, les données demandées seront suivies d'un point d'interrogation après l'adresse url, et la valeur nulle sera transmise dans la méthode d'envoi ci-dessous)

async est une valeur booléenne, indiquant si elle est asynchrone, et la valeur par défaut est vraie Dans la dernière version, cet élément de la spécification n'a plus besoin d'être rempli, car le fonctionnaire. pense qu'utiliser ajax, c'est atteindre l'asynchrone

xhr.open("get","01.php?user=xianfeng");//这是get方式请求数据
xhr.open("post","01.php");//这是以post方式请求数据

Dans la troisième étape, nous enverrons une requête au serveur en utilisant ajax L'objet principal appelle la méthode d'envoi

S'il s'agit de la méthode post, les données demandées seront placées dans la méthode send sous la forme nom=valeur et envoyées au serveur. La méthode get passe directement la valeur nulle

.

xhr.send("user=xianfeng");//这是以post方式发送请求数据
xhr.send(null);//这是以get方式

La quatrième étape consiste à recevoir les données renvoyées par la réponse du serveur et à utiliser l'événement onreadystatechange pour surveiller l'état de communication du serveur. Obtenez l'état de communication actuel du serveur via readyState. L'attribut status obtient le code d'état , en utilisant L'attribut réponseText reçoit les données renvoyées par le serveur (fait référence ici au type de texte

chaîne

données au format XML). les fameuses données au format json seront écrites

xhr.onreadystatechange = function(){
   　　　　　　　　　　　　　　　// 保证服务器端响应的数据发送完毕,保证这次请求必须是成功的
             　　　if(xhr.readyState == 4&&xhr.status == 200){
          　　　　　　// 接收服务器端的数据
          　　　　　　var data = xhr.responseText;
          　　　　　　 // 测试
          　　　　　　 console.log(data);
              　　 } 
             };

.

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!