AJAX의 원리 - 비동기 및 부분 새로 고침을 달성하는 방법-JS 튜토리얼-php.cn

AJAX의 원리 - 비동기 및 부분 새로 고침을 달성하는 방법

亚连

풀어 주다： 2018-05-24 09:49:01

원래의

1678명이 탐색했습니다.

비동기 및 부분 새로 고침을 달성하는 방법은 무엇입니까? 아래 편집기에서는 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 클라이언트에서 비동기를 구현하는 방법은 무엇일까요? 실제로 이것이 자바스크립트 콜백 함수가 하는 일입니다

서버 응답이 가능해지면 실행되는 콜백 자바스크립트 함수를 제공하세요

비즈니스 기능:

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)

로그인 후 복사

첫 번째 줄은 자바스크립트 콜백 함수를 정의합니다. 응답이 준비되었습니다. 자동으로 실행되며 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);
  }
 }
}

로그인 후 복사

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.