第21章ajax与Comet
本章内容
*使用XMLHttpRequest对象
*使用XMLHttpRequest事件
*跨域Ajax通信的限制
ajax是对Asynchronous JavaScript+XML的简写。这一技术能够向服务器请求额外的数据而无需卸载页面。
ajax技术的核心是XMLHttpRequest对象(简称XHR),可以使用XHR对象获取新数据,然后再通过DOM将新数据插到页面中。
使用XMLHttpRequest构造函数
var xhr = new XMLHttpRequest();
调用这个方法
xhr.open("get","example.txt",false);
xhr.send(null);
这里的send()方法接收一个参数,即要作为请求主体发送的数据。如果不需要通过请求主体发送数据,则必须传入null,因为这个参数对于有些浏览器是必需的。调用send()之后,请求就会被分派到服务器。
由于这次请求时同步的,JavaScript代码会等到服务器响应之后再继续执行。在收到响应后,响应的数据会自动填充XHR对象的属性。
*responseText:作为响应主体被返回的文本。
*responseXML:如果响应的是”text/xml”或”application/xml”,这个属性中将保存着响应数据的XML DOM文档。
*status:响应的HTTP状态。
*statusText:HTTP状态的说明。
在接收到响应后,第一步是检查status属性,以确定响应已经成功返回。一般来说,可以将HTTP状态代码为200作为成功的标志。304表示请求的资源并没有被修改,可以直接使用浏览器中缓存的版本。
多数情况,要发送异步请求,才能让JavaScript继续执行而不必等待响应。同城,支队readyState值为4,所有数据都已经就绪。必须在调用open()之前制定onreadystatechange时间处理程序才能保证浏览器兼容性。
var xhr = createXHR();
xhr.onreadystatechange = function(){
if(xhr.readystate == 4){
if((xhr.status>=200 && xhr.status<300)||xhr.status == 304){
alert(xhr.responseText);
}else{
alert("request was successful:"+xhr.status);
}
}
};
xhr.open("get","example.txt",true);
xhr.send(null);
在接收响应之前还可以调用abort()方法来取消异步请求。
xhr.abort()
HTTP头部信息
*accept:浏览器能够处理的内容类型。
*connection:浏览器与服务器之间连接的类型。
*cookie:当前页面设置的任何cookie。
*host:发出请求的页面所在的域。
*referer:发出请求的页面的url。
其他跨域技术:
1.图像Ping
图像Ping是与服务器进行简单、单向的跨域通信的一种方式。响应可以是任何内容,通常是像素图或204响应。通过图像Ping,浏览器得不到任何具体的数据,可以通过监听load和error事件,能知道响应是什么时候接收到的。
var img= new Image();
img.onload = img.onerror = function(){
alert("done");
};
img.src = "http://www.example.com/...";
图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。有两个缺点,一是只能发送GET请求,二是无法访问服务器的响应文本。只能用于浏览器与服务器间的单向通信。
2.JSONP
JSONP是JSON with padding (填充式JSON或参数式JSON)的简写,看起来和JSON差不多,只不过是被包含在函数调用的函数。
callback({"name":"nicholas"});
JSONP由两部分组成:回调函数和数据。
http://freegeoip.net/json/?callback=handlePesponse
这个地址是在请求一个jsonp地理定位服务,这里指定的回调函数的名字是handlePesponse()
JSONP是通过动态<script>
元素来使用的,使用时可以为src属性制定一个跨域URL,可以不受限制的从其他域加载资源。因为JSONP是有效的JavaScript代码,所以在请求完成后,即在JSONP响应加载到页面中以后,就会立即执行。
function handleResponse(response){
alert("you are at ip address"+response.ip+",which isin"+response.city+", "+response.region_name);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);