Ajax
Ajax（Asynchronous Javascript And XML） 即异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术。与以往传统网页相比，Ajax在更新网页时，不需要重新加载网页的情况下，更新部分网页内容。这样的方式可以给我们带来更好的客户体验！当然，Ajax也有同步请求方式，只是用的更多的是异步请求方式。那么下面在介绍是主要以异步为主。
首先，一项值得推广的技术在普及过程，为了更方便管理维护，当然是要将它封装成一个函数啦！在这个深入学习的过程，根据需求不断优化，Ajaxy有了五个版本的封装。下面逐一介绍：
Ajax-1.0
初级阶段只是用于简单求取数据 很多数据均用默认方式，比如GET请求方法、异步请求方式、单一的回调函数等。
/************************************************************************
* 函数：ajax
* 功能：请求数据
* 参数：
* url 请求数据的地址
* callback 回调函数 一般用于处理请求回来的数据
************************************************************************/
function ajax(url, callback) {
//1.创建对象
var xhr = new XMLHttpRequest();
//2.准备
xhr.open("GET", url, true);
//3.发送
xhr.send();
//4.收获数据
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var str = xhr.responseText;
callback && callback(str);
}
}
}
Ajax-2.0
毕竟考虑到Ajax的完整性，让其具有更广泛的应用，于是有了2.0版本。 那么在传参数时，只需要传一个对象obj即可。
/*****************************************************************************
* 参数：
* obj 是1个对象，代表参数的集合，里面有很多参数，如下所示：
* method 请求数据的方式，GET、POST
* url 请求的地址与参数
* data 发送的数据
* async 是否是同步, true / false
* fail 失败的处理回调函数
* success 成功的处理回调函数
****************************************************************************/
function ajax(obj) {
//默认GET方法
if (obj.method == undefined) {
obj.method = "GET";
}
//默认异步请求方式
if (obj.async == undefined) {
obj.async = true;
}
if (obj.data == undefined) {
obj.data = "";
}
var xhr = new XMLHttpRequest();
gkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk//设置请求地址
var url = obj.url;
if (obj.method == "GET") {
url += "?"
url += obj.data;
}
xhr.open(obj.method, url, obj.async);
if (obj.method == "POST") {
//请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(obj.data)
} else {
xhr.send()
}
//异步请求时
//hr.readyState == 4 是表示后台处理完成了。 xhr.status == 200 是表示处理的结果是OK的。
if (obj.async == true) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {//4 (完成)：已经接收到了全部数据，并且连接已经关闭。
if (xhr.status == 200) {// 服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
var str = xhr.responseText;//保存获取的数据
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
} else {
// 同步方式
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
Ajax-3.0
到第三个版本，我们不再使用函数封装的方式，而是将Ajax定义为一个对象，并将GET和POST定义为两种方法，那么可以根据需求调用任一种方法，与此类似的方法也可以这样定义，那么在使用时就可以根据需求调用对应的方法，并且还可以在Ajax里面定义对象。
//定义一个对象
var ajax = {}
// 增加1个方法： get方法
/*******************************************************************************
* 参数：
* obj 是1个对象，代表参数的集合，里面有很多参数，如下所示：
* url 请求的地址与参数
* data 发送的数据
* async 是否是同步, true / false
* fail 失败的处理回调函数
* success 成功的处理回调函数
******************************************************************************/
ajax.get = function() {
//默认异步请求方式
if (obj.async == undefined) {
obj.async = true;
}
if (obj.data == undefined) {
obj.data = "";
}
var xhr = new XMLHttpRequest();
var url = obj.url;
url += "?"
url += obj.data;
xhr.open("GET", url, obj.async);
xhr.send()
if (obj.async == true) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
} else {
// 同步方式
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
// 增加1个方法： post方法
/*******************************************************************************
* 参数：
* obj 是1个对象，代表参数的集合，里面有很多参数，如下所示：
* url 请求的地址与参数
* data 发送的数据
* async 是否是同步, true / false
* fail 失败的处理回调函数
* success 成功的处理回调函数
******************************************************************************/
ajax.post = function() {
if (obj.async == undefined) {
obj.async = true;
}
if (obj.data == undefined) {
obj.data = "";
}
var xhr = new XMLHttpRequest();
var url = obj.url;
xhr.open("GET", url, obj.async);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(obj.data)
if (obj.async == true) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
} else {
// 同步方式
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
Ajax-4.0
用对象封装函数则考虑一个变量被覆盖的问题，因为在调用方法时，我们并不清楚，Ajax中有用了哪些 变量，考虑到HTML文件与Ajax变量名相同而影响到对象的情况存在，例如下面a，下面采用面向对象的形式封装。于是有了下一个4.0版本。
// 函数封装的是代码，采用面向对象的形式封装
(function () {
var a = 100;
// 暴露出ajax接口
ajax = window.ajax = {}
// 增加1个方法： get方法
/*******************************************************************************
* 参数：
* obj 是1个对象，代表参数的集合，里面有很多参数，如下所示：
* url 请求的地址与参数
* data 发送的数据
* async 是否是同步, true / false
* fail 失败的处理回调函数
* success 成功的处理回调函数
*****************************************************************************/
ajax.get = function() {
if (obj.async == undefined) {
obj.async = true;
}
if (obj.data == undefined) {
obj.data = "";
}
var xhr = new XMLHttpRequest();
var url = obj.url;
url += "?"
url += obj.data;
xhr.open("GET", url, obj.async);
xhr.send()
if (obj.async == true) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
} else {
// 同步方式
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
// 增加1个方法： post方法
/******************************************************************************
* 参数：
* obj 是1个对象，代表参数的集合，里面有很多参数，如下所示：
* url 请求的地址与参数
* data 发送的数据
* async 是否是同步, true / false
* fail 失败的处理回调函数
* success 成功的处理回调函数
*****************************************************************************/
ajax.post = function() {
if (obj.async == undefined) {
obj.async = true;
}
if (obj.data == undefined) {
obj.data = "";
}
var xhr = new XMLHttpRequest();
var url = obj.url;
xhr.open("POST", url, obj.async);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(obj.data)
if (obj.async == true) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
} else {
// 同步方式
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
})();
Ajax-5.0
做到第四个版本时候，我们就发现，在传入一个对象的过程，由于对象地址拼接过程比较复杂，也比较长，稍一个不注意就会出错，为了解决这个问题，我们又想到了对象，传入地址的键值对以对象的方式传，在对象Ajax中增加一个方法，用于拼接地址。于是就是下面的5.0版本出炉。
(function () {
// 暴露出ajax接口
ajax = window.ajax = {}
// 增加1个方法： get方法
/*********************************************************************************
* 参数：
* obj 是1个对象，代表参数的集合，里面有很多参数，如下所示：
* url 请求的地址与参数
* data 发送的数据, 要求格式是 对象
* 例如 {type:"send"} ， {type:"send", msg: "GG啦~"}
* async 是否是同步, true / false
* fail 失败的处理回调函数
* success 成功的处理回调函数
*********************************************************************************/
ajax.get = function(obj) {
if (obj.async == undefined) {
obj.async = true;
}
if (obj.data == undefined) {
obj.data = "";
}
var xhr = new XMLHttpRequest();
var url = obj.url;
url += "?";
// translate 自定义的函数，将对象 转换成拼接字符串
url += translate(obj.data);
xhr.open("GET", url, obj.async);
xhr.send()
if (obj.async == true) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
} else {
// 同步方式
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
// 增加1个方法： post方法
/*******************************************************************************
* 参数：
* obj 是1个对象，代表参数的集合，里面有很多参数，如下所示：
* url 请求的地址与参数
* data 发送的数据
* async 是否是同步, true / false
* fail 失败的处理回调函数
* success 成功的处理回调函数
******************************************************************************/
ajax.post = function(obj) {
if (obj.async == undefined) {
obj.async = true;
}
if (obj.data == undefined) {
obj.data = "";
}
var xhr = new XMLHttpRequest();
var url = obj.url;
xhr.open("POST", url, obj.async);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(obj.data)
if (obj.async == true) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
} else {
// 同步方式
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
// 定义函数
function translate(obj) {
var str = "";
for (var i in obj) {
str += i; // 拼接属性名 type
str += "="; // 拼接= =
str += encodeURIComponent(obj[i]) // 拼接属性值 send
str += "&"; // 拼接& &
}
// 删除最后1个字符
str = str.substr(0, str.length-1);
return str;
}
// 调用函数，因为定义和调用在同一个空间，这是可以调用的
// translate({})
})();
那么，往后还是可以不断优化，让Ajax更普及。值得注意的是，Ajax每使用一次，就会发送一次请求，于是可以在全局定义一个数组，用于存放请求来的信息，执行前先来一个判断，当该数组有值时，不需再请求，而是直接使用，那么久节省了内存，nice!
网友评论