Comment utiliser la requête ajax dans le projet

Cette fois, je vais vous montrer comment utiliser les requêtes ajax dans les projets, et quelles sont les précautions lors de l'utilisation des requêtes ajax dans les projets. Voici des cas pratiques, jetons un coup d'oeil.

Préface

Récemment, je travaille sur une page de fonction 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'asynchronisme d'Ajax, j'ai donc également compilé et résumé la logique métier que j'ai rencontrée auparavant.

ajaxLa méthode de requête est la suivante

1 Ajax ordinaire, async signifie traitement synchrone et asynchrone. succès, il y aura une valeur de retour de données, un statut de demande d'état et xhr encapsule l'en-tête de demande, mais il convient de noter que toutes les informations d'en-tête de 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 en mode rappel, elle sera très détaillée. Il existe deux solutions. Tout d'abord, regardons la solution ES5

(1) La solution ES5 consiste à utiliser ajax pour synchroniser. L'ajax par défaut est asynchrone, c'est-à-dire que plusieurs requêtes sont exécutées en même temps. Après être passé à la synchronisation, ajax sera exécuté un par un, 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) Solution ES6, utilisez la méthode then de promesse, l'effet est. comme ci-dessus, ajax sera exécuté dans l'ordre, 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 cross. -domain, ajoutez dynamiquement des balises de script pour réaliser des opérations inter-domaines. Notez qu'un rappel est requis ici. Négociez 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. requêtes asynchrones 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 nécessaire. Notez que l'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(); 
 }); 
},

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

jQuery+Ajax détermine si le code de vérification saisi est réussi

Comment créer un champ de recherche intelligent avec la fonction Ajax Prompt

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!