使用
XMLHttpRequest
(XHR)对象可以与服务器交互。您可以从URL获取数据,而无需让整个的页面刷新。这允许网页在不影响用户的操作的情况下更新页面的局部内容。在 AJAX 编程中,XMLHttpRequest
被大量使用。
(2) ajax 请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调 函数并传入响应相关数
0: 初始
1: open()之后
2: send()之后
3: 请求中
4: 请求完成
onreadystatechange: 绑定readyState改变监听
responseType: 指定相应数据,如果是'json',得到响应后自动解析响应体数据
response: 响应体数据,类型取决于responseType的指定
timeout: 指定请求超时时间,默认为0代表没限制
ontimeout: 绑定超时的监听
onerror: 绑定请求网络错误的监听
open(): 初始化一个请求, 参数为: (method, url[, async])
send(data): 发送请求
abort(): 中断请求
getResponseHeader(name): 获取指定名称的响应头值
getAllResponseHeaders(): 获取所有响应头组成的字符串
16. setRequestHeader(name, value): 设置请求头
{ url: '', // 请求地址 method: '', // 请求方式 GET/POST/PUT/DELETE params: {}, // GET/DELETE 请求的 query 参数 data: {}, // POST 或 DELETE 请求的请求体参数 } 复制代码
function axios({ url, method='GET', params={}, data={} }) { // 返回一个promise对象 return new Promise((resolve, reject) => { // 处理method(转大写) method = method.toUpperCase() // 处理query参数(拼接到url上) id=1&xxx=abc /* { id: 1, xxx: 'abc' } */ let queryString = '' Object.keys(params).forEach(key => { queryString += `${key}=${params[key]}&` }) if (queryString) { // id=1&xxx=abc& // 去除最后的& queryString = queryString.substring(0, queryString.length-1) // 接到url url += '?' + queryString } // 1. 执行异步ajax请求 // 创建xhr对象 const request = new XMLHttpRequest() // 打开连接(初始化请求, 没有请求) request.open(method, url, true) // 发送请求 if (method==='GET' || method==='DELETE') { request.send() } else if (method==='POST' || method==='PUT'){ request.setRequestHeader('Content-Type', 'application/json;charset=utf-8') // 告诉服务器请求体的格式是json request.send(JSON.stringify(data)) // 发送json格式请求体参数 } // 绑定状态改变的监听 request.onreadystatechange = function () { // 如果请求没有完成, 直接结束 if (request.readyState!==4) { return } // 如果响应状态码在[200, 300)之间代表成功, 否则失败 const {status, statusText} = request // 2.1. 如果请求成功了, 调用resolve() if (status>=200 && status<=299) { // 准备结果数据对象response const response = { data: JSON.parse(request.response), status, statusText } resolve(response) } else { // 2.2. 如果请求失败了, 调用reject() reject(new Error('request error status is ' + status)) } } }) } 复制代码
如想了解更多请扫描二维码,关注公众号