Ajax를 사용한 동기식 구현과 비동기식 구현의 차이점은 무엇입니까?-JS 튜토리얼-php.cn

Ajax를 사용한 동기식 구현과 비동기식 구현의 차이점은 무엇입니까?

php中世界最好的语言

풀어 주다： 2018-04-02 14:37:16

원래의

2102명이 탐색했습니다.

이번에는 Ajax를 사용하여 동기화와 비동기 구현을 수행하는 것의 차이점과 Ajax를 사용하여 동기 및 비동기 구현에 대한 주의사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.

Ajax를 통해 백그라운드로 데이터를 보내고 받을 때 동기화, 비동기 문제가 자주 발생합니다. Ajax는 기본적으로 비동기식으로 로드되지만 때로는 동기화 또는 동기화 효과가 필요할 수 있으므로 두 가지 솔루션이 있습니다.

옵션 1: 콜백 함수에서 특정 메서드를 실행합니다. 즉, 실행하기 전에 백그라운드에서 성공적으로 반환될 때까지 기다립니다.

예:

$.getJSON("/data-access/sens-config/IPandPortSel",{},function(resp){
if(resp.code==0){
$.each(resp.data,function(i,obj){
option_net_type += addOption(obj);
});
$("#edit-addr_id").append(option_net_type);
addr_idOld = $('#edit-addr_id').val(addr_id);
}
});

로그인 후 복사

빨간색 부분은 데이터가 성공적으로 반환된 후에 실행되어야 합니다. if(resp.code==0){} 외부에 배치된 경우 ((그러나 $.getJSON(); 뒤에 배치됨) ) 존재합니다. 백그라운드에서 데이터가 반환되기 전에 코드의 빨간색 부분이 실행되었습니다.

방법 2: 표준 ajax 전송 방법을 사용합니다.

 $.ajax({ 
  type : "post", 
  url : "/data-access/manufacturer/deleteBranch", 
  data : data, 
  async : false,//取消异步 
  success : function(resp){
if(resp.code==0){
if(ids.length>=currentListNum&&currentPage!=1){
currentPage = currentPage - 1;
}
var para = {
mypara :currentPage,
startPage : currentPage,
};
$('p.page-box').data('myPage').setOptions({data: para});
}
  } 
 });

로그인 후 복사

참고: 이 방법은 다음과 같습니다. 부분 동기 전송 방법일 뿐이므로 안전하고 권장되는 방법입니다.

또 다른 방법이 있습니다.

// $.ajaxSettings.async = false;
// $.getJSON("/data-access/ip-config/deleteBranch",data,function(resp){
// if(resp.code==0){
// if(ids.length>=currentListNum&&currentPage!=1){
// currentPage = currentPage - 1;
// }
// var para = {
// mypara :currentPage,
// startPage : currentPage,
// };
// $('p.page-box').data('myPage').setOptions({data: para});
// }
// });
// $.ajaxSettings.async = true;

로그인 후 복사

이 방법은 전역적이며 별로 권장되지 않습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요.