原生javascript封装ajax
目的:
用原生js封装自己的ajax,可以在返回响应时根据项目发送统一的数据请求和根据接口返回的响应处理统一的内容,也可以增加自己的特殊功能,如,在加上loading功能等等。
工作原理:
核心对象(XMLHttpRequest对象):它是XML里DOM技术中的一个重要对象。它提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。可以同步或异步地返回 Web 服务器的响应,并且能够以文本或者一个 DOM 文档的形式返回内容。它并不限于和 XML 文档一起使用:它可以接收任何形式的文本文档。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
使用步骤:
1,创建XMLHTTPRequest对象,如
1 var xhr = new XMLHttpRequest()
2,使用open方法设置和服务器的交互信息,如:其中options.type为请求方式:“post”或者“get”;options.url:发送的地址;options.async:请求是否异步处理(true:异步,false:同步)
1 xhr.open(options.type, options.url, options.async);
3,设置响应HTTP请求状态变化的函数
状态 | 名称 | 描述 |
---|---|---|
0 | Uninitialized | 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 |
1 | Open | open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。 |
2 | Sent | Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。 |
3 | Receiving | 所有响应头部都已经接收到。响应体开始接收但未完成。 |
4 | Loaded | HTTP 响应已经完全接收。 |
4,设置发送的数据,开始和服务器端交互
1 xhr.send();
5,接收返回数据
6,使用JavaScript和DOM实现局部刷新
代码地址:https://gitee.com/wxwphp/myAjax