向服务器请求数据的五种技术.docVIP

Ajax，在它最基本的层面，是一种与服务器通讯而不重载当前页面的方法，数据可从服务器获得或发送给服务器。有多种不同的方法构造这种通讯通道，每种方法都有自己的优势和限制。????? 有五种常用技术用于向服务器请求数据：????? （1）XMLHttpRequest (XHR)????? （2）动态脚本标签插入????? （3）框架????? （4）Comet????? （5）多部分的XHR????? 在现代高性能JavaScript中使用的三种技术是XHR，动态脚本标签插入和多部分的XHR。使用Comet和iframe（作为数据传输技术）往往是极限情况，不在这里讨论。 ??????一、XMLHttpRequest????? 目前最常用的方法中，XMLHttpRequest（XHR）用来异步收发数据。所有现代浏览器都能够很好地支持它，而且能够精细地控制发送请求和数据接收。你可以向请求报文中添加任意的头信息和参数（包括GET和POST），并读取从服务器返回的头信息，以及响应文本自身。以下是使用示例：????? var url = /data.php;????? var params = [??????????? id=934875,??????????? limit=20????? ];????? var req = new XMLHttpRequest();????? req.onreadystatechange = function() {??????????? if (req.readyState=== 4) {????????????????? var responseHeaders = req.getAllResponseHeaders();????????????????? var data = req.responseText;??????????? }????? }????? req.open(GET, url + ? + params.join(), true);????? req.setRequestHeader(X-Requested-With, XMLHttpRequest);????? req.send(null);????? 此例显示了如何从URL请求数据，使用参数，以及如何读取响应报文和头信息。readyState等于4表示整个响应报文已经收并完可用于操作。????? readyState等于3则表示此时正在与服务器交互，响应报文还在传输之中。这就是所谓的“流”，它是提高数据请求性能的强大工具：????? req.onreadystatechange = function() {??????????? if (req.readyState=== 3) {????????????????? var dataSoFar = req.responseText;????????????????? …??????????? }??????????? else if (req.readyState=== 4) {????????????????? var data = req.responseText;????????????????? …??????????? }????? }????? 由于XHR提供了高级别的控制，浏览器在上面增加了一些限制。你不能使用XHR从当前运行的代码域之外请求数据，而且老版本的IE 也不提供readyState3，它不支持流。从请求返回的数据像一个字符串或者一个XML对象那样对待，这意味着处理大量数据将相当缓慢。尽管有这些缺点，XHR仍旧是最常用的请求数据技术，也是最强大的，它应当成为你的首选。????? 当使用XHR请求数据时，你可以选择POST 或GET。如果请求不改变服务器状态只是取回数据（又称作幂等动作）则使用GET。GET请求被缓冲起来，如果你多次提取相同的数据可提高性能。????? 只有当URL和参数的长度超过了2048个字符时才使用POST提取数据。因为Internet Explorer限制URL的长度，过长将导致请求（参数）被截断。??????二、动态脚本标签插入????? 该技术克服了XHR的最大限制：它可以从不同域的服务器上获取数据。这是一种黑客技术，而不是实例化一个专用对象，你用JavaScript创建了一个新脚本标签，并将它的源属性设??为一个指向不同域的URL。????? var scriptElement = document.createElement(script);????? scriptElement.src = /javascript/lib.js;?????