실제 전투에서 접할 수 있는 여러 Ajax 요청 메소드에 대한 자세한 설명

이 기사에서는 실제 전투에서 접할 수 있는 몇 가지 ajax 요청 방법을 주로 공유합니다. 기사에서는 Ajax 샘플 코드를 통해 이를 매우 자세하게 소개합니다. Ajax에 관심이 있는 친구들은 아래에 함께 모일 것입니다. .보세요.

머리말

최근에는 단일 노드의 속도를 측정하는 기능적 페이지를 작업하고 있습니다. 속도 측정의 논리는 업로드 속도를 측정할 때 프런트 엔드에서 5m의 데이터를 서버로 전송한다는 것입니다. 그리고 데이터 업로드 및 반환 시간을 기록합니다. 다운로드 속도를 측정할 때 서버에서 1m의 데이터를 다운로드하고 다운로드 및 다운로드 성공 시간을 기록하고 클라이언트 대역폭 차단 문제를 피하기 위해 Ajax 동기화를 사용하여 업로드 및 다운로드하고 3을 수행합니다. 평균을 구하는 횟수입니다. 개발 과정에서 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가 하나씩 실행되므로 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 요청 메소드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!