AJAX创建XMLHttpRequest对象

当前所有的主流浏览器都支持XMLHttpRequest对象。

此对象可以用来在后台与服务器进行数据交换。于是也就使异步更新网页内容成为可能，不用刷新整个页面。

特别说明：IE5和IE6使用ActiveXObject。

创建XMLHttpRequest对象方式如下：

var xmlhttp;
   //IE7和IE7以上或者其他标准浏览器
   if (window.XMLHttpRequest) {
       xmlhttp=new XMLHttpRequest();
   }
   //如果是IE5和IE6浏览器
   else{
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }

AJAX的post或者get服务器请求：
XMLHttpRequest对象用于和服务器交换数据。

如果想要将请求发送给服务器，需要使用XMLHttpRequest对象的open()和send()方法。

属性	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 （1）.method:请求的类型；GET或POST。 （2）.url:文件在服务器上的位置。 （3）.async:true（异步）或 false（同步）。
send(string)	将请求发送到服务器。 string:仅用于 POST 请求

一、get和post区别

get方法可能速度比较快，并且适用性也很强，但是很多时候还是需要用post。

推荐使用post方式的场景如下：

（1）不期望使用缓存文件（更新服务器上的文件或数据库）。

（2）向服务器发送大量的数据（POST没有数据量限制）。

（3）发送包含未知字符的用户输入时，POST比GET更稳定也更可靠。

二、get方式

function loadXMLDoc(){
   var xmlhttp;
   //IE7和IE7以上或者其他标准浏览器
   if (window.XMLHttpRequest) {
       xmlhttp=new XMLHttpRequest();
   }
   //如果是IE5和IE6浏览器
   else{
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=function(){
       if(xmlhttp.readyState==4&&xmlhttp.status==200){
           document.getElementById("show").innerHTML=xmlhttp.responseText;
       }
   }
   xmlhttp.open("get","welcome.php",true);
   xmlhttp.send();
}
window.onload=function(){
    var obt=document.getElementById("bt");
    obt.onclick=function(){
        loadXMLDoc();
    };
}

特别说明：上面的方式在IE浏览器可能会从浏览器中读取数据，也就是说当第一次点击按钮正常获取时间日期后，以后的点击会没有任何效果，在谷歌或者火狐等浏览器中并没有此问题，解决方法是在url后面添加一个随机数就可以了，这样每次请求都被认为是一个新的url，于是就不会缓存了

三、POST请求

function loadXMLDoc(){
   var xmlhttp;
   //IE7和IE7以上或者其他标准浏览器
   if (window.XMLHttpRequest) {
       xmlhttp=new XMLHttpRequest();
   }
   //如果是IE5和IE6浏览器
   else{
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=function(){
       if(xmlhttp.readyState==4&&xmlhttp.status==200){
           document.getElementById("show").innerHTML=xmlhttp.responseText;
       }
   }
   xmlhttp.open("post","welcome.php",true);
   xmlhttp.send();
}
window.onload=function(){
    var obt=document.getElementById("bt");
    obt.onclick=function(){
        loadXMLDoc();
    };
}

上面的代码利用post方式获取服务器的当前时间日期，不存在使用get方式的缓存问题。

如果需要像HTML表单那样POST数据，可以使用setRequestHeader()来添加HTTP头，然后在send()方法中规定发送的数据：

function loadXMLDoc(){
   var xmlhttp;
   //IE7和IE7以上或者其他标准浏览器
   if (window.XMLHttpRequest) {
       xmlhttp=new XMLHttpRequest();
   }
   //如果是IE5和IE6浏览器
   else{
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=function(){
       if(xmlhttp.readyState==4&&xmlhttp.status==200){
           document.getElementById("show").innerHTML=xmlhttp.responseText;
       }
   }
   xmlhttp.open("post","welcome.php",true);
   xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   xmlhttp.send("webName=php中文网&age=3");
}
window.onload=function(){
    var obt=document.getElementById("bt");
    obt.onclick=function(){
        loadXMLDoc();
    };
}

AJAX的true异步或者false同步

AJAX指的是异步 javascript 和 XML（Asynchronous JavaScript and XML）。

这对于web开发来说是一个非常大的进步，可以有效的提高网站的人性化程度，在此之前，如果有比较费时的请求操作，必然会引起程序挂起和停止的现象，那么使用ajax的异步操作就无需等待服务器的响应，而是进行如下的操作：

（1）在等待服务器响应时执行其他脚本。

（2）当响应就绪后对响应进行处理。