Ajax 一般是通过 XMLHttpRequest 对象来是实现的
let request =new XMLHttpRequest() // 声明一个 XMLHttpRequest 对象
常用的方法和属性
XMLHttpRequest 对象的 setRequestHeader 方法
语法: request.setRequestHeader(key,value) // 设置请求头
XMLHttpRequest 对象的 open 方法
语法: request.open(method, url, async, user, password); // 初始化请求; 一般使用前三个参数, 后三个为可选参数
method 参数
要使用的 HTTP 方法, 比如「GET」,「POST」,「PUT」,「DELETE」, 等. 对于非 HTTP(S) URL 被忽略.
url 参数
表示向其发送请求的 URL.
async 可选参数
表示需不需要异步执行操作, 不传入则该参数默认为 true, 已完成事务的通知可供事件监听器使用. 如果值为 false,send() 方法直到收到答复前不会返回.
XMLHttpRequest 对象的 send 方法
语法: request.send(data) // 发送请求, data 参数为可选参数. 如果是异步请求, 则此方法会在请求发送后立即返回; 如果是同步请求, 则此方法直到响应到达后才会返回.
data 参数
表示发送请求时的请求体
在通过 send 方法发送请求后, request 对象在收到响应数据时会自动填充到其对应的属性中, xhr 具有以下常用属性:
responText: 响应返回的数据内容
responseXML: 如果响应内容是 "text/xml""application/xml", 这个属性将保存响应数据的 xml DOM 文档
status: 相应的 HTTP 状态码 (200,302,404,503 等)
statusText: HTTP 状态说明内容 (如 status 的值为 200, 则 statusText 的值为 "ok")
readyState: 无论请求是否成功, 都回响应的一个属性, 表示当前的状态
总共有 5 个状态值, 分别为 0~4, 每个值代表了不同的含义
0: 初始化, XMLHttpRequest 对象还没有完成初始化
1: 载入, XMLHttpRequest 对象开始发送请求
2: 载入完成, XMLHttpRequest 对象的请求发送完成
3: 解析, XMLHttpRequest 对象开始读取服务器的响应
4: 完成, XMLHttpRequest 对象读取服务器响应结束
timeout: 设置请求超时时间
需要结合 ontimeout 事件使用
发送一个请求, readyState 会一直改变状态值, 当值改变时会触发 onreadystatechange 事件, 所以可以在此处做请求成功 / 失败后的数据操作, 得出以下代码
- request.onreadystatechange=()=>{
- if(request.readyState === 4){ // 响应已结束时
- if (request.status === 200 && request.status <300 || request.status === 304) { //2xx 的状态码均表示成功, 304 状态码表示请求与上次一致
- let tempRT = request.responseText // 将响应的数据内容赋值给 tempRT 变量
- console.log(tempRT) // 打印数据内容
- }else if(request.status> 400){ // 大于 400 的状态码均表示为请求失败
- console.log("request fail") // 打印请求失败
- }
- }
- }
最后封装这个手写的 Ajax
- Windows.myAjax = {
- Ajax: (options) => { // 接受一个对象参数
- let method = options.method
- let url = options.url
- let header = options.header
- let body = options.body
- let request = new XMLHttpRequest()
- request.open(method, url)
- for (key in header) {
- let temp = key
- request.setRequestHeader(key, temp)
- }
- request.onreadystatechange = () => {
- if (request.readyState === 4) {
- if (request.status === 200) {
- let temp = request.responseText
- console.log(temp)
- }
- }
- }
- request.send(body)
- }
- }
- options = {} // 设置传参
- myAjax.Ajax(options) // 引入该文件, 调用全局变量 myAjax 的 Ajax 方法
功能较为简易, 以实现基础功能为需求
来源: http://www.jianshu.com/p/b53ca6b57dc8