AJAX - 대화 형 웹 애플 리 케 이 션 을 만 드 는 웹 개발 기술

ajax 핵심 기술 은 XMLHttpRequest 대상, 약칭 XHR 대상

이러한 클 라 이언 트 와 서버 가 페이지 를 새로 고치 지 않 고 요청 하 는 데이터 기술 은 주로 XMLHttpRequest 대상 을 이용 하여 이 루어 졌 고 IE 7 이전 버 전의 브 라 우 저 는 ActiveXObject 대상 을 통 해 이 루어 졌 다.

[TOC]
1. XHR 인 스 턴 스 생 성

var xhr = (typeof XMLHttpRequest === "object") ? new XMLHttpRequest() : new ActiveXObject();

2. ready Statechange 이벤트 처리 프로그램 지정

요청 / 응답 절차: 시작 요청 - > 전송 요청 - > 일부 데이터 수신 - > 전체 데 이 터 를 수신 합 니 다.

사용 자 는 XHR 대상 의 .readyState 속성 을 감지 하여 현재 요청 / 응답 단 계 를 판단 합 니 다.0 ： 1 ： 2 ： 3 ： 4 ：

매번 .readyState 속성 치가 변화 할 때마다 하나의 readyStatechange 사건 이 발생 합 니 다. 사용 자 는 이 사건 을 감청 하여 데이터 의 수신 여 부 를 판단 할 수 있 습 니 다.

xhr.onreadyStatechange = function() {
    // judge xhr.readyState
};

3. 시작 요청
XHR 대상 .open( method, url, bool ) 방법 은 요청 을 시작 하 는 것 입 니 다. (주의: 요청 을 보 내지 않 았 습 니 다!)method: 요청 방법."get", "post" 등.url: 요청 페이지 url.bool: 비동기 로 보 낼 지 여부 입 니 다.true: 비동기;false: 동기 화

xhr.open( "get", "index.php", false );

4. 요청 보 내기
XHR 대상 .send( null ) 방법 은 정식으로 요청 을 보 내 는 것 이다.

xhr.send( null );

5. 데이터 수신
서버 가 요청 에 응답 하면 응답 하 는 데 이 터 는 XHR 대상 의 속성 을 자동 으로 채 웁 니 다..responseText: 응답 텍스트..responseXML: 데이터 에 응답 하 는 XML DOM 문서 입 니 다..status: HTTP 상태 에 응답 합 니 다..statusText: HTTP 상태 설명 에 응답 합 니 다.

//     status            
xhr.onreadyStatechange = function() {
    if( xhr.status >= 200 && xhr.status < 300 || xhr.status == 304 ) {
        console.log( xhr.responseText );
    }
}

6. XHR 요청 / 응답 취소

XHR 대상 .abort() 방법 으로 요청 을 취소 하거나 응답 을 닫 습 니 다.

요청 을 종료 하면 XHR 는 이벤트 트리거 를 중단 하고 응답 과 관련 된 속성 에 접근 하지 못 합 니 다.

요청 을 종료 한 후에 XHR 인용 을 방출 하여 메모리 낭 비 를 피 하 는 것 이 좋 습 니 다.

xhr.abort();
xhr = null;