搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > web前端自学平台 > 封装Ajax框架(代码篇)

封装Ajax框架(代码篇)

web前端自学平台 2017-10-31

1、添写一个封闭函数

(function(){})();

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

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

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

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

所以在外部,如果想获取某个dom元素,可以直接:$("content");

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

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

封装Ajax框架(代码篇)

4、封装ajax的get请求

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

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

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

封装Ajax框架(代码篇)

5、封装ajax的post请求

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

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

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

封装Ajax框架(代码篇)

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

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

6、添加返回值类型

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

a、字符串

b、xml

c、json

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

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

 

调用形式

阅读原文,查看具体代码

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《封装Ajax框架(代码篇)》的版权归原作者「web前端自学平台」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注web前端自学平台微信公众号

web前端自学平台微信公众号:gh_d79ea4fb97f3

web前端自学平台

手机扫描上方二维码即可关注web前端自学平台微信公众号

web前端自学平台最新文章

精品公众号随机推荐