了解ajax工作原理及手写ajax

深藏阁楼爱情的钟 2022-04-14 02:59 365阅读 0赞

# 1.ajax工作原理 #

> 工作原理：
> 
> 创建XMLHttpRequest对象，发送异步请求，提供网页加载后在后台与服务器进行通信的方法，`可在不刷新页面的情况下获得新数据`

# 2.手写ajax原生代码 #

> 手写原生ajax步骤:
> 
> 1.创建xhr对象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）
> 
> 2.判断数据传输方式(GET/POST)转换数据格式
> 
> 3.打开链接 open()
> 
> 4.发送 send()
> 
> 5.当ajax对象完成第四步（onreadystatechange）数据接收完成，判断http响应状态（status）200-300之间或者304（缓存）执行回调函数

**1.创建xhr对象**

区分标准写法和ie(ie5,ie6)写法

`//通过检测window对象是否有XMLHttpRequest属性来确定浏览器是否支持标准的XMLHttpRequest`

**2.当创建了XMLHttpRequest对象后，要先设置onreadystatechange的回调函数。在回调函数中，通常我们只需通过readyState === 4判断请求是否完成，如果已完成，再根据status === 200判断是否是一个成功的响应。**

1)XMLHttpRequest对象的open()方法有3个参数，第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，所以不用写。

注意，千万不要把第三个参数指定为false，否则浏览器将停止响应(false表示同步)，直到AJAX请求完成。如果这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。

2)最后调用send()方法才真正发送请求。GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。

1.  `async：是否异步执行AJAX请求，默认为true，千万不要指定为false；`
2.  `method：发送的Method，缺省为'GET'，可指定为'POST'、'PUT'等；`
3.  `contentType：发送POST请求的格式，默认值为'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定为text/plain、application/json；`
4.  `data：发送的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式；`
5.  `headers：发送的额外的HTTP头，必须是一个object；`
6.  `dataType：接收的数据格式，可以指定为'html'、'xml'、'json'、'text'等，缺省情况下根据响应的Content-Type猜测。`

♥如果需要使用JSONP，可以在ajax()中设置jsonp: 'callback'，jsonpCallback:"本地函数名"让jquery实现JSONP跨域加载数据。

## 2.1 readyState状态码 ##

*  对象属性 readyState状态码

<table> 
 <thead> 
  <tr> 
   <th>readyState</th> 
   <th>状态</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>0</td> 
   <td>onsent</td> 
   <td>未初始化，及还未调用open()方法</td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td>opened</td> 
   <td>启动，未调用send()方法</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>headers_received</td> 
   <td>发送，未收到响应</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>loading</td> 
   <td>接受，取得部分收据</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td>done</td> 
   <td>下载操作已完成</td> 
  </tr> 
 </tbody> 
</table>

*  对象事件

- onReadyStateChange  // readyState 状态码改变时触发  
         - onError  // ajax 请求错误时触发

## 2.2 源码： ##

# **结束** #

如果文章对你有帮助，麻烦点赞哦！一起走码农花路~

![20190510130531760.jpg][]

[20190510130531760.jpg]: /images/20220414/4a6e44fcf5bb4b9bb46f7587da8496f5.png