JavaScript之ajax

ajax可以异步加载，在不刷新整个网页的情况下和服务端交互信息并更新页面的一个部分。主要有两种请求方式：get和post。

由于ie6以上才支持XMLHttpRequest所以在声明对象的时候最好如下这种方式声明：
if(window.XMLHttpRequest){
   var xhr = new XMLHttpRequest();
}else{
   var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
创建对象之后连接服务器：
xhr.open('GET','服务端代码的地址?keyword=c&user_name=mike&age=20',true);

然后发送请求：
xhr.send();

然后接受返回值：

xhr.onreadystatechange=function(){
    if(xhr.readyState==4){
        if(xhr.status==200){
            alert(xhr.responseText);
        }else{
            alert("failed")
        }
    }
};

如果用set方法那么就是上面的写法，将传递的参数放在url里面，多个参数之间用 & 连接。
如果是post方法：

xhr.open("POST","ajax.php",true);
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send("key1=x&key2=q&key3=w");
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    alert(xhr.responseText);
                }
            }

上面服务端的代码在ajax.php里面，用post方法需要添加setRequestHeader方法，里面的写法就是上面所示。要传递的参数放在send方法里面。

 

get方法：速度快，传递的数据大小只有4kb，适用于小数据量的传递，传递的参数会暴露在url里面。

post方法：容量几乎无限，大多数情况下用于上传数据。