집 > 기사 > 웹 프론트엔드 > 프로젝트에서 Ajax 요청을 사용하는 방법

프로젝트에서 Ajax 요청을 사용하는 방법

php中世界最好的语言원래의: 2018-04-02 10:05:162237검색

이번에는 프로젝트에서 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{ 
   } 
  } 
 }); 
};

넷째, 이런 종류의 비즈니스 로직도 접하게 됩니다. ajax1 ajax2 ajax3 세 가지 비동기 요청이 있습니다. 반드시 어떤 것이 먼저 데이터를 반환할 필요는 없습니다. 모든 요청이 성공한 후 콜백 함수가 실행되며 별도의 ajax도 새로운 promise여야 합니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!