学习要点
1 XMLHttpRequest
2 GET与POST
3 封装Ajax
Ajax技术核心是XMLHttpRequest，简称为XHR。
XHR的出现，意味着，用户只要触发某事件，在不刷新网页的情况 下，更新服务器最新的数据。
虽然Ajax中的X代表的是XML，但Ajax通信和数据格式无关，也就是说这种技术 不一定使用XML.
var xhr= new XMLHttpRequest();
alert(xhr); //XMLHttpRequest
//服务端测试
如果是IE6及以下，那我们必须还需要使用ActiveX库来实现。在低版本IE浏览器可能会遇到三种不同版本的XHR对象 ，即MSXML2.XMLHttp MSXML2.XMLHttp.3.0 MSXML2.XMLHttp6.0 . 我们可以写一个函数。
function createXHR(){
if(typeof XMLHttpRequest != 'undefined'){
return new XMLHttpRequest();
}else if (type of ActiveXObject !='undefined'){ //IE6
var versions=[
'MSXML2.XMLHttp.6.0',
'MSXML2.XMLHttp.3.0',
'MSXML2.XMLHttp'
];
for(var i =0; version.length;i++){
try{
return new ActiveXObject(version[i])
}catch(e){
//跳过
}
}
}else{
throw new Error('您的系统或浏览器不支持XML对象');
}
}
var xhr=createXHR();
alert(xhr);
在使用XHR对象时，先必须调用 open()方法，它接受三个参数 ：
要发送的请求类型(get post).请求的URL和表示是否异步.
xhr.open('get','demo.php',false); //对于demo.php的get请求，false同步
open()方法并不会真正的发送请求，而只是启动一个请求以备发送。通过send()方法进行发送请求，send()方法接受一个参数 ，作为请求主体发送的数据。如果不需要则 必须填为null.执行send()方法之后，请求就会发送到服务器上。
xhr.send(null);//发送请求
addEvent(document,'click',function(){
var xhr=createXHR();
xhr.open('get','demo.php',false);
xhr.send(null);
alert(xhr.responseText);
});
PS:demo.php的代码如下
<?php echo Date('Y-M-D H:i:s')?> //一个时间
//PS:通过点击事件，不断的向服务器发送请求，然后服务器会时时的返回最新的数据。就是AJAX的功能。IE浏览器第一次会向服务器端请求，获取最新数据，而第二次它就默认获取的缓存数据，导致数据不是最新的。怎么处理缓存，可以使用JS随机字符串
addEvent(document,'click',function(){
var xhr=createXHR();
xhr.open('get','demo.php?rand='+Math.random,false);
xhr.send(null);
alert(xhr.responseText);
});
当请求发送到服务器端，收到响应后，响应的数据会自动填充XHR对象的属性。那么 一共有四个属性：
responseText, responseXML,status,statusText
接受响应后，第一步检查status属性，以确定响应以经成功返回，一般而已HTTP状态码为200作为成功的标志。除了成功的状态代码 ，还有一些别的：400，401，
addEvent(document,'click',function(){
var xhr=createXHR();
xhr.open('get','demo.php?rand='+Math.random,false);
xhr.send(null);
if(xhr.status == 200){
alert(xhr.responseText);
}else{
alert{'获取数据错误！ 错误代码：'+xhr.status + '错误信息'+xhr.statusText};
}
});
我们判断HTTP状态值即可，不建议使用HTTP状态说明 ，因为跨浏览器的时候 ，可能会不太一致。
