Explication détaillée de plusieurs méthodes de requête ajax pouvant être rencontrées en combat réel

Cet article partage principalement avec vous plusieurs méthodes de requête ajax qui peuvent être rencontrées en combat réel. L'article le présente en détail à travers l'exemple de code ajax, qui a une certaine valeur de référence pour tout le monde. veuillez suivre Jetons un coup d'oeil ensemble.

Avant-propos

Récemment, je travaille sur une page fonctionnelle pour mesurer la vitesse d'un seul nœud. La logique de la mesure de vitesse est la suivante. lors de la mesure de la vitesse de téléchargement, le frontal transmet 5 m. Envoyez les données au serveur, enregistrez l'heure de téléchargement et de renvoi des données. Lors de la mesure de la vitesse de téléchargement, téléchargez 1 m de données depuis le serveur, enregistrez le téléchargement et l'heure de réussite. téléchargement. La synchronisation Ajax est utilisée pour le téléchargement et le téléchargement afin d'éviter le problème de blocage de la bande passante client, et faites-le 3 fois et prenez la moyenne. Au cours du processus de développement, de nombreux détours ont été faits en raison des problèmes de synchronisation et d'asynchrone d'Ajax, j'ai donc également compilé et résumé la logique métier que j'ai rencontrée auparavant.

La méthode de requête ajax est la suivante

1 Ajax ordinaire, async signifie traitement synchrone et asynchrone. sera renvoyé Valeur, statut de la demande, xhr encapsule l'en-tête de la demande, mais il convient de noter que toutes les informations de l'en-tête de la demande ne peuvent pas être obtenues. Par exemple, la longueur du centre ne peut pas être obtenue

$.ajax({ 
 type: "GET", 
 async: true, //异步执行 默认是true异步 
 url: url, 
 dataType: "json", 
 // jsonp: "callback", 
 success: function(data, status, xhr){ 
  console.log(data);//返回值 
  console.log(status);//状态 
  console.log(xhr);//obj 
  console.log(xhr.getResponseHeader("Content-Type"));//application/octet-stream 
  console.log(xhr.getResponseHeader("Center-Length"));//null 
 } 
 
});

2. Parfois, la logique métier rencontrée est la suivante. La requête 2 dépend du résultat de retour de la requête 1, et la requête 3 dépend du résultat de retour de la requête 2. Si elle est écrite dans le forme de rappel, ce sera très long. Il existe deux solutions. Tout d'abord, regardons la solution ES5

(1) La solution ES5 consiste à utiliser ajax pour synchroniser. , c'est-à-dire plusieurs requêtes exécutées en même temps. Après le passage à la synchronisation, ajax est exécuté une par une, afin que ajax2 puisse obtenir le résultat de retour d'ajax1

let res1 = "" 
let res2 = "" 
 
$.ajax({ 
 type: 'get', 
 async: false, //同步执行 默认是true异步 
 url: pars.domain + "/api.php?Action=xxx&date=2017-03-08&t=" + (new Date).getTime(), 
 dataType: 'json', 
 success: function(res) { 
  if(res.code == 0){ 
   res1 = res.data.bandwidth[0] 
  }else{ 
    
  } 
 } 
}); 
 
$.ajax({ 
 type: 'get', 
 async: false, //同步执行 默认是true异步 
 url: pars.domain + "/api.php?Action=xxx&date=2017-03-08&dom1111" + res1 + "&t=" + (new Date).getTime(), 
 dataType: 'json', 
 success: function(res) { 
  if(res.code == 0){ 
   res2 = res.data.bandwidth[0] 
  }else{ 
    
  } 
 } 
});

.

(2) ES6 La solution est d'utiliser la méthode then de promesse. L'effet est le même que ci-dessus, et l'ajax suivant obtiendra la valeur de retour de l'ajax précédent. Lorsqu'il est écrit comme ceci, le code aura l'air très fluide

let pro = new Promise(function(resolve,reject){ 
 let url = pars.domain + "/api.php?Action=xxx=2017-03-08&t=" + (new Date).getTime() 
 let ajax = $.get(url, function(res) { 
  if (res.code == 0) { 
   resolve(resData); 
  } 
  else{ 
  } 
 }, "json"); 
 console.log('请求pro成功'); 
}); 
 
 
//用then处理操作成功，catch处理操作异常 
pro.then(requestA) 
 .then(requestB) 
 .then(requestC) 
 .catch(requestError); 
 
function requestA(res){ 
 console.log('上一步的结果：'+res); 
 console.log('请求A成功'); 
 let proA = new Promise(function(resolve,reject){ 
  let url = pars.domain + "/api.php?Action=xxx&date=2017-03-08&t=" + (new Date).getTime() 
  let ajax = $.get(url, function(res) { 
   if (res.code == 0) { 
    resolve(resData); 
   } 
   else{ 
   } 
  }, "json"); 
 }); 
 return proA 
} 
 
function requestB(res){ 
 console.log('上一步的结果：'+res); 
 console.log('请求B成功'); 
 let proB = new Promise(function(resolve,reject){ 
 
  let url = pars.domain + "/api.php?Action=xxx&date=2017-03-08&t=" + (new Date).getTime() 
  let ajax = $.get(url, function(res) { 
   if (res.code == 0) { 
    resolve(resData); 
   } 
   else{ 
   } 
  }, "json"); 
 }); 
 return proB 
} 
 
function requestC(res){ 
 console.log('上一步的结果：'+res); 
 console.log('请求C成功'); 
 let proC = new Promise(function(resolve,reject){ 
  let url = pars.domain + "/api.php?Action=xxx&date=2017-03-08&t=" + (new Date).getTime() 
  let ajax = $.get(url, function(res) { 
   if (res.code == 0) { 
    resolve(resData); 
   } 
   else{ 
   } 
  }, "json"); 
 }); 
 return proC 
} 
 
function requestError(){ 
 console.log('请求失败'); 
}

3 jsonp inter-domaine, ajoutez dynamiquement des balises de script pour obtenir une note inter-domaine. qu'il y a un rappel qui doit être négocié avec le serveur

function switchEngineRoomAjax(api,statusChanged){ 
 var api = api; 
 var statusChanged = statusChanged; 
 var url = api + "?method=setStatus" + "&status=" + statusChanged; 
 
 $.ajax({ 
  type: "GET", 
  url: url, 
  dataType: "jsonp", 
  jsonp: "callback",// 这里的callback是给后端接收用的，前端通过动态添加script标签，完成回调 
  success: function(res){ 
   if (res.code == 0) { 
    console.log('更改状态 jsonp获取数据成功！'); 
   } 
   else{ 
   } 
  } 
 }); 
};

Quatrièmement, vous rencontrerez également ce type de logique métier. Il existe trois asynchrones. requêtes de ajax1 ajax2 ajax3. Ce n'est pas nécessairement celui qui renvoie les données en premier. Une fois que toutes les requêtes ont réussi, une fonction de rappel est exécutée. Oui, un ajax séparé doit également être une nouvelle promesse

<.>

ajax1:function(){ 
 var promise = new Promise(function (resolve, reject) { 
  var url = "/api.php?Action=xxx; 
  $.get(url, function(res) { 
   if (res.code == 0) { 
    resolve('queryLog完成！'); 
   } 
   else{ 
   } 
  }, "json"); 
 }); 
 return promise 
}, 
ajax2: function(){ 
 var promise = new Promise(function (resolve, reject) { 
  var url = "/api.php?Action=xxx; 
  $.get(url, function(res) { 
   if (res.code == 0) { 
    resolve('queryGroupNodeList完成！'); 
   } 
   else{ 
   } 
  }, "json"); 
 }); 
 return promise 
}, 
ajax3: function(){ 
 var promise = new Promise(function (resolve, reject) { 
  var url = "/api.php?Action=xxx; 
  $.get(url, function(res) { 
   if (res.code == 0) { 
    resolve('queryGroupNodeMapList完成！'); 
   } 
   else{ 
   } 
  }, "json"); 
 }); 
 return promise 
}, 
initQuery: function(){ 
 var mySelf = this; 
 var promiseList = []; 
 var ajax1Promise = mySelf.ajax1(); 
 var ajax2Promise = mySelf.ajax2(); 
 var ajax3Promise = mySelf.ajax3(); 
 
 promiseList.push(ajax1Promise,ajax2Promise,ajax3Promise); 
 var p1 = new Promise(function (resolve, reject) { 
  console.log('创建1.2秒延时执行promise'); 
  setTimeout(function () { 
   resolve("1.2秒延时执行promise"); 
  }, 1200); 
 }); 
 promiseList.push(p1) 
 
 Promise.all(promiseList).then(function (result) { 
  console.log('ajax全部执行完毕：' + JSON.stringify(result)); // ["Hello", "World"] 
  mySelf.assembleTableData(); 
 }); 
},

Ce qui précède représente tout le contenu de cet article, j'espère que cela aidera tout le monde à apprendre !

Recommandations associées :

formulaire de soumission multi-pages ajax

ajax combiné avec les résultats de recherche Douban pour la pagination du code complet

Ajax implémente une interface de connexion à actualisation partielle avec code de vérification

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!