在开发过程中ajax是必须的，对近期在ajax的使用上的心得进行总结。
一、关于ajax
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。即ajax可以通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。ajax工作原理.png
//原生ajax实例
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 建立XMLHttpRequest实例
xmlhttp=new XMLHttpRequest();
} else {
// IE6, IE5 建立XMLHttpRequest实例
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 监听onreadystatechange事件
xmlhttp.onreadystatechange= fuction(){
// 当readyState=4请求已完成，且响应已就绪；当status=200是，通信成功
if (xmlhttp.readyState==4 && xmlhttp.status==200){
console.log(xmlhttp.responseText);
}
};
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。 onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。readyState 属性存有 XMLHttpRequest 的状态信息。
readyState 属性所对应的信息
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成
在请求已完成，且状态码（status）为200时，表示响应已就绪。
不同的状态码对应不同的信息，请求状态。
| 状态码 | 信息 |
|---|---|
| 100 | 客户必须继续发出请求 |
| 101 | 客户要求服务器根据请求转换HTTP协议版本 |
| 200 | 交易成功 |
| 201 | 提示知道新文件的URL |
| 202 | 接受和处理、但处理未完成 |
| 203 | 返回信息不确定或不完整 |
| 204 | 请求收到，但返回信息为空 |
| 205 | 服务器完成了请求，用户代理必须复位当前已经浏览过的文件 |
| 206 | 服务器已经完成了部分用户的GET请求 |
| 300 | 请求的资源可在多处得到 |
| 301 | 删除请求数据 |
| 302 | 在其他地址发现了请求数据 |
| 303 | 建议客户访问其他URL或访问方式 |
| 304 | 客户端已经执行了GET，但文件未变化 |
| 305 | 请求的资源必须从服务器指定的地址得到 |
| 306 | 前一版本HTTP中使用的代码，现行版本中不再使用 |
| 307 | 申明请求的资源临时性删除 |
| 400 | 错误请求，如语法错误 |
| 401 | 请求授权失败 |
| 402 | 保留有效ChargeTo头响应 |
| 403 | 请求不允许 |
| 404 | 没有发现文件、查询或URl |
| 405 | 用户在Request-Line字段定义的方法不允许 |
| 406 | 根据用户发送的Accept拖，请求资源不可访问 |
| 407 | 类似401，用户必须首先在代理服务器上得到授权 |
| 408 | 客户端没有在用户指定的时间内完成请求 |
| 409 | 对当前资源状态，请求不能完成 |
| 410 | 服务器上不再有此资源且无进一步的参考地址 |
| 411 | 服务器拒绝用户定义的Content-Length属性请求 |
| 412 | 一个或多个请求头字段在当前请求中错误 |
| 413 | 请求的资源大于服务器允许的大小 |
| 414 | 请求的资源URL长于服务器允许的长度 |
| 415 | 请求资源不支持请求项目格式 |
| 416 | 请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段 |
| 417 | 服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求 |
| 500 | 服务器产生内部错误 |
| 501 | 服务器不支持请求的函数 |
| 502 | 服务器暂时不可用，有时是为了防止发生系统过载 |
| 503 | 服务器过载或暂停维修 |
| 504 | 关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长 |
| 505 | 服务器不支持或拒绝支请求头中指定的HTTP版本 |
二、ajax二次封装及使用
原生的ajax使用比较繁杂，所以通常在开发的过程中会使用其他框架封装好的ajax。最为常见的是jQuery封装的ajax。
最新版本的jQuery把ajax封装成了下面的形式：
$.ajax({
url: '/path/to/file',//请求地址
type: 'default GET (Other values: POST)',//请求类型
dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',//数据类型
data: {param1: 'value1'},//请求提交的数据
}).done(function(data) {//请求成功执行的函数
console.log("success");
console.log(data);
}).fail(function(error) {//请求失败执行的函数
console.log(error);
}).always(function() {//无论成功失败都会执行的函数
console.log("complete");
});
而我们一般在是用的时候会这个基础上进行适合自己的二次封装
(function($){
$.extend({
/**
* @desc ajax.post 封装
* @param url 发送请求的地址
* @param data 发送到服务器的数据
* @param successfn 成功回调函数
*/
FiveAjax:function(type,url, data, successfn) {
console.log(url);
console.log(data);
$.ajax({
type: type ,
async: 'true' ,
data: data ,
url: url ,
dataType: 'json' ,
success: function(d) {
// 网络正确
successfn(d);
},
error: function(e) {
// 网络错误
console.error(e);
//错误提示弹出层
var err = '<br>' + '网络错误' + '<br>' + 'statusCode : ' + e.status + '<br>' + 'statusText : ' + e.statusText ;
layer.msg( err ,{
icon: 2 ,
time : 30000 ,
btn: ['确定']
});
}
});
}
})
})(jQuery);
这样使用起来就很简单了，
$.FiveAjax('post','user/login',{
username:'admin',
password:'test
'},function(data){
console.log('通信成功，返回的数据是'+data);
});
有时候，你必须一个人走，这不是孤独，而是选择。
网友评论