jQuery中的AJAX工具函数怎么用

本文小编为大家详细介绍“jQuery中的AJAX工具函数怎么用”，内容详细，步骤清晰，细节处理妥当，希望这篇“jQuery中的AJAX工具函数怎么用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

　　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,只要用以上的函数传入所需的参数即可得到结果，做到了代码的复用，使代码更简洁。提升了开发效率。

读到这里，这篇“jQuery中的AJAX工具函数怎么用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。