function createXHR(){
if(XMLHttpRequest){
//IE7+、FireFox、Chrome、Safari等
return new XMLHttpRequest();
}
//IE6
return new ActiveXObject('Microsoft.XMLHTTP');
}
var xhr = createXHR();
一个完整的Ajax事例:
function createXHR(){
if(XMLHttpRequest){
return new XMLHttpRequest();
}
return new ActiveXObject('Microsoft.XMLHttp');
}
var xhr = createXHR();
xhr.onreadystatechange = function(){
console.log(xhr.readyState);
console.log(xhr.status);
if(xhr.readyState == 4 && xhr.status == 200){
console.log('xhr.responseText',xhr.responseText); //返回请求的数据
console.log('statusText',xhr.statusText); //OK
console.log('responseXML',xhr.responseXML); //null
}else {
console.log('数据返回失败!状态代码:'+xhr.status,'状态信息:'+xhr.statusText);
}
}
xhr.open('get','http://www.weather.com.cn/data/sk/101010100.html',false);
xhr.send(null);
使用ajax的四步骤:
- var xhr = new XMLHttpRequest();
- xhr.open(‘get/post’,‘url’,false);
- xhr.send(null);
- xhr.onreadystatechange = function(){}
提问:
1.xhr.send(null); send()方法中的参数是什么?
书中是这样回答的:
这里的send()方法接受一个参数,即要作为请求主体的数据。如果不需要通过请求主体发送数据,则必须传null,因为这个参数对于有些浏览器是必须的。调用send() 之后,请求就会被分派到服务器。
由于这次请求是同步的,JavaScript代码会等到服务器响应之后再继续执行。在收到响应之后,响应的数据会自动填充XHR对象的属性,相关的属性简介如下:
- responseText(作为响应主体被返回的文本)
- responeseXML(如果响应的内容是‘text/xml’或者‘application/xml’,这个属性将保存着响应数据的XML DOM文档)
- status (响应的HTTP状态)
- statusText(HTTP状态说明)
像前面这样同步发送当然没有任何问题, 但多数情况下是要发送异步操作,才能让JavaScript继续执行而不必等待响应。此时可以检测XHR对象的readyState属性,该属性表示请求/响应过程的当前活动阶段。
值 | 状态 | 说明 |
---|---|---|
0 | 未初始化 | 尚未调用open方法 |
1 | 启动 | 调用open方法,未调用send方法 |
2 | 发送 | 调用send方法,但未收到响应 |
3 | 接收 | 收到部分数据 |
4 | 完成 | 收到全部数据,而且已经在客户端使用了 |