JavaScript Ajax 와 Comet - "XML HttpRequest 대상" 의 주의사항
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 상태 에 대한 설명 전체 코드 는 다음 과 같 습 니 다:
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 속성 을 감지 할 수 있 습 니 다. 이 속성 은 요청 / 응답 과정의 현재 활동 단 계 를 표시 합 니 다.이 속성 에서 얻 을 수 있 는 값 은 다음 과 같 습 니 다:
구체 적 인 형식 은 다음 과 같다.
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：
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 요청 을 보 내 는 동시에 다음 과 같은 머리 메 시 지 를 보 냅 니 다.
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 을 설정 합 니 다.설정 하지 않 으 면 데 이 터 를 디 코딩 하거나 가 져 올 수 없 는 문제 가 발생 할 수 있 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ajax, fetch, xhr 비동기통신 이해하기기존의 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)을 하면 하나의 요청으로 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지 를 작성하고 응답으로 되돌려준다. ◼️...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
