Ajax是无需刷新页面就能够从服务器取得数据的一种方法。
1、XMLHttpRequest对象 各浏览器(包括ie7+)都支持原生的XHR对象,在这些浏览器中创建XHR对象可以:
var xhr=new XMLHttpRequest();
ps:个人觉得现在写一个跨浏览器兼容的函数方法没必要,兼容做到ie7+就够了
2、XHR的用法 ①open( )方法 接受三个参数:第一个参数是要发送的请求的类型(“get”、“post”等);第二个参数是请求的URL(文件);第三个参数表示是否(true/false)异步发送请求的布尔值。
var xhr=new XMLHttpRequest();
xhr.open("get","example.txt",false);
②send( )方法 要发送特定的请求,必须像下面这样调用send( )方法
var xhr=new XMLHttpRequest();
xhr.open("get","example.txt",false);
xhr.send(null);
调用send以后,请求就会被分派到服务器,且由于这次请求是同步的(false),所以js代码会等到服务器响应之后再继续执行。 在收到响应以后,响应的数据就会自动填入到XHR对象的几个属性中去。
③XHR对象的属性
var xhr=new XMLHttpRequest();
xhr.open("get","./example.txt",false);
xhr.send(null);
if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
alert(xhr.responseText);
}else{
alert("Request was unsuccessful:"+xhr.status);
}
ps:chrome浏览器不支持本地的异步请求,所以本地测试请换其他浏览器
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState == 4){
if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
alert(xhr.responseText);
}else{
alert("Request was unsuccessful:"+xhr.status);
}
}
};
xhr.open("get","example.txt",true);
xhr.send(null);