ajax基本原理及步骤

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传输