AJAX XMLHttpRequest 对象


目录

    显示目录

AJAX 的关键是 XMLHttpRequest 对象。

  1. 创建 XMLHttpRequest 对象

  2. 定义回调函数

  3. 打开 XMLHttpRequest 对象

  4. 向服务器发送请求

XMLHttpRequest 对象

所有现代浏览器都支持 XMLHttpRequest 对象。

XMLHttpRequest 对象可用于与背后的 Web 服务器交换数据 场景。这意味着可以更新网页的部分内容,而无需 重新加载整个页面。


创建 XMLHttpRequest 对象

所有现代浏览器(Chrome、Firefox、IE、Edge、Safari、Opera)都有一个内置的 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法:

variable = new XMLHttpRequest();

定义回调函数

回调函数是作为参数传递给另一个函数的函数。

在这种情况下,回调函数应包含在以下情况下执行的代码: 响应已准备好。

xhttp.onload = function() {
   // What to do when the response is ready
}

发送请求

要向服务器发送请求,可以使用 open() 和 send() 方法 XMLHttpRequest 对象:

xhttp.open("GET", "ajax_info.txt");
xhttp.send();

例子

// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();

// Define a callback function
xhttp.onload = function() {
  // Here you can use the Data
}

// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<div id="demo">
<p>Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

</body>
</html>

跨域访问

出于安全原因,现代浏览器不允许跨域访问。

这意味着网页和它尝试加载的 XML 文件必须位于同一服务器上。

W3Schools 上的示例都打开位于 W3Schools 域中的 XML 文件。

如果您想在您自己的网页之一上使用上面的示例, 您加载的 XML 文件必须位于您自己的服务器上。



XMLHttpRequest 对象方法

new XMLHttpRequest()

创建一个新的 XMLHttpRequest 对象

abort()

取消当前请求

getAllResponseHeaders()

返回标头信息

getResponseHeader()

返回具体的头信息

open(method, url, async, user, psw)

指定请求

方法:请求类型 GET 或 POST
url:文件位置
async:true(异步)或 false(同步)
user:可选用户名
psw:可选密码

send()

向服务器发送请求
用于GET请求

send(string)

将请求发送到服务器。
用于 POST 请求

setRequestHeader()

将标签/值对添加到要发送的标头


XMLHttpRequest 对象属性

onload

定义接收(加载)请求时要调用的函数

onreadystatechange

定义当readyState属性改变时调用的函数

readyState

保存 XMLHttpRequest 的状态。
0:请求未初始化
1:服务器连接建立
2:收到请求
3:处理请求
4:请求完成,响应就绪

responseText

以字符串形式返回响应数据

responseXML

以 XML 数据形式返回响应数据

status

返回请求的状态号
200:“确定”
403:“禁止”
404:“未找到”
如需完整列表,请访问 Http 消息参考

statusText

返回状态文本(例如“OK”或“Not Found”)


onload 属性

使用 XMLHttpRequest 对象,您可以定义一个回调函数,以便在以下情况下执行: 该请求收到答复。

该函数在 XMLHttpRequest 对象的 onload 属性中定义:

例子

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
 }
 xhttp.open("GET", "ajax_info.txt");
 xhttp.send();

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

</body>
</html>

多种回调函数

如果网站中有多个 AJAX 任务,您应该为以下任务创建一个函数: 执行 XMLHttpRequest 对象,每个对象都有一个回调函数 AJAX 任务。

函数调用应包含 URL 以及调用时调用的函数 响应已准备好。

例子

loadDoc("url-1", myFunction1);

loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {cFunction(this);}
  xhttp.open("GET", url);
  xhttp.send();
}

function myFunction1(xhttp) {
  // action goes here
}

function myFunction2(xhttp) {
  // action goes here
}

onreadystatechange 属性

readyState 属性保存 XMLHttpRequest 的状态。

onreadystatechange 属性定义了当readyState改变时要执行的回调函数。

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

onreadystatechange

定义当readyState属性改变时调用的函数

readyState

保存 XMLHttpRequest 的状态。
0:请求未初始化
1:服务器连接建立
2:收到请求
3:处理请求
4:请求完成,响应就绪

status

200:“可以”
403:“禁止”
404:“找不到页面”
有关完整列表,请访问 Http 消息参考

statusText

返回状态文本(例如“OK”或“Not Found”)

每次readyState改变时都会调用onreadystatechange函数。

readyState 为 4 且状态为 200 时,响应已就绪:

例子

function loadDoc() {
  const 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");
  xhttp.send();
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  const 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");
  xhttp.send();
}
</script>

</body>
</html>

onreadystatechange 事件被触发四次 (1-4),readyState 每次更改一次。