前言：最近后台让帮个忙，改一下之前他们的后台管理系统的代码，看到了request = new XMLHttpRequest()，request.onreadystatechange等，很是不理解，后来一顿搜索，才发觉这个是.ajax的原生写法，而我一直在工作中都是只是用的.ajax。同时令我感到很惊奇的是，竟然还搜出了很多面试题，就是原生方法写ajax，既然这样，那就重视一下，让我们尝试自己去实现window.jquery.ajax吧~~
关键词：window.jquery.ajax,promise，回调函数,简单的解构赋值~~......
正文：
1、最初版本
我们就不从最开始写了，我觉得这样很浪费时间，我觉得下面这些代码比较好理解，所以就从这里开始吧：
window.jQuery = function(nodeOrSelector){
let nodes = {}
nodes.addClass = function(){}
nodes.html = function(){}
return nodes
}
window.$ = window.jQuery
window.jQuery.ajax = function({url, method, body, successFn, failFn, headers}){
let request = new XMLHttpRequest()
request.open(method, url) // 配置request
request.onreadystatechange = ()=>{
if(request.readyState === 4){
if(request.status >= 200 && request.status < 300){
successFn.call(undefined, request.responseText)
}else if(request.status >= 400){
failFn.call(undefined, request)
}
}
}
request.send(body)
}
myButton.addEventListener('click', (e)=>{
window.jQuery.ajax( '/frank', 'get','a=1&b=2', (x)=>{console.log(1)},(y)=>{console.log(2)})
})
其实，代码的重点部分是从window.jQuery.ajax来开始的，我们把它进行了封装，等到点击事件的时候，我们调用传入参数。但是不是和我们正常用的$.ajax还是有很大的区别？当我们直接看我们传的参数的时候，我们无法无法确定他们到底代表着什么意义，并且，当我们是get方法的时候，body所代表的第四部分是不需要传的，那我们就不传会不会报错呢，这就产生了很多的问题，那就接着让我们来进行一下优化：
2、升级版本
首先怎么优化呢？根据上面暴露出来的问题，我们需要在调用的时候传一个有结构的参数，在js里面，只有对象是有结构的，那我们就把参数变成一个有结构的对象。
window.jQuery = function(nodeOrSelector){
let nodes = {}
nodes.addClass = function(){}
nodes.html = function(){}
return nodes
}
window.$ = window.jQuery
window.jQuery.ajax = function(options){
let url = options.url;
let methods= options.methods;
let body= options.body;
let successFn= options.successFn;
let failFn= options.failFn;
let request = new XMLHttpRequest()
request.open(method, url) // 配置request
request.onreadystatechange = ()=>{
if(request.readyState === 4){
if(request.status >= 200 && request.status < 300){
successFn.call(undefined, request.responseText)
}else if(request.status >= 400){
failFn.call(undefined, request)
}
}
}
request.send(body)
}
myButton.addEventListener('click', (e)=>{
window.jQuery.ajax({
url:/xxx,
methods:get,
successFn:(x)=>{
console.log(x)
},
failFn:() =>{}
})
})
给你们出个问题，代码中的console.log(x),这个x是什么？答：request.responseText.上文中一层一层去查successFn，你会注意到有：successFn.call(undefined, request.responseText)这么一句。
在这里点出一个js中的一个定义，回调函数，先把定义给大家说一下，什么是回调函数：
函数A作为参数(函数引用)传递到另一个函数B中，并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式)，就叫做匿名回调函数。
所以，大家找到了吗？上述代码中，哪个是回调函数？
successFn和failFn都是回调函数。
2、二次升级版本
我们这里，只传了一个参数，如果你想传两个参数该怎么传呢？这里，我们以另一个参数为URL来举例：
window.jQuery = function(nodeOrSelector){
let nodes = {}
nodes.addClass = function(){}
nodes.html = function(){}
return nodes
}
window.$ = window.jQuery
window.jQuery.ajax = function(options){
let url
if(arguments.length === 1){
url = options.url
}else if(arguments.length === 1){
url = arguments[0];
options = arguments[1]
}
let methods= options.methods;
let body= options.body;
let successFn= options.successFn;
let failFn= options.failFn;
let headers= options.headers;
let request = new XMLHttpRequest()
request.open(method, url) // 配置request
request.onreadystatechange = ()=>{
if(request.readyState === 4){
if(request.status >= 200 && request.status < 300){
successFn.call(undefined, request.responseText)
}else if(request.status >= 400){
failFn.call(undefined, request)
}
}
}
request.send(body)
}
myButton.addEventListener('click', (e)=>{
window.jQuery.ajax({
url:/xxx,
methods:get,
successFn:(x)=>{
console.log(x)
},
failFn:() =>{}
})
})
3、三次升级版本
大家看了二次升级的版本，有没有觉得哪里别扭？那四个let多麻烦多别扭，这里，在给大家介绍一种依靠es6的优化方法：
解构赋值：
window.jQuery = function(nodeOrSelector){
let nodes = {}
nodes.addClass = function(){}
nodes.html = function(){}
return nodes
}
window.$ = window.jQuery
window.jQuery.ajax = function({methods，body，successFn， failFn，headers}){//变化在这里----------意思是直接拿到这几个变量，然后同时再声明这几个变量
let url
if(arguments.length === 1){
url = options.url
}else if(arguments.length === 1){
url = arguments[0];
options = arguments[1]
}
// 第一步 let {methods，body，successFn， failFn，headers} = options //变化在这里-------------这一句等于上面的五句。
let request = new XMLHttpRequest()
request.open(method, url) // 配置request
request.onreadystatechange = ()=>{
if(request.readyState === 4){
if(request.status >= 200 && request.status < 300){
successFn.call(undefined, request.responseText)
}else if(request.status >= 400){
failFn.call(undefined, request)
}
}
}
request.send(body)
}
myButton.addEventListener('click', (e)=>{
window.jQuery.ajax({
url:/xxx,
methods:get,
successFn:(x)=>{
console.log(x)
},
failFn:() =>{}
})
})
4最终版本：
window.jQuery = function(nodeOrSelector){
let nodes = {}
nodes.addClass = function(){}
nodes.html = function(){}
return nodes
}
window.$ = window.jQuery
window.jQuery.ajax = function({url, method, body, successFn, failFn, headers}){
let request = new XMLHttpRequest()
request.open(method, url) // 配置request
for(let key in headers) {
let value = headers[key]
request.setRequestHeader(key, value)
}
request.onreadystatechange = ()=>{
if(request.readyState === 4){
if(request.status >= 200 && request.status < 300){
successFn.call(undefined, request.responseText)
}else if(request.status >= 400){
failFn.call(undefined, request)
}
}
}
request.send(body)
}
function f1(responseText){}
function f2(responseText){}
myButton.addEventListener('click', (e)=>{
window.jQuery.ajax({
url: '/frank',
method: 'get',
headers: {
'content-type':'application/x-www-form-urlencoded',
'frank': '18'
},
successFn: (x)=>{
f1.call(undefined,x)
f2.call(undefined,x)
},
failFn: (x)=>{
console.log(x)
console.log(x.status)
console.log(x.responseText)
}
})
})
网友评论