• 编写高性能的JavaScriptAjax数据传输之XHR(3)


    Ajax 是高性能脚本的基石。它可以用来延迟加载体积庞大的资源,它能够在服务器和客户端之间异步传递数据而不需要刷新页面。它能够使用一个请求加载页面内的所有资源。选择正确的数据传输技术和最有效率的数据格式,你可以大大的改善用户体验。

    后续的文章都是以数据传输和数据格式两大主题来讨论。

    数据传输

    请求数据的五种方式:

    XHR

    Multipart XHR

    Dynamic Script Tag Insertion

    Iframes

    Comet

    前三种应用比较流行,后两种应用的情况比较特殊,这里不会讨论到。

    XHR

    一个简单通俗的例子:

    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'); // 设置请求头部

    header.

    req.send(null); // 发送请求

    在现代的浏览器中XHR都能够很好的被支持,而且对于发送的请求和返回的数据,开发人员可以很好的控制。

    合理的利用readyState=3的响应状态,能够大大改善用户体验。

    req.onreadystatechange = function() {

    if (req.readyState === 3) { // 取得部分数据逐步呈现

    var dataSoFar = req.responseText;

    ...

    }

    else if (req.readyState === 4) { // 取得所有数据一次性呈现

    var data = req.responseText;

    }

    }

    XHR同样受约束于JavaScript的同源策略,而且老版本的IE不支持访问readyState ==3,返回的数据既不能被看做string或者xml object,在处理大批量的数据时速度显然会很慢。

    虽然有这些缺点,但是XHR仍然是Ajax的首选。

    Post vs Get

    一般说来,只是从服务器“拉回”数据而不改变服务器的状态就是用Get。Get请求可以被缓存,如果你连续几次获取同样的数据。Post应该只有在请求的URL长度超过2048时才使用,这是由于IE的URL长度的限制。

    PS:it is from  <high performance javascript> by nicolas zakas

  • 相关阅读:
    phpStudy mysql升级至5.7
    apache 子域名自动与子域名同名的目录绑定
    js 移动端获取当前用户的经纬度
    PHPStudy环境下搭建composer
    MySQL sock 文件丢失被删除解决方法
    Nginx+Php-fpm运行原理详解
    服务器反爬虫攻略:Apache/Nginx/PHP禁止某些User Agent抓取网站
    php 下载文件/直接下载数据内容
    window 克隆复制当前窗口
    staff
  • 原文地址:https://www.cnblogs.com/1000/p/xhr.html
Copyright © 2020-2023  润新知