実際の戦闘で遭遇する可能性のあるいくつかの ajax リクエスト メソッドの詳細な説明

この記事では、実際の戦闘で遭遇する可能性のあるいくつかの ajax リクエスト メソッドを主に紹介し、ajax サンプル コードを通じて詳細に紹介します。ajax に興味のある友人は以下に集まります。 。 見てみましょう。

前書き

最近、私は単一ノードの速度を測定するための機能ページに取り組んでいます。速度測定のロジックは、アップロード速度を測定するときに、フロントエンドが 5m のデータをサーバーに送信するというものです。データのアップロードと返送の時間を記録し、サーバーから 1 メートルのデータをダウンロードし、ダウンロードとダウンロードの成功時間を記録し、クライアントの帯域幅ブロックの問題を回避するために Ajax 同期を使用してアップロードとダウンロードを実行します。平均を取る回数。開発過程ではAjaxの同期・非同期の問題で寄り道が多かったので、以前遭遇したビジネスロジックもまとめてまとめてみました。

ajaxのリクエストメソッドは以下の通りです

1. 通常のajax、asyncは同期処理と非同期処理を意味し、成功後にデータ戻り値、ステータスリクエストステータス、xhrはリクエストヘッダをカプセル化しますが、お願いします。はい、すべてのリクエスト ヘッダー情報を取得できるわけではないことに注意してください。たとえば、center-length は取得できません

$.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. 場合によっては、リクエスト 2 がリクエスト 1 の戻り値に依存することがあります。結果として、リクエスト 3 はリクエスト 2 の戻り結果に依存します。コールバックの形式で記述すると、非常に冗長になります。まず、ES5 のソリューションを見てみましょう

(1) ES5 のソリューション。 、 ajax 同期を使用します。デフォルトの ajax は非同期です。つまり、複数のリクエストが同時に実行されます。同期に変更すると、ajax は 1 つずつ実行されるため、ajax2 は 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 の解決策、promise の then メソッドを使用すると、結果は上記と同じで、Ajax が順番に実行され、後続の ajax は前の ajax の戻り値を取得します。コードは非常にスムーズに見えます

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 クロスドメイン、クロスドメインを実現するためにスクリプトタグを動的に追加します

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

4. この種のビジネス ロジック (ajax1、ajax2、ajax3) も発生します。両方のリクエストが成功した後、どちらが最初にデータを返すかというと、必ずしもそうではありません。別のコールバック関数が実行されることに注意してください。 ajax にも新しい約束が必要です

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 クロスページ送信フォーム

ajax と Douban の検索結果を組み合わせて完全なコードをページングする

Ajax は検証コードを使用して部分更新ログイン インターフェイスを実装します

以上が実際の戦闘で遭遇する可能性のあるいくつかの ajax リクエスト メソッドの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。