English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
이 XMLHttpRequest 객체는 응답을 처리하기 위해 실행할 함수를 정의할 수 있게 합니다.
응답 함수 onreadystatechange가 XMLHttpRequest 객체의 속성에서 정의됩니다.
httpRequest.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("output").innerHTML = this.responseText;
}
};테스트를 보세요‹/›该onreadystatechange属性定义当readyState更改时要执行的函数。
该readyState属性保存XMLHttpRequest对象的状态。
该status属性保存XMLHttpRequest对象的状态代码。
该statusText属性保存XMLHttpRequest对象的状态文本。
| 属性 | 설명 |
|---|---|
| onreadystatechange | 定义当readyState属性更改时要调用的函数 |
| readyState | 保持XMLHttpRequest的状态： 0：请求未初始化 1：服务器连接建立 2：收到请求 3：处理请求 4：请求完成并且响应准备就绪 |
| status | 返回请求的状态号： 200：“OK” 403：“Forbidden” 404：“Not Found” 有关完整列表，请访问HTTP状态代码参考 |
| statusText | 返回状态文本（例如，“OK”或“Not Found”） |
下表列出了服务器响应属性：
| 属性 | 설명 |
|---|---|
| responseText | 以字符串形式返回响应数据 |
| responseXML | 将响应数据作为XML数据返回 |
该responseText属性以JavaScript字符串形式返回服务器响应。
document.getElementById("output").innerHTML = httpRequest.responseText;테스트를 보세요‹/›该responseXML属性将服务器响应作为XMLDocument对象返回。
您可以使用JavaScript DOM函数遍历XMLDocument对象。
以下示例请求文件ajax_test.xml并解析响应：
xmlDoc = httpRequest.responseXML;
tag = xmlDoc.getElementsByTagName("author");
for (let i = 0; i < tag.length; i++) {
txt += tag[i].childNodes[0].nodeValue + "<br>";
}
httpRequest.open("GET", "ajax_test.xml", true);
httpRequest.send();테스트를 보세요‹/›다음 표는 서버 응답 메서드를 나열합니다：
| 메서드 | 설명 |
|---|---|
| getAllResponseHeaders() | 제목 정보를 반환 |
| getResponseHeader() | 특정 헤더 정보를 반환 |
getAllResponseHeaders() 메서드는 서버 응답에서 모든 헤더 정보를 반환합니다.
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("output").innerHTML = this.getAllResponseHeaders();
}
};테스트를 보세요‹/›getResponseHeader() 메서드는 서버 응답에서 특정 헤더 정보를 반환합니다.
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("output").innerHTML = this.getResponseHeader("Server");
}
};테스트를 보세요‹/›사이트에 여러 AJAX 작업이 있으면 두 가지 기능을 생성해야 합니다:
XMLHttpRequest 객체를 실행하는 함수
각 AJAX 작업에는 콜백 함수가 하나 있습니다
함수 호출은 URL과 응답이 준비되면 호출할 함수를 포함해야 합니다.
fetchDoc("url-1", myFunc1);
fetchDoc("url-2", myFunc2);
fetchDoc("url-3", myFunc3);
function fetchDoc(url, callback) {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
callback(this);
}
};
httpRequest.open("GET", url, true);
httpRequest.send();
}
function myFunc1(httpRequest) {
// action goes here
}
function myFunc2(httpRequest) {
// action goes here
}
function myFunc3(httpRequest) {
// action goes here
}테스트를 보세요‹/›콜백 함수는 다른 함수에 매개변수로 전달되는 함수입니다.