AJAX——XMLHttpRequest

最新推荐文章于 2023-05-27 17:34:17 发布

Dec-

最新推荐文章于 2023-05-27 17:34:17 发布

阅读量1.2k

点赞数 2

文章标签： AJAX

本文链接：https://blog.csdn.net/weixin_45436744/article/details/102647519

版权

AJAX

—— Asynchronous JavaScript and XML
指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。
只要用脚本发起通信，就可以叫做 AJAX 通信。

AJAX 通过原生的XMLHttpRequest对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。
AJAX 包括以下几个步骤:
1、创建 XMLHttpRequest实例
2、发出 HTTP 请求
3、接收服务器传回的数据
4、更新网页数据

XMLHttpRequest本身是一个构造函数，可以使用new命令生成实例。它没有任何参数。

var xhr = new XMLHttpRequest();

一旦新建实例，就可以使用open()方法指定建立 HTTP 连接的一些细节。

xhr.open('GET','http://www.example.com/page.php', true);

上面代码指定使用GET 方法，跟指定的服务器网址建立连接。第三个参数true，表示请求是异步的。

然后，指定回调函数，监听通信状态（readyState属性）的变化

xhr.onreadystatechange = handleStateChange;

function handleStateChange() {
  // ...
}

XMLHttpRequest.onreadystatechange

只要 readyState属性发生变化，就会调用相应的处理函数。这个回调函数会被用户线程所调用。XMLHttpRequest.onreadystatechange会在 XMLHttpRequest 的readyState 属性发生改变时触发 readystatechange 事件的时候被调用。

上面代码中，一旦XMLHttpRequest实例的状态发生变化，就会调用监听函数handleStateChange

最后使用send()方法，实际发出请求。

xhr.send(null);

上面代码中，send()的参数为null，表示发送请求的时候，不带有数据体。如果发送的是POST请求，这里就需要指定数据体。

一旦拿到服务器返回的数据，AJAX 不会刷新整个网页，而是只更新网页里面的相关部分，从而不打断用户正在做的事情。

如何使用 XMLHTTPRequest：

let request = new XMLHttpRequest()  //声明一个 XMLHttpRequest 对象
request.open('GET', 'http://yangqin.com:8002/xxx')  //配置 request  。参数（method、URL）
request.send() // 发送
request.onreadystatechange = function ( ) {  //监听这个对象的 readyState 属性变化
    if (request.readyState === 4) {  //判断实例对象当前的状态，如果为4，说明请求和响应都完毕了  
    if (request.status >= 200 && request.status < 300) { //判断服务器回应的 HTTP 状态码，如果大于等于200并且小于300，说明请求成功
       let string = request.responseText  //第四部分的内容
       let object = window.JSON.parse(string)  //把符合 JSON 语法的字符串转换成 JS 对应的值
      }
    }
 }

CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
通俗解释就是告诉浏览器，我们两个是一家的，别阻止他
例：

response.setHeader('Access-Control-Allow-Origin', 'http://zhangzhang.com:8001')

XMLHttpRequest 的实例属性

1、XMLHttpRequest.readyState
XMLHttpRequest.readyState返回一个整数，表示实例对象的当前状态。该属性只读。它可能返回的值：0 1 2 3 4

通信过程中，每当实例对象发生状态变化，它的readyState属性的值就会改变。这个值每一次变化，都会触发readyStateChange事件

2、XMLHttpRequest.onreadystatechange
XMLHttpRequest.onreadystatechange属性指向一个监听函数。readystatechange事件发生时（实例的readyState属性变化），就会执行这个属性。

3、XMLHttpRequest.response
XMLHttpRequest.response属性表示服务器返回的数据体（即 HTTP 回应的 body 部分）。它可能是任何数据类型，比如字符串、对象、二进制对象等等，具体的类型由XMLHttpRequest.responseType属性决定。该属性只读。

4、XMLHttpRequest.responseType
XMLHttpRequest.responseType属性是一个字符串，表示服务器返回数据的类型。这个属性是可写的，可以在调用open()方法之后、调用send()方法之前，设置这个属性的值，告诉服务器返回指定类型的数据。如果responseType设为空字符串，就等同于默认值text。
XMLHttpRequest.responseType属性可以等于以下值:
""（空字符串）：等同于text，表示服务器返回文本数据。
arraybuffer：ArrayBuffer 对象，表示服务器返回二进制数组。
blob：Blob 对象，表示服务器返回二进制对象。
document：Document 对象，表示服务器返回一个文档对象。
json：JSON 对象。
text：字符串。

5、XMLHttpRequest.responseText
XMLHttpRequest.responseText属性返回从服务器接收到的字符串，该属性为只读。只有 HTTP 请求完成接收以后，该属性才会包含完整的数据。

6、XMLHttpRequest.responseXML
XMLHttpRequest.responseXML属性返回从服务器接收到的 HTML 或 XML 文档对象，该属性为只读。如果本次请求没有成功，或者收到的数据不能被解析为 XML 或 HTML，该属性等于null。

7、XMLHttpRequest.responseURL
XMLHttpRequest.responseURL属性是字符串，表示发送数据的服务器的网址。

8、XMLHttpRequest.status
XMLHttpRequest.status属性返回一个整数，表示服务器回应的 HTTP 状态码。一般来说，如果通信成功的话，这个状态码是200；如果服务器没有返回状态码，那么这个属性默认是200。请求发出之前，该属性为0。该属性只读。

9、XMLHttpRequest.statusText
XMLHttpRequest.statusText属性返回一个字符串，表示服务器发送的状态提示。不同于status属性，该属性包含整个状态信息，比如“OK”和“Not Found”

10、XMLHttpRequest.timeout
XMLHttpRequest.timeout属性返回一个整数，表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止。如果该属性等于0，就表示没有时间限制。

11、XMLHttpRequestEventTarget.ontimeout
XMLHttpRequestEventTarget.ontimeout属性用于设置一个监听函数，如果发生 timeout 事件，就会执行这个监听函数。

12、事件监听属性
XMLHttpRequest对象可以对以下事件指定监听函数:

XMLHttpRequest.onloadstart：loadstart 事件（HTTP 请求发出）的监听函数
XMLHttpRequest.onprogress：progress事件（正在发送和加载数据）的监听函数
XMLHttpRequest.onabort：abort 事件（请求中止，比如用户调用了abort()方法）的监听函数
XMLHttpRequest.onerror：error 事件（请求失败）的监听函数
XMLHttpRequest.onload：load 事件（请求成功完成）的监听函数
XMLHttpRequest.ontimeout：timeout 事件（用户指定的时限超过了，请求还未完成）的监听函数
XMLHttpRequest.onloadend：loadend 事件（请求完成，不管成功或失败）的监听函数

13、XMLHttpRequest.withCredentials
XMLHttpRequest.withCredentials属性是一个布尔值，表示跨域请求时，用户信息（比如 Cookie 和认证的 HTTP 头信息）是否会包含在请求之中，默认为false，即向example.com发出跨域请求时，不会发送example.com设置在本机上的 Cookie（如果有的话）。
如果需要跨域 AJAX 请求发送 Cookie，需要withCredentials属性设为true。注意，同源的请求不需要设置这个属性

14、XMLHttpRequest.upload
XMLHttpRequest.upload属性可以得到一个对象，通过观察这个对象，可以得知上传的进展

XMLHttpRequest 的实例方法

1、XMLHttpRequest.open()
XMLHttpRequest.open()方法用于指定 HTTP 请求的参数，或者说初始化 XMLHttpRequest实例对象。它一共可以接受五个参数。

method：表示 HTTP 动词方法，比如GET、POST、PUT、DELETE、HEAD等。
url: 表示请求发送目标 URL。
async: 布尔值，表示请求是否为异步，默认为true。如果设为false，则send()方法只有等到收到服务器返回了结果，才会进行下一步操作。该参数可选。由于同步 AJAX 请求会造成浏览器失去响应，许多浏览器已经禁止在主线程使用，只允许 Worker 里面使用。所以，这个参数轻易不应该设为false。
user：表示用于认证的用户名，默认为空字符串。该参数可选。
password：表示用于认证的密码，默认为空字符串。该参数可选。

2、XMLHttpRequest.send()
XMLHttpRequest.send()方法用于实际发出 HTTP 请求。
如果不带参数，就表示 HTTP 请求只有一个 URL，没有数据体，典型例子就是 GET请求
如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是 POST 请求。

所有 XMLHttpRequest的监听事件，都必须在send()方法调用之前设定。

3、XMLHttpRequest.setRequestHeader()
XMLHttpRequest.setRequestHeader()方法用于设置浏览器发送的 HTTP 请求的头信息。该方法必须在open()之后、send()之前调用
该方法接受两个参数。第一个参数是字符串，表示头信息的字段名，第二个参数是字段值。

4、XMLHttpRequest.overrideMimeType()
XMLHttpRequest.overrideMimeType()方法用来指定 MIME 类型，覆盖服务器返回的真正的 MIME 类型，从而让浏览器进行不一样的处理。
该方法必须在send()方法之前调用。

5、XMLHttpRequest.getResponseHeader()
XMLHttpRequest.getResponseHeader()方法返回 HTTP 头信息指定字段的值，如果还没有收到服务器回应或者指定字段不存在，返回null。该方法的参数不区分大小写。

6、XMLHttpRequest.getAllResponseHeaders()
XMLHttpRequest.getAllResponseHeaders()方法返回一个字符串，表示服务器发来的所有 HTTP 头信息。格式为字符串，每个头信息之间使用CRLF分隔（回车+换行），如果没有收到服务器回应，该属性为null。如果发生网络错误，该属性为空字符串。

7、XMLHttpRequest.abort()
XMLHttpRequest.abort()方法用来终止已经发出的 HTTP 请求。调用这个方法以后，readyState属性变为4，status属性变为0。

XMLHttpRequest 的实例事件

1、readyStateChange 事件
readyState属性的值发生改变，就会触发readyStateChange事件。
可以通过onReadyStateChange属性，指定这个事件的监听函数，对不同状态进行不同处理。

2、progress 事件
上传文件时，XMLHttpRequest实例对象本身和实例的upload属性，都有一个progress事件，会不断返回上传的进度。

3、load 事件、error 事件、abort 事件
load事件表示服务器传来的数据接收完毕，error事件表示请求出错，abort事件表示请求被中断（比如用户取消请求）。

4、loadend 事件
abort、load和error这三个事件，会伴随一个loadend事件，表示请求结束，但不知道其是否成功。

5、timeout 事件
服务器超过指定时间还没有返回结果，就会触发 timeout事件

原文链接

Dec-

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AJAX——XMLHttpRequest

AJAX—— Asynchronous JavaScript and XML指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。只要用脚本发起通信，就可以叫做 AJAX 通信。AJAX 通过原生的XMLHttpRequest对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。AJAX 包括以下几个...
复制链接

扫一扫