JavaScript Ajax 와 Comet - "XML HttpRequest 대상" 의 주의사항

IE5 에서 XHR 대상 은 MSXML 라 이브 러 리 에 있 는 ActiveX 대상 을 통 해 이 뤄 진다.IE 에서 세 가지 서로 다른 버 전의 XHR 대상, 즉 MSXML 2. XMLHttp, MSXML 2. XMLHttp. 3.0 과 MXSML. XMLHttp. 6.0 을 만 날 수 있 습 니 다.
IE7 이전 브 라 우 저 에 적용 되 는 코드:

function createXHR() {
    if (typeof arguments.callee.activeXString != "string") {
        var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
            i, len;
        for (var i = 0, len = versions.length; i < len; i++) {
            try {
                new ActiveXObject(versions[i]);
                arguments.callee.activeXString = versions[i];
                break;
            } catch (e) {
                //
            }
        }
    }
    return new ActiveXObject(arguments.callee.activeXString);
}

IE7 이후 버 전과 다른 브 라 우 저 는 다음 함수 로 만 듭 니 다.

var xhr = new XMLHttpRequest();

호 환 코드:

function createXHR() {
    if (typeof XMLHttpRequest != "undefined") {
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined") {
        if (typeof arguments.callee.activeXString != "string") {
            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
                i, len;
            for (var i = 0, len = versions.length; i < len; i++) {
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                } catch (e) {
                    //
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    } else {
        throw new Error("No XHR Object available.");
    }
}

호 환 코드 적용:

var xhr = new createXHR();

XHR 의 용법
XHR 대상 을 사용 할 때 호출 할 첫 번 째 방법

open（） 세 개의 인 자 를 받 습 니 다. 요청 할 형식, 요청 한 URL, 비동기 전송 여 부 를 표시 하 는 불 값 입 니 다.

예:

xhr.open("get", "note.txt", false);

open () 은 발송 에 대비 하여 요청 을 시작 하 는 것 을 표시 합 니 다. send () 방법 이 야 말로 진정한 발송 입 니 다.
특정 요청 을 보 내 려 면 아래 와 같이 호출 해 야 합 니 다.

send() 방법:

예:

xhr.open("get", "note.txt", false);
xhr.send(null);

XHR 가 서버 에서 돌아 온 후 변 경 된 속성, 즉 서버 에 해당 하 는 데 이 터 를 저장 하 는 속성 은 다음 과 같 습 니 다.

responseText: 응답 주체 로 되 돌아 온 텍스트

responseXML: 응답 형식 이 "text / xml" 과 "application / xml" 이면 응답 데이터 가 저 장 된 XML DOM 문서

status: 응답 하 는 HTTP 상태

statusText: HTTP 상태 에 대한 설명

일반적으로 HTTP 상 태 를 성공 표지 로 사용 할 수 있 습 니까? 이 때 responseText 속성 내용 이 준비 되 어 있 고 responseXML 도 접근 할 수 있 을 것 입 니 다.이 밖 에 상태 요? 304 는 요청 한 자원 이 수정 되 지 않 았 음 을 표시 합 니 다. 브 라 우 저 에 캐 시 된 버 전 을 직접 사용 할 수 있 습 니 다.
전체 코드 는 다음 과 같 습 니 다:

var xhr = new XMLHttpRequest();

xhr.open("get", "note.txt", false);
xhr.send(null);

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
    document.write(xhr.responseText);
} else {
    alert("Request was unsuccessful: " + xhr.status);
}

주의해 야 할 것 은:
우 리 는 대부분의 경우 비동기 요청 을 보 내야 js 가 응답 을 기다 리 지 않 고 계속 실행 할 수 있 습 니 다.
XHR 대상 의 ready State 속성 을 감지 할 수 있 습 니 다. 이 속성 은 요청 / 응답 과정의 현재 활동 단 계 를 표시 합 니 다.이 속성 에서 얻 을 수 있 는 값 은 다음 과 같 습 니 다:

0: 초기 화 되 지 않 았 습 니 다.open () 이 호출 되 지 않 았 습 니 다.

1: 시작.open () 을 호출 했 지만 send () 를 호출 하지 않 았 습 니 다.

2: 발송.send () 를 호출 했 지만 응답 을 받 지 못 했 습 니 다.

3: 접수.일부 응답 데 이 터 를 받 았 습 니 다.

4: 완성.모든 응답 데 이 터 를 받 았 고 클 라 이언 트 에서 사용 할 수 있 습 니 다.

구체 적 인 형식 은 다음 과 같다.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
            //......
        }
    }
};
xhr.open("get", "user.json", true);
xhr.send();

예 를 들 어:
json 파일:

[{
    "name": "oliver",
    "age": 18,
    "user": true
}, {
    "name": "troy",
    "age": 26,
    "user": true
}]

dom：

insert
  
js： 
var btn = document.getElementById("btn"),
    pre = document.getElementById("pre"),
    obj = null;

btn.onclick = function() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
                console.log(xhr.responseText);
                obj = JSON.parse(xhr.responseText);
                pre.innerHTML = obj[1].name; //troy
            }
        }
    };
    xhr.open("get", "user.json", true);
    xhr.send();
};
  
btn 을 누 르 면 pre 부분 에 가 져 온 json 파일 의 일부 정 보 를 표시 합 니 다.
또한 응답 을 받 기 전에 호출 할 수 있 습 니 다.
 abort() 방법 으로 비동기 요청 을 취소 합 니 다.
  
다음 과 같다.

xhr.abort();
  
요청 을 종료 한 후에 XHR 대상 에 대해 서도 인용 작업 을 해 야 합 니 다.메모리 때문에 XHR 대상 을 다시 사용 하 는 것 을 권장 하지 않 습 니 다.
HTTP 헤더 정보
XHR 대상 은 머리 를 조작 하고 머리 정 보 를 응답 하 는 방법 을 제공 합 니 다.기본적으로 XHR 요청 을 보 내 는 동시에 다음 과 같은 머리 메 시 지 를 보 냅 니 다.
 Accept: 브 라 우 저가 처리 할 수 있 는 콘 텐 츠 유형 
 Accept - Charset: 브 라 우 저가 표시 할 수 있 는 문자 집합 
 Accept - Encoding: 브 라 우 저가 처리 할 수 있 는 압축 코드 
 Accept - Language: 브 라 우 저가 현재 설정 한 언어 
 Connection: 브 라 우 저 와 서버 간 연결 유형 
 Cookie: 현재 페이지 에 설 치 된 모든 Cookie 
 Host: 요청 한 페이지 가 있 는 도 메 인 
 을 보 냅 니 다.
 Refer: 요청 한 페이지 를 보 내 는 URI 
 User - Agent: 브 라 우 저의 사용자 에이전트 문자열 
쓰다
 setRequestHeader() 방법 은 사용자 정의 요청 머리 정 보 를 설정 할 수 있 습 니 다.
  
이 방법 은 두 개의 인 자 를 받 습 니 다. 머리 필드 이름과 머리 필드 값 입 니 다.요청 머리 정 보 를 성공 적 으로 보 내 려 면 open () 방법 을 호출 한 후 send () 방법 전에 호출 해 야 합 니 다.사용자 정의 머리 이름 을 사용 하 는 것 을 권장 합 니 다.예:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
            //......
        }
    }
};
xhr.open("get", "user.json", true);
xhr.setRequestHeader("MyHeader", "MyValue"); //    
xhr.send();
  
또한 XHR 대상 getResponseHeader() 을 호출 하 는 방법 으로 머리 필드 이름 을 입력 하면 해당 하 는 응답 머리 정 보 를 얻 을 수 있 습 니 다.호출 getAllResponseHeaders() 방법 은 모든 머리 정 보 를 포함 하 는 긴 문자열 을 얻 을 수 있 습 니 다.
var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeaders();
  
GET 요청
encodeURIComponent () 로 인 코딩 한 형식 은 다음 과 같 습 니 다.
xhr.open("get", "example.php?name1=value1&name2=value2", true);
  
아래 함 수 는 기 존 URL 의 끝 에 검색 문자열 인 자 를 추가 하 는 것 을 보조 할 수 있 습 니 다.
function addURLParam(url, name, value) {
    url += (url.indexOf("?") == -1 ? "?" : "&"); //  URL      （            ），       ，        
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}
  
예 를 들 어:
var url = "example.php";
url = addURLParam(url, "name", "oli");
url = addURLParam(url, "book", "js");
xhr.open("get", url, false);
  
POST 요청
POST 요청 은 보통 서버 에 저장 할 데 이 터 를 보 내 는 데 사 용 됩 니 다.
post 제출 을 사용 하여 머리 속성 Content - type 을 설정 합 니 다.설정 하지 않 으 면 데 이 터 를 디 코딩 하거나 가 져 올 수 없 는 문제 가 발생 할 수 있 습 니 다.