Ajax及XMLHttpRequest对象的应用

最新推荐文章于 2024-09-05 09:07:36 发布

m0_62138802

最新推荐文章于 2024-09-05 09:07:36 发布

阅读量50

点赞数

文章标签： ajax Powered by 金山文档

本文链接：https://blog.csdn.net/m0_62138802/article/details/129690812

版权

Ajax

概念

全称Async Javascript and XML即异步javascript和XML

非编程语言，是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页。

AJAX工作原理

客户端发送请求，请求通过Ajax的核心—XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上实现部分页面更新。

对于AJAX应用的举例分析：

1.老师让班长把A同学叫到办公室

2.老师继续在办公室办公做其他事务

3.班长去叫A同学

4.班长把A同学领到办公室

5.班长告诉老师A同学来了

6.老师与A同学进行沟通交流

此处浏览器是老师，Ajax建立的XmlHttpRequest对象是班长，服务器则是A同学。

XMLHttpRequest对象

创建

例：var xhr=new XMLHttpRequest();

XMLHttpRequest属性

属性	具体功能
onreadystatechange	用于指定状态改变时触发的事件处理器。每当xhr.readyState改变时触发
readyState	用于获取请求状态的属性未初始化；1-正在加载；2-已加载；3-交互中；4-完成
response	返回响应的正文，类型取决于responsType的值
responseType	是一个枚举字符串值，用于指定响应中包含的数据类型如果将 responseType 的值设置为空字符串，则会使用 text 作为默认值
Status	用于描述HTTP响应状态码。仅当readyState的值为3或4时，status属性才可用
statusText	用于描述HTTP响应状态的描述文本。如OK、Not、Found。仅当readyState的值为3或4时，statusText属性才可用
responseText	用户获取服务器相应的属性。当readyState的值为0、1、2时，responseText为空字符串；当readyState的值为3时，responseText为还未完成的响应信息；当readyState的值为4时，responseText为响应信息
responseXML	用于当接收到完整HTTP响应(readyState的值为4)时描述XML响应，若readyState的值不为4，它取值为null
upload	用于收集传输信息
timeout	单位毫秒，默认值0，即不设置超时

XMLHttpRequest方法

方法	具体功能
open()	用于设置异步请求的URL、请求方法以及其他参数信息用于创建HTTP请求，但请求并未发送
send()	用于向服务器发送要求。如果请求声明为异步，该方法将立即返回，否则将等到接收到响应为止
setRequestHeader()	设置请求 HTTP 请求头信息必须在open()后，send()前调用
getRequestHeader()	以字符串的形式返回指定的HTTP头信息
getAllRequestHeader()	以字符串的形式返回完整的HTTP头信息
abort()	异步请求取消。若请求已发出则会终止请求，并将readyState置为0

XMLHttpRequest事件

事件	触发条件
onreadystatechange	每当xhr.readyState改变时触发；但xhr.readyState由非 0 值变为 0 时不触发。
onloadstart	调用xhr.send()方法后立即触发，若xhr.send()未被调用则不会触发此事件。
onprogress	xhr.upload.onprogress在上传阶段(即xhr.send()之后，xhr.readystate=2之前)触发，每 50ms 触发一次；xhr.onprogress在下载阶段（即xhr.readystate=3时）触发，每 50ms 触发一次。
onload	当请求成功完成时触发，此时xhr.readystate=4
onloadend	当请求结束（包括请求成功和请求失败）时触发
onabort	当调用xhr.abort()后触发
ontimeout	xhr.timeout不等于 0 ，由请求开始即 onloadstart 开始算起，当到达xhr.timeout 所设置时间请求还未结束即 onloadend ，则触发此事件。
onerror	在请求过程中，若发生 Network error 则会触发此事件（若发生 Network error 时，上传还没有结束，则会先触发 xhr.upload.onerror，再触发 xhr.onerror ；若发生 Network error 时，上传已经结束，则只会触发xhr.onerror ）。注意，只有发生了网络层级别的异常才会触发此事件，对于应用层级别的异常，如响应返回的xhr.statusCode是 4xx 时，并不属于 Network error ，所以不会触发 onerror 事件，而是会触发 onload 事件。

应用

使用ajax实现简单的更改操作

创建一个xhr对象

var xhr = new XMLHttpRequest();

判断Ajax的状态码,如果状态码正常则正常返回，否则报错并输出状态码

xhr.addEventListener("load", function () {

if (xhr.status === 200) {

console.log(xhr.response);

} else {

console.log("error", xhr.status);

}

});

3.xhr.open()设置异步请求信息，准备发送请求

xhr.open("PUT", url + "/9");

4.xhr.send()发送请求

xhr.send(JSON.stringify({ title: "newTitle", author: "newAuthor" }));

  function modifyPosts() {
        var url = "http://localhost:3000/posts";
        var xhr = new XMLHttpRequest();
        xhr.addEventListener("load", function () {
          if (xhr.status === 200) {
            console.log(xhr.response);
          } else {
            console.log("error", xhr.status);
          }
        });
        xhr.open("PUT", url + "/9");
        xhr.setRequestHeader("Content-type", "application/json");
        xhr.send(JSON.stringify({ title: "9", author: "9" }));
      }
      modifyPosts();

最终实现效果：