Detaillierte Erläuterung verschiedener Ajax-Anfragemethoden, die im tatsächlichen Kampf auftreten können

Dieser Artikel teilt Ihnen hauptsächlich einige Ajax-Anfragemethoden mit, die im tatsächlichen Kampf auftreten können. Der Artikel stellt sie ausführlich anhand des Ajax-Beispielcodes vor, der für alle Freunde, die sich für Ajax interessieren, einen gewissen Referenzwert hat Nachfolgend werfen wir gemeinsam 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.

Die Ajax-Anfragemethode lautet wie folgt:

1. Gewöhnliches Ajax, asynchron bedeutet synchrone und asynchrone Verarbeitung wird zurückgegeben Wert, Statusanforderungsstatus, xhr kapselt den Anforderungsheader, es ist jedoch zu beachten, dass nicht alle Anforderungsheaderinformationen abgerufen werden können. Beispielsweise kann die Mittellänge nicht 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 ist die angetroffene Geschäftslogik so: Anforderung 2 hängt vom Rückgabeergebnis von Anforderung 1 ab, und Anforderung 3 hängt vom Rückgabeergebnis von Anforderung 2 ab Form des Rückrufs. 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 heißt, 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

(2) ES6 Die Lösung besteht darin, die then-Methode des Versprechens zu verwenden. Der Effekt ist derselbe wie oben, und der nachfolgende Ajax erhält den Rückgabewert des vorherigen Ajax. Wenn der Code so geschrieben wird, sieht er sehr flüssig aus

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

3. Fügen Sie dynamisch Skript-Tags hinzu, um domänenübergreifend zu arbeiten dass es einen Rückruf gibt, der mit dem Server ausgehandelt werden muss

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('请求失败'); 
}

Viertens werden Sie auch auf diese Art von Geschäftslogik stoßen. Es gibt drei asynchrone Anfragen von ajax1 ajax2 ajax3 Es ist nicht notwendig, welche die Daten zuerst zurückgibt. Bitte beachten Sie, dass Ja, separates Ajax auch ein neues Versprechen sein muss 🎜>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er hilft jedem beim Lernen!

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

Verwandte Empfehlungen:

Ajax-Cross-Page-Übermittlungsformular

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

Ajax kombiniert mit Douban-Suchergebnissen für das Paging des vollständigen Codes

Ajax implementiert eine teilweise Aktualisierung der Anmeldeschnittstelle mit Bestätigungscode

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung verschiedener Ajax-Anfragemethoden, die im tatsächlichen Kampf auftreten können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!