AJAX 의 원리-어떻게 비동기 와 부분 리 셋 을 할 수 있 습 니까?

Overriew:onReady State Change 가 리 셋 함수 에 의 해 할당 되면 비동기 호출 을 실현 할 수 있 고 리 셋 함수 가 DOM 을 직접 조작 하면 부분 리 셋 을 실현 할 수 있 습 니 다.그렇다면 XML Http Request 의 onReady State Change 는 서비스 ready 를 어떻게 알 았 을 까?상 태 는 어떻게 바 뀌 었 나 요?클 라 이언 트 를 통 해 서비스의 상태 에 대한 문의(정기 적 인 문의)를 통 해 이 루어 진 것 이다.
자세 한 설명:
1.  XML HttpRequest 는 서버 측 과 의 통신 을 담당 하 며 내부 에 중요 한 속성 이 많 습 니 다.ready Status=4,status=200 등 입 니 다.XML HttpRequest 의 전체 상태 가 완료 되 었 음 을 보증 합 니 다(ready Status=4).즉,데이터 가 전송 되 었 습 니 다.그 다음 에 서버 설정 에 따라 문의(클 라 이언 트 가 서버 의 반환 상 태 를 문의 하 는 것 과 유사 하 며 http 짧 은 연결 입 니 다.긴 연결 이 아 닌 서버 엔 드 push)요청 상태 입 니 다.모든 것 이 준비 되 었 다 면(status=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);
  }
 }
}

이상 의 이 AJAX 의 원 리 는 비동기 와 부분 리 셋[실현 코드]을 어떻게 하 는 지 하 는 것 이 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 많은 응원 을 바 랍 니 다.