AJAX技术

原创已于 2024-05-18 17:43:59 修改 · 554 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2024-05-18 17:42:38 首次发布

JavaScript中XMLHttpRequest对象的常用属性

XMLHttpRequest对象的基本用法

XMLHttpRequest对象的常用方法

JavaScript中XMLHttpRequest对象的常用属性

XMLHttpRequest对象是JavaScript中用于在客户端和服务器之间进行异步通信的一个API。以下是一些XMLHttpRequest对象的常用属性：

readyState：此属性表示请求的状态，取值为0到4，分别对应请求的不同阶段，如未初始化、初始化、发送数据、数据传送中和传送完成。每当readyState属性发生变化时，会触发onreadystatechange事件1 2。
responseText：此属性返回服务器响应的正文部分，通常在请求完成后才可访问2。
responseXML：此属性将响应信息解析为XML格式的Document对象，仅可读2。
status：此属性返回服务器的HTTP状态码，如200表示成功，404表示未找到2。
statusText：此属性返回当前请求的响应行状态，如"OK"表示成功，"Not Found"表示404错误。

XMLHttpRequest对象的基本用法

XMLHttpRequest (XHR) 对象是 JavaScript 中用于在客户端和服务器之间传输数据的接口。它主要用于在不重新加载页面的情况下，从服务器获取数据或者向服务器发送数据。

以下是使用 XMLHttpRequest 对象进行简单 HTTP 请求的基本步骤：

创建 XMLHttpRequest 对象:


var xhr = new XMLHttpRequest();

设置回调函数:
当请求完成或遇到错误时，可以设置一个回调函数来处理响应。


xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    // 请求已完成，处理响应
    console.log(xhr.responseText);
  }
};

打开连接:
使用 open 方法来初始化请求。
```
xhr.open('GET', 'example.txt', true);
```
这里的参数依次为：
- 第一个参数是请求的类型（如 'GET', 'POST' 等）
- 第二个参数是请求的 URL
- 第三个参数是一个布尔值，表示是否异步执行（true 为异步，false 为同步）
发送请求:
如果需要发送数据到服务器（例如在表单提交中），可以使用 send 方法。
```
xhr.send();
```
对于 GET 请求，通常不需要调用 send 方法，因为 GET 请求的数据通常通过 URL 的查询字符串传递。

检查状态:
可以通过 readyState 属性来检查请求的状态。


if (xhr.readyState === XMLHttpRequest.DONE) {
  // 请求已完成
}

处理响应:
响应数据可以通过 responseText 属性访问。


var response = xhr.responseText;

请注意，由于浏览器的安全限制，某些类型的请求可能需要额外的配置，比如跨域资源共享（CORS）的问题。此外，现代浏览器还提供了更高级的 API，如 Fetch API，来处理网络请求，但在简单的场景下，XMLHttpRequest 仍然非常有用。

XMLHttpRequest对象的常用方法

XMLHttpRequest对象是JavaScript中用于在客户端和服务器之间传输数据的对象。以下是一些XMLHttpRequest对象的常用方法：

这些方法是XMLHttpRequest对象的基础，它们使得在网页上实现异步数据交互成为可能。在实际开发中，您需要根据具体需求来选择合适的方法和处理方式

open(): 此方法用于初始化一个XMLHttpRequest对象。open方法接受三个参数：第一个参数是字符串，表示请求的类型（如GET、POST）；第二个参数是URL，表示请求发送到的服务器地址；第三个参数是一个布尔值，表示请求是否异步进行，默认为true。
```
var xhr = new XMLHttpRequest();
xhr.open('GET', '/my/url', true);
```
XMLHttpRequest对象的常用方法

XMLHttpRequest对象是JavaScript中用于在客户端和服务器之间传输数据的对象。以下是一些XMLHttpRequest对象的常用方法：
open(): 此方法用于初始化一个XMLHttpRequest对象。open方法接受三个参数：第一个参数是字符串，表示请求的类型（如GET、POST）；第二个参数是URL，表示请求发送到的服务器地址；第三个参数是一个布尔值，表示请求是否异步进行，默认为true。
```
var xhr = new XMLHttpRequest();
xhr.open('GET', '/my/url', true);
```
send(): 在调用open方法后，使用send方法发送请求。如果请求是GET类型，send方法通常不需要参数；如果是POST类型，则需要传入一个字符串或FormData对象作为参数。
```
xhr.send(); // 对于GET请求
// 或者
xhr.send('myData'); // 对于POST请求
```
setRequestHeader(): 此方法用于设置请求的头部信息，如Content-Type。必须在调用open方法后、调用send方法前使用。
```
xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
```
getResponseHeader(): 此方法用于获取响应的头部信息。
```
var contentType = xhr.getResponseHeader('Content-Type');
```
getAllResponseHeaders(): 此方法用于获取所有的响应头部信息。
```
var allHeaders = xhr.getAllResponseHeaders();
```
abort(): 此方法用于取消当前的XMLHttpRequest。
```
xhr.abort();
```
在调用open方法后，使用send方法发送请求。如果请求是GET类型，send方法通常不需要参数；如果是POST类型，则需要传入一个字符串或FormData对象作为参数。
```
xhr.send(); // 对于GET请求
// 或者
xhr.send('myData'); // 对于POST请求
```
setRequestHeader(): 此方法用于设置请求的头部信息，如Content-Type。必须在调用open方法后、调用send方法前使用。
```
xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
```
getResponseHeader(): 此方法用于获取响应的头部信息。
```
var contentType = xhr.getResponseHeader('Content-Type');
```
getAllResponseHeaders(): 此方法用于获取所有的响应头部信息。
```
var allHeaders = xhr.getAllResponseHeaders();
```
abort(): 此方法用于取消当前的XMLHttpRequest。
```
xhr.abort();
```