So verwenden Sie eine Ajax-Anfrage im Projekt

Dieses Mal zeige ich Ihnen, wie Sie Ajax-Anfragen in Projekten verwenden und welche Vorsichtsmaßnahmen bei der Verwendung von Ajax-Anfragen in Projekten gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.

Vorwort

Kürzlich arbeite ich an einer Funktionsseite zur Messung der Geschwindigkeit eines einzelnen Knotens Beim Messen der Upload-Geschwindigkeit überträgt das Front-End 5 m. Senden Sie die Daten an den Server, zeichnen Sie den Zeitpunkt des Hochladens auf und geben Sie die Daten zurück. Laden Sie beim Messen der Download-Geschwindigkeit 1 m Daten vom Server herunter, zeichnen Sie den Download und den erfolgreichen Zeitpunkt auf Beim Herunterladen und Herunterladen wird die Ajax-Synchronisierung verwendet, um das Problem der Blockierung der Client-Bandbreite zu vermeiden. Führen Sie dies dreimal durch und ermitteln Sie den Durchschnitt. Während des Entwicklungsprozesses wurden aufgrund der Synchronisations- und Asynchronitätsprobleme von Ajax viele Umwege gemacht, daher habe ich auch die Geschäftslogik, auf die ich zuvor gestoßen bin, zusammengestellt und zusammengefasst.

AjaxDie Anforderungsmethode ist wie folgt

1. Gewöhnliches Ajax, asynchron bedeutet synchrone und asynchrone Verarbeitung Erfolgreich, es gibt einen Datenrückgabewert, einen Statusanforderungsstatus und xhr kapselt den Anforderungsheader. Es ist jedoch zu beachten, dass nicht alle Anforderungsheaderinformationen abgerufen werden können. Beispielsweise kann nicht die Mittenlänge abgerufen werden

$.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. Manchmal sieht die angetroffene Geschäftslogik so aus: Anfrage 2 hängt vom Rückgabeergebnis von Anfrage 1 ab, und Anfrage 3 hängt vom Rückgabeergebnis von Anfrage 2 ab. Wenn sie im Rückrufmodus geschrieben wird, ist sie sehr langwierig. Es gibt zwei Lösungen. Schauen wir uns zunächst die ES5-Lösung an

(1) Die ES5-Lösung besteht darin, Ajax zum Synchronisieren zu verwenden. Das Standard-Ajax ist asynchron, dh mehrere Anforderungen werden gleichzeitig ausgeführt. Nach dem Wechsel zur Synchronisierung wird Ajax nacheinander ausgeführt, sodass Ajax2 das Rückgabeergebnis von Ajax1 erhalten kann

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-Lösung, verwenden Sie die Then-Methode des Versprechens, der Effekt ist Wie oben wird Ajax der Reihe nach ausgeführt und der folgende Ajax erhält den Rückgabewert des vorherigen Ajax. Wenn er so geschrieben wird, sieht der Code sehr glatt aus

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-Kreuz -Domäne, fügen Sie dynamisch Skript-Tags hinzu, um domänenübergreifend zu erreichen.

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{ 
   } 
  } 
 }); 
};

Viertens werden Sie auch auf diese Art von Geschäftslogik stoßen asynchrone Anfragen ajax1 ajax2 ajax3 Es ist nicht unbedingt notwendig, dass die Rückruffunktion zuerst zurückgegeben wird. Beachten Sie, dass das separate Ajax auch ein neues Versprechen sein muss

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(); 
 }); 
},

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte beachten Sie weitere spannende Artikel auf der chinesischen PHP-Website.

Empfohlene Lektüre:

jQuery+Ajax ermittelt, ob der eingegebene Bestätigungscode erfolgreich ist

So erstellen Sie ein intelligentes Suchfeld mit Ajax-Eingabeaufforderungsfunktion

Das obige ist der detaillierte Inhalt vonSo verwenden Sie eine Ajax-Anfrage im Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!