有五种常用12bet,技术用于向服务器请求数据:
多部分XHR(MXHR)允许你只用一个HTTP 请求就可以从服务器端获取多个资源。它通过将资源(可以是CSS 文件,HTML 片段,JavaScript 代码,或base64 编码的图片)打包成一个由特定分隔符界定的大字符串,从12bet,服务器端发送到客户端。JavaScript 代码处理此长字符串,12博体育,根据它的媒体类型和其他“信息头”解析出每个资源。
var req = new XMLHttpRequest();
req.open('GET', 'rollup_images.php', true);
req.onreadystatechange = function() {
if (req.readyState == 4) {
splitImages(req.responseText);
}
};
req.send(null);
这是一个12bet,非常简单的请求。向rollup_images.php 要求数据,一旦你收到返回结果,就将它交给函数splitImages 处理。rollup_images.php读取三个图片,并将它们转换成base64 字符串。12博体育,之间用一个简单的字符,UNICODE的1,连接起来,然后返回给客户端,此数据由splitImage 函数处理:
function splitImages(imageString) {
var imageData = imageString.split("u0001");
var imageElement;
for (var i = 0, len = imageData.length; i < len; i++) {
imageElement = document.createElement('img');
imageElement.src = 'data:image/jpeg;base64,' + imageData[i];
document.getElementById('container').appendChild(imageElement);
}
}
如果MXHR 请求很多张图片,那么响应报文越来越大,有必要在每个资源收到时立刻处理,而不是等待整个响应报文接收完成。这可以通过监听readyState 3 实现:
var req = new XMLHttpRequest();
var getLatestPacketInterval, lastLength = 0;
req.open('GET', 'rollup_images.php', true);
req.onreadystatechange = readyStateHandler;
req.send(null);
function readyStateHandler{
if (req.readyState === 3 && getLatestPacketInterval === null) {
// 开始轮询
getLatestPacketInterval = window.setInterval(function() {
getLatestPacket();
}, 15);
}
if (req.readyState === 4) {
// 停止轮询
clearInterval(getLatestPacketInterval);
// 获取最新的数据
getLatestPacket();
}
}
function getLatestPacket() {
var length = req.responseText.length;
var packet = req.responseText.substring(lastLength, length);
processPacket(packet);
lastLength = length;
}
当readyState 3 第一次发出时,启动了一个定时器。每隔15 毫秒检查一次响应报文中的新数据。数据片段被收集起来直到发现一个分隔符,然后一切都作为一个完整的资源处理。
使用此技术有一些缺点,其中最大的缺点是以此方法获得的资源不能被浏览器缓存。
另一个缺点是:老版本的IE不支持readyState 3 或data: URL。IE 8 两个都支持,但在IE 6 和7 中必须设法变通。
使用MXHR的情况:
当数据只需发送给服务器时,有两种广泛应用的技术:XHR 和灯标。
灯标与动态脚本标签插入非常类似。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('&');
灯标是向服务器回送数据最快和最有效的方法。服务器根本不需要发回任何响应正文,所以你不必担心客户端下载数据。唯一的缺点是接收到的响应类型是受限的。如果你需要向客户端返回大量数据,那么使用XHR。如果你只关心将数据发送到服务器端(可能需要极少的回复),那么使用图像灯标。
有两种主要方法避免发出一个不必要的请求:
Expires: Mon, 28 Jul 2014 23:30:00 GMT
),确保返回报文将被缓存在浏览器中。