高性能 AJAX

请求数据的常用的五种方式

1、XMLHttpRequest (XHR)

var url = '/data.php';

var params = [

    'id=934875',

    'limit=20'

];

var req = new XMLHttpRequest();

req.onreadystatechange = function() {

    if (req.readyState === 3) {                                                    // 只收到部分数据的情况

          var dataSoFar = req.responseText;
           ...
    }

    if (req.readyState === 4) {

        var responseHeaders = req.getAllResponseHeaders();                // Get the response  headers.

        var data = req.responseText;                                              // Get the data.

                                                                                            // Process the data here...

     }

}

req.open('GET', url + '?' + params.join('&'), true);

req.setRequestHeader('X-Requested-With', 'XMLHttpRequest');           // Set a request  header.

req.send(null);                                                                         // Send the request.

注： 对于那些不会修改服务器状态只是拿回数据的，应该使用get方式，get是会缓存的，可以提高性能如果对同样数据多次fetch

post应该URL长度接近或者超过2048的时候用，因为ie限制了URL的长度，超过会被切掉

最大限制：不能跨域请求数据

 

2、动态生成插入脚本标签

var scriptElement = document.createElement('script');

scriptElement.src = 'http://any-domain.com/javascript/lib.js';

document.getElementsByTagName('head')[0].appendChild(scriptElement);

function jsonCallback(jsonString) {

    var data = eval('(' + jsonString + ')');

    // Process the data here...

}     

lib.js :  jsonCallback({ "status": 1, "colors": [ "#fff", "#000", "#ff0000" ] });

注：这种方式突破了上面XHR不允许跨域的限制，但是失去很多可控性：不能把header和请求一起发送。只能用get方式请求不能使用post。不能设置超时或者重试请求，甚至你都不知道请求失败了。需要等到全部数据接收完才能接入处理。无法把响应的header或者整个响应作为字符串接入。

最重要的是响应是作为script标签里执行的，因此必须是可直接执行的javascript代码。

 

3、multipart XHR

客户端：

var req = new XMLHttpRequest();
req.open('GET', 'rollup_images.php', true);
req.onreadystatechange = function() {
    if (req.readyState == 4) {
        splitImages(req.responseText);
    }
};

req.send(null);

 

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);

    }

}

 

服务器（PHP）：

$images = array('kitten.jpg', 'sunset.jpg', 'baby.jpg');                        // Read the images and convert them into base64 encoded strings.
foreach ($images as $image) {
    $image_fh = fopen($image, 'r');
    $image_data = fread($image_fh, filesize($image));

    fclose($image_fh);
        $payloads[] = base64_encode($image_data);
    }
}

$newline = chr(1);                                                  // This character won't appear naturally in any base64 string.

echo implode($newline, $payloads);                            // Roll up those strings into one long string and output it.

 

用于把字符串还原成浏览器能识别资源的函数：

function handleImageData(data, mimeType) {

    var img = document.createElement('img');

    img.src = 'data:' + mimeType + ';base64,' + data;

    return img;

}

function handleCss(data) {

    var style = document.createElement('style');

    style.type = 'text/css';

    var node = document.createTextNode(data);

    style.appendChild(node);
    document.getElementsByTagName('head')[0].appendChild(style);
}

function handleJavaScript(data) {
    eval(data);
}

 

如果数据太多例如200张图片那么不能等到整个字符串接受完才处理，应该把接收到资源一边处理掉：

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() {                                 // Start polling.

            getLatestPacket();

        }, 15);

    }

    if (req.readyState === 4) {

        clearInterval(getLatestPacketInterval);                                                     // Stop polling.

        getLatestPacket();                                                                              // Get the last packet.

    }

}

function getLatestPacket() {                                                             //每15毫秒执行一次该函数，然后把响应的新数据拿下来，等到一个资源定界符出现就处理掉这个资源

    var length = req.responseText.length;

    var packet = req.responseText.substring(lastLength, length);

    processPacket(packet);

    lastLength = length;

}

注：这是最新的技术，允许把多个资源从服务器发送到客户端只需要一个HTTP请求。把所以资源（无论是CSS文件，HTML fragment，javascript代码或者base64图片）打包成一个长字符串，javascript在处理这个长字符串的时候会根据每种资源的mine-type来区分。缺点：拿到的资源没办法缓存在浏览器，因为资源是通过字符串的形式传到浏览器的，没有办法把文件通过程序放到浏览器缓存里。ie6、7不支持readyState3 or data:URLs。优点：减少HTTP请求，加快速度

 

4、iframes

5、comet

前三种性能高，首选第一种

 

发送数据给服务器方式：

1、XMLHttpRequest (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('&'));

}

注：虽然常用于从服务器请求数据，但是也能用于发送数据给服务器。当你想传回服务器的数据超过URL限制，使用post方式传回就很实用

 

2、Beacons

var url = '/status_tracker.php';

var params = [

    'step=2',

    'time=1248027314'

];

(new Image()).src = url + '?' + params.join('&');

 

beacon.onload = function() {

    if (this.width == 1) {

        // Success.

    }

    else if (this.width == 2) {

        // Failure; create another beacon and try again.

    }

};

beacon.onerror = function() {

    // Error; wait a bit, then create another beacon and try again.
};

注：src的URL指向服务器上处理的PHP脚本。缺点：不能使用post方式，只能通过get传递，因此数据长度有限制。返回的响应十分有限。 优点：速度最快，最高效