Ajax原理： 通过XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM从而更新页面。
XMLHttpRequest： XMLHttpRequest是ajax核心机制，IE5中首先引入，是一种异步请求的技术，简单的来说，也就是javascript可以及时向服务器请求和处理响应，而不阻塞用户，达到无刷新的效果。
步骤：
1：创建XMLHttpRequest对象，也就是创建一个异步调用对象
2：建立连接
3：发送请求
4：设置函数监控状态，接收数据。
//ajax({
// url:'',//地址
// success:function(){},//成功的回调函数
// data:{},//传送的数据
// type:'',//请求类型
// error:function(){},//失败的回调函数
// time:3000//设置超时时间
//});
function ajax(json){
if(!json.url){
alert('请输入正确的url！')
return;
}
json.type=json.type || 'get';
json.data=json.data || {};
json.time=json.time || 3000;
var timer=null;
//创建ajax对象
if(window.XMLHttpRequest){
var oAjax=new XMLHttpRequest();
}else{
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
switch (json.type.toLowerCase()){
case 'get':
oAjax.open('GET',json.url+'?'+json2Str(json.data),true);
oAjax.send();
break;
case 'post':
oAjax.open('POST',json.url,true);
//设置请求头
oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
oAjax.send(json2Str(json.data));
break;
}
//监控状态
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
if(oAjax.status>=200&&oAjax.status<300 || oAjax.status==304){
json.success && json.sunccess(oAjax.responseText);
}else{
json.error && json.error(oAjax.status);
}
clearTimeout(timer);
}
};
timer=setTimeout(function(){
alert('请求超时!');
oAjax.onreadystatechange=null;
},json.time);
};
function json2Str(json){
json.t=Math.random();
var arr=[];
for (var name in json) {
arr.push(name+'='+json[name]);
}
return arr.join('&');
}
ajax常用的属性和方法：
属性
readyState
status
responseText
onreadystatechange
方法
open
send
setRequestHeader
abort 放弃
常见的状态码：
200 一切正常(ok)
304 没有被修改(not modified)
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
同步和异步的区别
同步 一次只干一件事
异步 一次干多件事
get 和 post
get 32k 不安全 易于分享 数据 通过url传输
post 1G 相对安全 不易于分享 不通过url传输
