Ajax函数的封装
Ajax函数的封装
看Ajax的封装之前我们先看看！没有封装的实现步骤吧！
Document
测试页面！
你看，我们才写一个请求就有那么多的代码了！要是有十几二十几个请求，那不是会把人写疯掉？！就像回调地狱的问题一样！
目录Ajax函数的封装 - Ajax封装
- 问题:发送次请求代码过多，发送多次请求代码冗余且重复。
- 解决方案:将请求代码封装到函数中，发请求时调用函数即可。
- 第一版封装
- 第二版封装【对Ajax封装进一步的扩展】
- 第三版封装
- 第四版封装
- 第五版封装
- 封装最终版
- Ajax封装
Ajax封装
问题:发送次请求代码过多，发送多次请求代码冗余且重复。
解决方案:将请求代码封装到函数中，发请求时调用函数即可。
第一版封装
Document
测试页面！
最终效果：
第二版封装【对Ajax封装进一步的扩展】
我想在发送请求的时候向服务器传递一些参数，怎么实现？!现在只考虑get请求的情况！
请求参数要考虑的问题
1.请求参数位置的问题
将请求参数传递到ajax函数内部，在函数内部根据请求方式的不同将请求参数放置在不同的位置
get放在请求地址的后面
post放在send方法中
2.请求参数格式的问题
application/ X-WWw - form-urlencoded
参数名称=参数值&参数名称=参数值
name=lvhang&age=23
application/json
{ name :'zhangsan'，age: 20}
1.传递对象数据类型对于函数的调用者更加友好
2.在函数内部对象数据类型转换为字符串数据类型更加方便
get请求：
html文件：
Document
测试页面！
post请求
html文件改动点：
最终效果：
第三版封装
【其实代码还是有问题的，就是设置参数的请求格式我们是把它写成了固定的，那如果客户端的人想要传递json数据格式该怎么办呢？! 这个应该由调用函数的人传递进来，然后我们在函数内部进行处理】
html代码：
Document
测试页面！
最终效果：
第四版封装
【请求成功之后的代码：请求成功之后返回的状态码有可能是非200的状态码呢!所以要判断成功还有失败的情况！】
html文件：
Document
测试页面！
第五版封装
【接下来我们把注意力放在服务端返回的结果上！，我们客户端需要的信息是对象，但是服务器返回的是json字符串，你可能会说用JSON.parse()啊！对，你说的没错！但是你怎么知道返回的就是json字符串呢？!】
html文件：
Document
测试页面！
封装最终版
【其实我们已经封装得差不多了！但是还有一个问题，我们在调用Ajax函数的时候传递了非常多的参数， 如果每次调用AJax函数都需要调用这么多参数的话也是很不方便的!】[目标：只需要传递一些必要的参数进去就行了例如：请求地址、请求中的回调函数等！没有传递请求的话就使用默认值！就像请求参数的类型：没有传递就使用传统的字符串拼接的方式，如果传递的是json字符串的形式，那么请求参数类型就设置为application/json]
html代码未修改前：
Document
测试页面！
html代码修改后：
Document
测试页面！
看请求同样能够发送出去！