前端:ajax的封装函数

什么是 AJAX ?

W3C官方的说法:

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

注意:Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

我的理解:ajax是一种异步请求的方法,改变了以往的开发模式,每一次进行页面刷新是可以局部刷新,不用全部刷新,这意味着请求可以请求网页的某一部分数据,而不用请求整个页面,减轻了服务器的带宽压力。举个例子:分页的实现,以前是依靠php来实现的,每一次点击页码,整个网页会进行全部刷新,会从服务器请求整个页面;现在采用ajax技术后,可以异步请求数据,每一次点击页码,可以不用向服务器请求整个页面,只需要请求一串json数据,然后通过js的模版来更换页面的局部内容,也可以达到同样效果,这样一来,服务器的带宽压力会减轻,也有利于用户的体验,甚至可以通过预加载,提前请求,在用户不知不觉中,已经根据用户的行为预判,请求好数据,当用户点击切换时,不需要等待。

我觉得现在的网页已经离不开ajax。ajax非常的好用,但由于浏览器的兼容性问题,在IE5和IE6中使用ActiveXObject对象,其他所有现代浏览器均支持XMLHttpRequest对象,使用原生的js写法来使用ajax是非常麻烦的,JQuery里就很好的封装了一个ajax方法,方便大家使用,当然我们也可以自己封装一个,由于我个人喜欢使用原生的js,对于jq的了解不深,每次使用是使用自己封装的ajax函数。

下面是我封装的ajax库

一、ajax兼容性处理

因为ajax在IE5和IE6下使用的是ActiveXObject对象,所以我封装了一个函数来进行判断,下面的这个封装函数较为复杂,做的判断比较多,也可以采用简单的判断方式,只需要判断当前浏览器支持的对象是ActiveXObject或者是XMLHttpRequest 。

复杂的写法

简单的写法

ps:我个人觉得,这个判断可以根据自己的需求,一般情况下不需要判断,因为现在IE5和IE6的使用率太低了,如果规定要做这个判断,可以使用这个函数来判断。

二、ajax的封装函数

因为ajax是一个异步请求的方法,如果需要在请求完毕后执行某段代码,只能是通过回调函数来执行。

ps:如果前端往后端请求的方式是POST,则需要携带当前的data数据,而这个数据的格式有很多种,可以是普通字符串,也可以是json对象字符串,需要单独处理后才能传入这个函数,也可以在这个函数里进行处理,但会使函数变得十分复杂,我倾向于单独处理后传入。

三、调用函数的示例:

采用对象传参的方式,多个数据一般是采用对象来传参

使用GET的方式,往ajax.php文件请求,返回的数据类型是text文本类型,不执行JSON.parse()方法,onsuccess是ajax请求成功后需要执行的代码,可以放在这里面;onerror是ajax请求失败后的执行函数,一般是请求超时或请求不存在时会执行这里的代码。

到这里,最基础的ajax的封装函数基本完毕,这个函数只是处理简单的ajax请求,还有很多地方没有写到。

例如:

1、请求超时timeout的判断

2、data数据进行的处理

四、data数据处理的函数

1、将数据转为字符串

例子:

控制台的打印结果:

ps:为什么中文字的“男”变成了“%E7%94%B7”,是encodeURIComponent这个函数的作用,使用这个函数可以编译特殊字符,例如&,当使用&作为参数值传入时不会被当做分隔符,而是当做是数据中的一部分。

encodeURIComponent---W3C的官方文档解释

2、将数据转为json字符串

JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

总结:ajax的使用灵活多变,一时之间,我很难想到该怎样写才比较清楚的写好ajax方面的东西,我觉得这个函数应该已经足够平时学习使用了,这是我参照网上的教程以及平时自己的使用的经验总结的一个函数,这个函数存在着许多能改进的地方,但我的水平还不到,等学的更加深入了,我会重新封装这个函数。这个函数是按照我的使用习惯和思维来封装的,有什么不对的地方,请留言告诉我。我觉得封装一个函数库是学习js的最好途径,可以学到很多东西。

谢谢观看

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180715G1CH4U00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券