封装Ajax框架(代码篇)

Posted 2021-04-15 web前端知识大全

1、添写一个封闭函数

（function(){}）();

在一个项目中，可能会引用多个js框架，如果函数名相同，会有命名冲突，所以这里使用封闭函数。

2、封装一个函数，用于dom元素的获取

但$是局部变量，外面不能直接使用，所以需要添加window.$ = $；

表示为全局对象window添加一个"$"的属性，这个属性的值是当前局部变量$的值。

所以在外部，如果想获取某个dom元素，可以直接：$("content")；

3、封装一个函数，用于创建ajax对象

因为之前，我们将一个函数赋值给了$，函数也是对象，所以$也就是一个对象

4、封装ajax的get请求

为对象$添加一个get方法，参数有三个

　　data：表示get请求时所需要传递的参数

　　callback：当ajax得到正确的数据后，所执行的回调函数，也就是参数callback接收的参数应该是一个函数。

5、封装ajax的post请求

为对象$添加一个post方法，参数有三个

　　data：表示get请求时所需要传递的参数

　　callback：当ajax得到正确的数据后，所执行的回调函数，也就是参数callback接收的参数应该是一个函数。

当调用ajax请求时，可以使用这种形式

那么对应的方法中callback参数就指向了这个处理函数，所以callback(xhr.responseText)；相当于处理函数(xhr.responseText)

6、添加返回值类型

我们在ajax程序中，可以使用三种数据形式：

a、字符串

b、xml

c、json

需要完善ajax框架 ，可以返回不同类型的数据，再进行不同的处理。首先，为get和post方法添加第四个参数：type，表示期望得到的返回值类型

 再根据type值的不同，返回对应的数据

 

调用形式

阅读原文，查看具体代码