Object AJAX - XMLHttpRequest 对象

AJAX的核心是XMLHttpRequest对象,用于与服务器异步交换数据。创建XMLHttpRequest对象后,定义回调函数,通过open()和send()方法向服务器发送请求。现代浏览器均内置此对象。AJAX请求需同源策略,否则受限于跨域访问。onload和onreadystatechange属性用于处理响应,当readyState为4且状态为200时,表示响应完成。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

AJAX 的基石是 XMLHttpRequest 对象。

1.创建一个 XMLHttpRequest 对象

2.定义回调函数

3.打开 XMLHttpRequest 对象

4.向服务器发送请求

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

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

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

创建 XMLHttpRequest 对象的语法:

variable = new XMLHttpRequest();

定义回调函数

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

在这种情况下,回调函数应包含响应准备就绪时要执行的代码。

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

发送请求

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

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 Object Methods XMLHttpRequest 对象方法

 

方法

描述

new XMLHttpRequest()创建一个新的XMLHttpRequest对象
abort()•取消当前请求
getAllResponseHeaders()返回报头信息
getResponseHeader()•返回特定的标头信息
open(method, url, async, user, psw)

。指定请求。

method: the request type GET or POST
url: the file location
async: true (asynchronous) or false (synchronous)
user: optional user name
psw: optional password

send()将请求发送到用于GET请求的服务器
send(string)将请求发送到服务器。用于POST请求
setRequestHeader()将标签/值对添加到要发送的报头中

XMLHttpRequest Object Properties XMLHttpRequest 对象属性

 

属性

描述

onload定义接收(加载)请求时要调用的函数。
onreadystatechange定义readyState属性更改时要调用的函数
readyState

保存XMLHttpRequest的状态。

0:请求未初始化

1:服务器连接建立

2:请求收到

3:处理请求

4:请求完成,响应就绪

responseText将响应数据作为字符串返回
responseXML将响应数据作为XML数据返回
status

返回请求的状态号

200:“OK

403: "禁止"

”404:“未找到”有关完整列表,

请参阅Http消息参考HTTP Messages

statusText•返回状态文本(例如:“正常”或“未找到”)

The onload Property onload 属性

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

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

<!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>

Multiple Callback Functions 多个回调函数

如果网站中有多个 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
}

The onreadystatechange Property onreadystatechange 属性

readyState 属性保存 XMLHttpRequest 的状态。

onreadystatechange 属性定义了一个回调函数,当 readyState 改变时执行。

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

属性

描述

onreadystatechange定义readyState属性更改时要调用的函数
readyState

保存XMLHttpRequest的状态。

0:请求未初始化

1:服务器连接建立

2:请求收到

3:处理请求

4:请求完成,响应就绪

status

返回请求的状态号

200:“OK

403: "禁止"

”404:“未找到”有关完整列表,

请参阅Http消息参考HTTP Messages

statusText•返回状态文本(例如:“正常”或“未找到”)

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

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

<!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 发生变化一次。

 参考地址:AJAX The XMLHttpRequest Object

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值