一、ajax是什么?
ajax: asynchronous javascript and xml: 异步的javascript和xml。
ajax是一种用来改善用户体验的技术，其本质是利用浏览器内置的一种特殊的对象(XMLHttpRequest)异步(即发送请求时，浏览器不会销毁当前页面，用户可以继续在当前页面做其它的操作)的向服务器发送请求,并且利用服务器返回的数据(不再是一个完整的页面，只是部分的数据，一般使用文本或者xml返回)来部分更新当前页面。
使用ajax技术之后，页面无刷新，并且不打断用户的操作。
二、ajax编程的基本步骤
- 获取ajax对象(XmlHttpRequest)
- 使用 XmlHttpRequest向服务器发送请求
- 在服务器端处理请求
- 在监听器当中，处理服务器返回的响应
其中：ajax对象的属性
a. onreadystatechange: 绑订一个事件处理函数(即: 注册一个监听器)
当ajax对象的readyState值发生了改变(比如， 从0-->1)，就会产生readystatechange事件。
b. responseText: 获得服务器返回的文本
c. responseXML: 获得服务器返回的XML dom对象
d. status: 获得状态码
e. readyState: 返回ajax对象与服务器通讯的状态。返回值是一个number类型的值，不同的值表示不同的含义:
0: (为初始化) --> 对象已建立，但是尚未初始化(尚未调用 open方法)
1: (初始化) --> 对象已建立，尚未调用send方法
2: (发送数据) --> send方法已调用
3: (数据传送中) --> 已接受部分数据
4: (响应结束) --> 接收了所有的数据
三. 选择POST还是GET
如果请求不改变服务器状态只是取回数据则使用GET.GET请求被缓存起来,如果多次提取相同的数据可提高性能;只有当URL和参数的长度大于2048个字符时才使用POST提取数据在IE下URL过长会导致请求参数被截断;
完整封装代码：
//小工具函数，把Json对象转URL字符串；
function json2url(json){
json.t = Math.random();
var arr = [];
for(var name in json){
arr.push(name+'='+encodeURIComponent(json[name]));
}
return arr.join('&');
}
//Aja函数封装，接收一个Json对象
/*
url:服务器地址
data：数据
type：发送方式，默认GET
timeout:超时时间，默认5s
success:成功回调函数
error:失败回调函数
*/
function ajax(json){
var json = json||{};
if(!json.url)return;
json.data = json.data || {};
json.type = json.type || 'get';
json.timeout = json.timeout || 5000;
//获取Ajax对象，XMLHttpRequest并没有标准化，要区分浏览器
if(window.XMLHttpRequest){
//非IE浏览器
var oAjax = new XMLHttpRequest();
}else{
//IE浏览器
var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}
switch(json.type.toLowerCase()){
case 'get':
oAjax.open('GET',json.url+'?'+json2url(json.data),true);
oAjax.send();
break;
case 'post':
oAjax.open('POST',json.url,true);
//因为按照http协议的要求，如果发送的post请求，请求数据包里面，应该有一个消息头 content-type。但是，ajax对象默认没有，所以，需要调用setRequestHeader方法。
oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
oAjax.send(json2url(json.data));
break;
}
var timer = setTimeout(function(){
oAjax.onreadystatechange=null;
json.error&&json.error('亲，网络不给力');
},json.timeout);
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
clearTimeout(timer);
if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
json.success&&json.success(oAjax.responseText);
}else{
json.error&&json.error(oAjax.status);
}
}
};
}
