首页 » 编写高质量代码:改善JavaScript程序的188个建议 » 编写高质量代码:改善JavaScript程序的188个建议全文在线阅读

《编写高质量代码:改善JavaScript程序的188个建议》建议142:比较常用的服务器发送数据方法

关灯直达底部

有时可以不关心接收数据,只要将数据发送给服务器即可。可以发送用户的非私有信息以备日后分析,或者捕获所有脚本错误,然后将有关细节发送给服务器进行记录和提示。当数据只需发送给服务器时,有两种应用得非常广泛的技术: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。如果只关心将数据发送到服务器端,那么使用图像灯标。