JavaScript

更新时间2025-08-07

AJAX 请求 AJAX XML 文件

onreadystatechange 属性

readyState 属性存留 XMLHttpRequest 的状态。

onreadystatechange 属性定义当 readyState 发生变化时执行的函数。

status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。

属性	描述
onreadystatechange	定义了当 readyState 属性发生改变时所调用的函数。
readyState	保存了 XMLHttpRequest 的状态。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 正在处理请求 4: 请求已完成且响应已就绪
status	200: "OK" 403: "Forbidden" 404: "Page not found" 如需完整列表，请访问 Http 消息参考手册
statusText	返回状态文本（例如 "OK" 或 "Not Found"）

每当 readyState 发生变化时就会调用 onreadystatechange 函数。

当 readyState 为 4，status 为 200 时，响应就绪：

实例

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML =
            this.responseText;
       }
    };
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send(); 
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

注释：onreadystatechange 被触发五次（0-4），每次 readyState 都发生变化。

使用回调函数

回调函数是一种作为参数被传递到另一个函数的函数。

如果您的网站中有多个 AJAX 任务，那么您应该创建一个执行 XMLHttpRequest 对象的函数，以及一个供每个 AJAX 任务的回调函数。

该函数应当包含 URL 以及当响应就绪时调用的函数。

实例

loadDoc("url-1", myFunction1);

loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}

function myFunction1(xhttp) {
  // 行动在这里
 } 
function myFunction2(xhttp) {
  // 行动在这里
 }

运行实例 »

点击 "运行实例" 按钮查看在线实例

服务器响应属性

属性	描述
responseText	获取字符串形式的响应数据
responseXML	获取 XML 数据形式的响应数据

服务器响应方法

方法	描述
getResponseHeader()	从服务器返回特定的头部信息
getAllResponseHeaders()	从服务器返回所有头部信息

responseText 属性

responseText 属性以 JavaScript 字符串的形式返回服务器响应，因此您可以这样使用它：

实例

document.getElementById("demo").innerHTML = xhttp.responseText;

运行实例 »

点击 "运行实例" 按钮查看在线实例

responseXML 属性

XML HttpRequest 对象有一个內建的 XML 解析器。

ResponseXML 属性以 XML DOM 对象返回服务器响应。

使用此属性，您可以把响应解析为 XML DOM 对象：

实例

请求文件 music_list.xml，并对响应进行解析：

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
  txt += x[i].childNodes[0].nodeValue + "<br>";
  }
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET",  "music_list.xml", true);
xhttp.send();

运行实例 »

点击 "运行实例" 按钮查看在线实例

您将在本教程的 DOM 章节学到更多有关 XML DOM 的知识。

getAllResponseHeaders() 方法

getAllResponseHeaders() 方法返回所有来自服务器响应的头部信息。

实例

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
  }
};

运行实例 »

点击 "运行实例" 按钮查看在线实例

getResponseHeader() 方法

getResponseHeader() 方法返回来自服务器响应的特定头部信息。

实例

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

运行实例 »

点击 "运行实例" 按钮查看在线实例

AJAX 请求 AJAX XML 文件

相关视频

免费