jquery 2 ajax,写一个简化版的jQuery（2、ajax）

之前写过一个jQuery的大致实现，但是那是不准确的，jQuery是使用构造函数实现的，并且他在文件内就已经执行了，这样，在外面就可以直接使用 $符号了。

之前的大致结构如下：

window.jQuery = function (nodeOrSelector) {

let nodes = { length: 0 }

if (typeof (nodeOrSelector) === 'string') {

let temp = document.querySelectorAll(nodeOrSelector)

for (let i = 0; i < temp.length; i++) {

nodes[i] = temp[i]

nodes.length = temp.length

}

} else if (nodeOrSelector instanceof Node) {

nodes = {

0: nodeOrSelector,

length: 1

}

}

nodes.addClass = function (classes) {

for (let i = 0; i < nodes.length; i++) {

var node = nodes[i]

for (let key in classes) {

if (classes[key]) {

node.classList.add(key)

}

}

}

}

return nodes

}

这个函数可以接受一个选择器或者节点，在执行后会返回出预设的方法

现在要把ajax的功能加上去，代码如下：

window.jQuery = function (nodeOrSelector) {

// 一堆代码

}

window.$ = window.jQuery

window.jQuery.ajax = function (options) {

let path

if (arguments.length === 1) {

// 传进一个参数时

path = options.path

} else if (arguments.length === 2) {

// 传进两个参数时

path = arguments[0]

options = arguments[1]

}

let method = options.method

let successFn = options.successFn

let failFn = options.failFn

let data = options.data

let headers = options.header

let r = new XMLHttpRequest()

r.open(method, path)

for (let key in headers){

r.setRequestHeader(key, headers[key])

}

r.onreadystatechange = function () {

if (r.readyState === 4) {

if (r.status >= 200 || r.status < 300) {

successFn.call(undefined, r.responseText)

} else {

failFn.call(undefined, r.request)

}

}

}

r.send(data)

}

用一个对象传参进去，在使用的时候就不用关注各个参数的顺序了，而且根据需要可以添加更多参数

使用方法：这里用一下豆瓣的API，进入https://api.douban.com，打开控制台，输入

$.ajax({

path: 'https://api.douban.com/v2/book/1220562',

method: 'GET',

successFn: function (response) { console.log(response) },

failFn: function (request) { console.log(request) },

data:'0000'

})

得到的响应如下：

image.png

说明请求成功了

搞一个Promise版的ajax

如果需要在回调函数执行后再执行另外的函数，就再回调successFn里面再增加函数就行，但是当增加的函数过多时，会变得不可读，因为搞不清楚这些函数哪些会被执行，promise解决了这个问题

Promise相当于只在原来的基础上加了六个单词

return new Promise(function(resolve, reject){

......

}

但是它可以递归的加回调函数，避免因回调函数太多而产生回调地狱

代码如下：

window.jQuery = function (nodeOrSelector) {

// 代码

}

window.$ = window.jQuery

window.jQuery.ajax = function ({path, method, data, headers }) {

return new Promise(function (resolve, reject) {

let r = new XMLHttpRequest()

r.open(method, path)

for (let key in headers) {

r.setRequestHeader(key, headers[key])

}

r.onreadystatechange = function () {

if (r.readyState === 4) {

if (r.status >= 200 || r.status < 300) {

resolve.call(undefined, r.responseText)

} else {

reject.call(undefined, r.request)

}

}

}

r.send(data)

}

)

}

这里传进function的参数是一个对象的形式，采用了解构赋值的写法，和之前的一大堆是一样的

使用方法如下：

$.ajax({

path: 'https://api.douban.com/v2/book/1220562',

method: 'GET',

data: '0000'

}).then((text) => { console.log('text', text) },

(request) => { console.log('request', request) })

如果想成功或者失败后在执行某些功能，可以在后面再接then()就可以了。

image.png

这是返回的结果，说明请求是对的，而且成功的接受了返回的数据