请求数据的常用的五种方式
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传递,因此数据长度有限制。返回的响应十分有限。 优点:速度最快,最高效

高性能 AJAX的更多相关文章

  1. 高性能JavaScript(高性能Ajax)

    ajax是一种与服务器通信而无需重载页面的方法(即局部刷新.) 高性能的Ajax应该考虑数据传输技术和数据格式,以及其他的如数据缓存等优化技术. 请求数据 请求数据的常用技术有XMLHttpReque ...

  2. 高性能Ajax

    XMLHttpRequest javascript 高性能的Ajax应该考虑数据传输技术和数据格式,以及其他的如数据缓存等优化技术.   一.请求数据 请求数据的常用技术有XHR,动态脚本注入.Mul ...

  3. 【读书笔记】读《高性能JavaScript》

    这本<高性能JavaScript>讲述了有关JavaScript性能优化的方方面面,主要围绕以下几个方面: 1> 加载顺序 2> 数据访问(如怎样的数据类型访问最快,怎样的作用 ...

  4. input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年,我们被耍过的bug——has

    input屏蔽历史记录   设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处   ;(function($){$.ex ...

  5. 基于Yahoo网站性能优化的34条军规及自己的见解

    1.尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容,这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数,这是提高网页速 ...

  6. 【转】优化Web程序的最佳实践

    自动排版有点乱,看着蛋疼,建议下载中文PDF版阅读或阅读英文原文. Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践.他们为此进行了 一系列的实验.开发了各 ...

  7. Yahoo!网站性能最佳体验的34条黄金守则(转载)

    1.       尽量减少HTTP请求次数  终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数 ...

  8. Yahoo!网站性能最佳体验的34条黄金守则

    Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各种工具.写了大量的文章和博客并在各种会议上参与探讨.最佳实践的核心就是 ...

  9. yslow性能优化的35条黄金守则

    参考Best Practices for Speeding Up Your Web Site Exceptional Performance 团队总结了一系列优化网站性能的方法,分成了7个大类35条, ...

随机推荐

  1. servlet生成验证码

    1.因为朋友们都说现在很少用java自带的图形用户接口,所以小白的我就没去看awt和swing组件,因为要抓紧时间学习后面的,完了出去找工作,等以后再回来了解awt和swing:所以制作验证码的代码是 ...

  2. U方法

    U方法用于完成对URL地址的组装,特点在于可以自动根据当前的URL模式和设置生成对应的URL地址,格式为:U('地址','参数','伪静态','是否跳转','显示域名');在模板中使用U方法而不是固定 ...

  3. Java连接数据库完整代码 查找和插入

    package test; import java.io.InputStream; import java.sql.Connection; import java.sql.DriverManager; ...

  4. HDU 1754 I Hate It(线段树区间求最值)

    很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写一个程序,模拟老师的询问.当然,老师有 ...

  5. 最常用前端框架BootStrap——栅格系统

      前  言   Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mix ...

  6. Django进阶篇【1】

    注:本篇是Django进阶篇章,适合人群:有Django基础,关于Django基础篇,将在下一章节中补充! 首先我们一起了解下Django整个请求生命周期: Django 请求流程,生命周期: 路由部 ...

  7. jQuery中的常用内容总结(三)

    jQuery中的常用内容总结(三) 转载请注明地址:http://www.cnblogs.com/funnyzpc/p/7571998.html 内容提要 选择器(第一节) 选择器的扩展方法(第一节) ...

  8. day01:study HTTP协议

    总结: 1.对web客户端和web服务器之间的通讯有了基本原理有了简单理解. 2.对http协议有了相关概念的建立 3.B/S C/S 两种形式 4.搭建tomcat服务器的环境,相关配置(虚拟目录 ...

  9. (转)C#中各种集合类比较

    数组(Array)的不足(即:集合与数组的区别) 1. 数组是固定大小的,不能伸缩.虽然System.Array.Resize这个泛型方法可以重置数组大小,但是该方法是重新创建新设置大小的数组,用的是 ...

  10. Silverlight:telerik RadControls for Silverlight 主题使用心得

    默认情况下: telerik RadControls控件使用的是Office Black 主题,就算在App.xaml.cs里写上 StyleManager.ApplicationTheme = ne ...