前端：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的最好途径，可以学到很多东西。

谢谢观看