집 >웹 프론트엔드 >JS 튜토리얼 >AJAX에서 비동기 새로 고침 및 부분 새로 고침을 구현하는 방법

AJAX에서 비동기 새로 고침 및 부분 새로 고침을 구현하는 방법

php中世界最好的语言원래의: 2018-04-04 15:11:132628검색

이번에는 AJAX가 비동기 새로 고침과 부분 새로 고침을 구현하는 방법을 보여 드리겠습니다. AJAX가 비동기 새로 고침과 부분 새로 고침을 구현하는 데 있어 주의 사항은 무엇입니까?

개요: 콜백 함수에 의해 onReadyStateChange가 할당되면 콜백 함수가 DOM을 직접 작동하고 부분 새로 고침이 구현될 수 있습니다. 그러면 XMLHttpRequest의 onReadyStateChange는 서비스가 준비되었음을 어떻게 알 수 있습니까? 상태가 어떻게 바뀌었나요(관찰자 모드)? 이는 클라이언트의 서비스 상태 조회(주기적인 폴링)를 통해 달성됩니다.

자세한 설명:

1. XMLHttpRequest는 서버와의 통신을 담당합니다. 그 안에는 readyStatus=4, status=200 등의 중요한 속성이 있습니다. XMLHttpRequest의 전체 상태가 완료(readyStatus=4)로 보장되면 데이터가 전송된 것입니다. 그런 다음 서버 설정에 따라 요청 상태를 쿼리합니다(클라이언트가 서버의 반환 상태를 폴링하는 것과 유사하지만 여전히 긴 연결 서버 측 푸시가 아닌 http 짧은 연결임). 모든 것이 준비되면(상태=200) 필수를 실행합니다. 작업.

작업은 일반적으로 DOM을 직접 작업하는 것이므로 AJAX는 소위 "새로 고침 없음" 사용자 경험을 달성할 수 있습니다.

document.getElementById("user1").innerHTML = "数据正在加载...";
      if (xmlhttp.status == 200) {
        document.write(xmlhttp.responseText);
      }

2. 그렇다면 AJAX 클라이언트에서 비동기를 구현하는 방법은 무엇일까요? 실제로 이것이 Javascript의 콜백 함수가 하는 일입니다

서버 응답이 가능해지면 실행되는 콜백 JavaScript 함수를 제공합니다

비즈니스 함수:

function castVote(rank) {
 var url = "/ajax-demo/static-article-ranking.html";
 var callback = processAjaxResponse;
 executeXhr(callback, url);
}
需要异步通讯的函数： 
function executeXhr(callback, url) {
 // branch for native XMLHttpRequest object
 if (window.XMLHttpRequest) {
  req = new XMLHttpRequest();
  req.onreadystatechange = callback;
  req.open("GET", url, true);
  req.send()(null);
 } // branch for IE/Windows ActiveX version
 else if (window.ActiveXObject) {
  req = new ActiveXObject("Microsoft.XMLHTTP");
  if (req) {
   req.onreadystatechange = callback;
   req.open("GET", url, true);
   req.send()();
  }
 }
}
req.onreadystatechange = callback
req.open("GET", url, true)

첫 번째 줄은 JavaScript 콜백 함수를 정의합니다. 응답 준비됨 자동으로 실행되며 req.open() 메서드에 지정된 "true" 플래그는 요청을 비동기적으로 실행하려고 함을 나타냅니다.

서버가 XmlHttpRequest를 처리하고 이를 브라우저에 반환하면 req.onreadystatechange 할당을 사용하여 설정된 콜백 메서드가 자동으로 호출됩니다.

콜백 함수:

function processAjaxResponse() {
 if (req.readyState == 4) {
  // only if "OK"
  if (req.status == 200) {
   document.getElementById("user1").innerHTML = req.responseText;
  } else {
   alert("There was a problem retrieving the XML data:
" + req.statusText);
  }
 }
}

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