手动封装一个ajax_vlambda技术博客

vlambda
2020-08-13

手动封装一个ajax

我们尝试封装一个ajax，形如函数的形式。

首先我们创建ajax对象和构建默认配置

let xhrif (window.XMLHttpRequest) { xhr = new XMLHttpRequest()} else if (window.ActiveObject) { //兼容IE6以下版本 xhr = new ActiveXobject('Microsoft.XMLHTTP')}
let defaults = { type: 'get', url: '', data: { }, header: { // 表单默认的提交数据的格式 'Content-type': 'application/x-www-form-urlencoded', }, success: function () {}, error: function () {},}
 this.options = Object.assign(defaults, options)

最后我们处理发送请求:

区分get和post请求传参格式
请求时根据配置动态设置请求头信息
处理响应，根据状态码区分

// 获取get参数形式function getParams(data) { let params = '' for (let item in data) { params += `${item}=${data[item]}&` } let length = params.length return params.substr(0, length - 1)}
let getStr = getParams(options.data)// 设置请求头部配置function setHeader (data) { for (let item in data) { xhr.setRequestHeader(item, data[item])  }}// 处理参数传递和方法if (options.type === 'get') { xhr.open('get', options.url + '?' + getStr, true) // setHeader(options.header) xhr.send()} else if (options.type === 'post') { xhr.open('post', options.url, true) setHeader(options.header) xhr.send(params)} else { options.error('暂不支持除get和post以外的请求') return}
xhr.onreadystatechange = function () { if (xhr.readyState === 4) { let status = xhr.status if ((status >= 200 && status < 300) || status == 304) { options.success(xhr.responseText, xhr.responseXML) } else { options.error(status) } }}

然后我们使用开头的图片代码请求服务器接口

// 服务器代码const express = require('express')const app = express()
app.get('/jsonp', function (req, res) { let name = req.query.name res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:8081') let data = { name: name, msg: '操作成功', state: 200  } res.send(data)})
app.listen(3000, () => { console.log('Server running at http://127.0.0.1:3000')})

最终代码如下：

function ajax(options) { let xhr if (window.XMLHttpRequest) { xhr = new XMLHttpRequest() } else if (window.ActiveObject) { //兼容IE6以下版本 xhr = new ActiveXobject('Microsoft.XMLHTTP') }
 let defaults = { type: 'get', url: '', data: { }, header: { // 表单默认的提交数据的格式 'Content-type': 'application/x-www-form-urlencoded', }, success: function () {}, error: function () {}, }
   // 合并配置项 this.options = Object.assign(defaults, options)
 debugger // 获取get参数形式 function getParams(data) { let params = '' for (let item in data) { params += `${item}=${data[item]}&` } let length = params.length return params.substr(0, length - 1) } let getStr = getParams(options.data)

 // 设置请求头部配置 function setHeader (data) { for (let item in data) { xhr.setRequestHeader(item, data[item]) }
 } // 处理参数传递和方法 if (options.type === 'get') { xhr.open('get', options.url + '?' + getStr, true) setHeader(options.header) xhr.send() } else if (options.type === 'post') { xhr.open('post', options.url, true) setHeader(options.header) xhr.send(params) } else { options.error('暂不支持除get和post以外的请求') return }
 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { let status = xhr.status if ((status >= 200 && status < 300) || status == 304) { options.success(xhr.responseText, xhr.responseXML) } else { options.error(status) } } }}