有时可以不关心接收数据,只要将数据发送给服务器即可。可以发送用户的非私有信息以备日后分析,或者捕获所有脚本错误,然后将有关细节发送给服务器进行记录和提示。当数据只需发送给服务器时,有两种应用得非常广泛的技术:XHR和灯标。
(1)XHR
XHR主要用于从服务器获取数据,也可以用来将数据发回。可以用GET或POST方式发回数据,以及任意数量的HTTP信息头。在向服务器发回的数据量超过浏览器的最大URL长度时XHR特别有用。在这种情况下,可以用POST方式发回数据:
var url='/data.php';
var params=['id=934875','limit=20'];
var req=new XMLHttpRequest;
req.onerror=function{
};
req.onreadystatechange=function{
if(req.readyState==4){
}
};
req.open('POST',url,true);
req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
req.setRequestHeader('Content-Length',params.length);
req.send(params.join('&'));
在上面代码中,如果通信失败,则什么也不做。当使用XHR捕获登录用户统计信息时,这么做通常没什么问题,但是,如果发送到服务器的是至关重要的数据,那么可以添加代码在失败时重试:
function xhrPost(url,params,callback){
var req=new XMLHttpRequest;
req.onerror=function{
setTimeout(function{
xhrPost(url,params,callback);
},1000);
};
req.onreadystatechange=function{
if(req.readyState==4){
if(callback&&typeof callback==='function'){
callback;
}
}
};
req.open('POST',url,true);
req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
req.setRequestHeader('Content-Length',params.length);
req.send(params.join('&'));
}
使用XHR将数据发回服务器比使用GET要快,这是因为对少量数据而言,向服务器发送一个GET请求要占用一个单独的数据包。另外,一个POST至少发送两个数据包,一个用于信息头,另一个用于POST体。POST更适合于向服务器发送大量数据,既因为它不关心额外数据包的数量,又因为IE的URL长度限制,不可能使用过长的GET请求。
(2)灯标
灯标与动态脚本标签插入非常类似。JavaScript创建一个新的Image对象,将src设置为服务器上一个脚本文件的URL,该URL包含通过GET格式传回的键值对数据。注意,这里并没有创建img元素或将它们插入到DOM中。
var url='/status_tracker.php';
var params=['step=2','time=1248027314'];
(new Image).src=url+'?'+params.join('&');
服务器得到此数据并保存下来,不必向客户端返回什么,因此没有实际的图像显示。这是将信息发回服务器的最有效方法,开销很小,而且任何服务器端错误都不会影响客户端。
由于简单的图像灯标不能发送POST数据,所以应将URL长度限制在一个相当小的字符数量上。当然也可以用非常有限的方法接收返回数据,可以监听Image对象的load事件,判断服务器端是否成功接收了数据。还可以检查服务器返回图片的宽度和高度(如果返回了一张图片)并用这些数字通知服务器的状态。例如,宽度为1表示成功,2表示重试等。
如果不需要为此响应返回数据,那么应当发送一个204 No Content响应代码,表示无消息正文,从而阻止客户端继续等待永远不会到来的消息体。
var url='/status_tracker.php';
var params=['step=2','time=1248027314'];
var beacon=new Image;
beacon.src=url+'?'+params.join('&');
beacon.onload=function{
if(this.width==1){
//成功处理
}else if(this.width==2){
//失败处理
}
};
beacon.onerror=function{
//错误处理
};
灯标是向服务器回送数据最快和最有效的方法。因为服务器根本不需要发回任何响应正文,所以不必担心客户端下载数据。使用灯标的唯一缺点是接收到的响应类型是受限的。如果需要向客户端返回大量数据,那么使用XHR。如果只关心将数据发送到服务器端,那么使用图像灯标。