AJAX工具函数

 

　　为什么需要AJAX工具函数：

 

　　之前每次发判断请求，如果请求方式，或者参数或者url不一样，那么代码无法复用，所以我们迫切的需要一个通用函数，让用户在使用异步对象的时候通过调用一个相同的函数就可以实现需求总之：为了提升我们的开发效率，我们自已将XMLHttpRequest封装成一个函数。

 

　　关键点：

 

　　找到操作的共同点找到不同的部分--参数

 

　　不同部分：

 

　　请求方式：type请求url:url请求参数不一样：data数据的转换方式--返回数据的格式：dataType对于数据的处理方式不一样： success: 这是一个回调函数

 

　　函数的封装形式：

 

　　var?$?=?{

 

　　ajax:function（option）{

 

　　//?实现具体的业务处理

 

　　}

 

　　}

 

　　代码实现：

 

　　var?$?=?{

 

　　//传入对象

 

　　ajax:function（option）{

 

　　//?实现具体的业务处理

 

　　var?xhr?=?new?XMLHttpRequest（）

 

　　//?接收参数

 

　　var?type=?option.type?||?'get'

 

　　//?location.pathname:当前页面的全路径

 

　　var?url?=?option.url?||?location.pathname

 

　　var?data?=?option.data?||?''

 

　　var?dataType?=?option.dataType?||?'text/html'

 

　　var?success?=?option.success

 

　　//?发送请求

 

　　//?设置请求行：get如果有参数就需要拼接在url后面，post不用拼接

 

　　if（type?==?'get'）{

 

　　url?=?url?+?"?"?+?data

 

　　data?=?null

 

　　}

 

　　xhr.open（type,url）

 

　　//?设置请求头：get方式不需要设置请求头，post方式需要设置Content-Type

 

　　if（type?==?'post'）{

 

　　xhr.setRequestHeader（'Content-Type','application/x-'）

 

　　}

 

　　//?设置请求体：如果有参数，post方式在请求体中传递参数

 

　　xhr.send（data）

 

　　//?接收响应

 

　　xhr.onload?=?function（）{

 

　　//?调用回调

 

　　success?&&?success（this.response）

 

　　}

 

　　}

 

　　}

 

　　由以上封装的函数，可以看出在客户端每次发判断请求： 不同方式的请求，不同参数，不同url,只要用以上的函数传入所需的参数即可得到结果，做到了代码的复用，使代码更简洁。提升了开发效率。