手写一个(jQuery版)ajax

Question

如题所述

Answer 1

手工实现ajax，基于先前的原生js实现jsonp和ajax文章，我们只需对原生js进行优化，形成简洁的api。(因此，本文的实现将从原生版ajax开始。)

阅读本文后，你将掌握以下内容：

1.通过对象传参的方式简化参数表

2.使用ES6的解构赋值去除冗余

3.通过Promise和then分离参数表中的函数

4.应用上述技巧

5.其他相关知识点

一、对象传参套路

1.当函数拥有多个参数时，调用可能不够直观，难以理解每个参数的具体含义

例如：process(null, 1, null, 2, null, null, null, 3)

这时可以考虑将参数打包成具有结构的对象，传递一个对象参数

使用对象传参的优势在于，逻辑更加清晰，无需考虑参数的具体位置，参数的对应关系可以直接从键值对中解析。此外，扩展更加简单。

细节：在传参时，通常将形式参数命名为options。

2.效果：

before:多个参数传入

after:一个对象传入

二、ES6语法：解构赋值与交换赋值

1.解构赋值

若对象options = {key1: value1, key2:value2, key3:value3}

则可以通过以下语句一次性获取options内部的三个值

2.交换赋值

顾名思义，就是将两个变量的值进行交换。在ES6之前，可能需要写3句代码，而在ES6中只需一句。

三、then与Promise

1.then

使用jQuery的ajax函数时，可以将参数对象的函数(sucess,failure)通过then传入。

then的语法：

2.Promise

Promise是window的一个全局函数，是构造then的关键。

语法：

四、手写一个jQuery版ajax

这里从上一篇文章的原生版ajax出发，利用本文提到的三个技巧逐步优化，形成jQuery风格的ajax

五、其他小知识

1.前端中文文档集合（上哪找文档？）

cndevdocs.com

2.一个函数如何接受两种参数个数？（参数个数的重载）

比如：函数f可以这样调用f(var1)，也可以f(var1, var2)

a : 很简单，判断arguments.length即可

3.XHR设置请求与获取响应

设置请求：

第一部分： xhr.open('get', '/xxx')

第二部分： xhr.setHeader('content-type', 'x-www-form-urlencoded')

第四部分： xhr.send('a=1&b=2')

获取响应：

第一部分： xhr.status / xhr.statusText

第二部分： xhr.getResponseHeader() / xhr.getAllResponseHeaders()

第四部分： xhr.responseText