AJAX学习笔记 - 通讯格式

番茄西红柿发布于2019-08-22 11:51 / 503人阅读

摘要：本文章记录本人在深入学习中看书理解到的一些东西，加深记忆和并且整理记录下来，方便之后的复习。格式数据极其的冗长。但是使用格式还是可能比实际的数据占用更多的空间。该字符串通过或者转换为一个本地的对象。

本文章记录本人在深入学习Javascirpt AJAX中看书理解到的一些东西，加深记忆和并且整理记录下来，方便之后的复习。

避免使用 XML

没有哪种格式从始至终比其他格式都更好。根据传送数据的类型、在页面上使用的目的不同，某种格式数据可能下周更快，另一种数据可能解析更快。

XML格式数据极其的冗长。因为每个离散的数据片段需要大量的XML结构，所有有效的数据的比例非常低。XML语法还有轻微的模糊。

还有，解析XML是非常占程序员的精力的。你需要提前了解详细的结构和确切地知道如何解开这个结构，然后细心地将他们写入js对象中。

谨慎使用 HTML 格式

js是能够较快的把一个大数据结构转化为简单的html，但是服务器完成同样的工作的速度更加快。一种技术考虑是在服务器端构建整个html，然后将其传递给客户端，js只是简单的下载它并且放入innerHTML。

什么情况下使用html格式：

html是一种详细的数据格式，比XML更加的冗长。数据本身的最外层可以有嵌套的html标签，每个标签都具有id class等其他的属性。但是使用html格式还是可能比实际的数据占用更多的空间。正因如此。只有在客户端CPU比带宽更受限的时候才使用这个技术。

有一种格式是包含最少数量的结构，需要在客户端解析数据。如JSON等将这种格式下载到客户机非常块，然而这一过程需要引擎花费更多的时间将他们转化成html以显示在页面上。这是需要很多字符的操作，而字符的操作也是js最慢的操作之一。

在服务器上创建html，这种格式在线操作数据量大，下载时间长，不过一旦下载完，只需要一个操作就可以显示在页面上。这种格式与其他几种格式的差别：“解析”在这种情况下指的是将html插入dom的操作。此外，html不能像本地js数组那样轻易迅速地进行迭代操作。

html格式的缺点

html传输量大，需要的解析时间也很长。将html插入到dom的单一操作看似简单，只有一行代码，却需要时间加载很多数据。一句话总结html格式：作为数据格式，它缓慢且臃肿。

推荐使用 JSON

JSON是一种轻量级易与解析的数据格式，它按照js的对象和数组的字面量格式来书写。下面的代码是用JSON编写的用户列表：

[
    {
        "name": "john",
        "age": 15
    },
    {
        "name": "wall",
        "age": 22
    },
    {
        "name": "ben",
        "age": 8
    }
]

JSON的优点：

相比与XML，JSON有许多优点：在总响应报文中，结构占用的空间更小。数据占用的更多。JSON对大多数的服务端编程语言/解码库之间有着很好的互操作性。JSON在客户端的解析工作微不足道，可将更多的代码的时间放在其他数据的处理上。

使用JSONP：

当你使用XHR的时候，JSON数据作为一个字符串返回。该字符串通过eval()或者JSON.parse()转换为一个本地的对象。当使用动态脚本标签插入的时候，JSON数据被视另一个js文件并作为本地码执行。为做到这一点，数据必须被包括在回调函数之中。这就是所谓的JSON填充或JSONP。下面是用JSONP编写的用户列表：

parseJSON([
    {
        "name": "john",
        "age": 15
    },
    {
        "name": "wall",
        "age": 22
    },
    {
        "name": "ben",
        "age": 8
    }
])

JSONP文件大小和下载时间与XHR测试基本相同，而解析时间几乎块了10倍。标准JSONP的解析时间为0，因为根本就用不着解析，他已经是本地格式了。

最快的JSON格式就是使用数组的JSONP格式，虽然这种格式只比使用XHR的JSON略快，但是这种差异随着列表尺寸的增大而增大。如果所从事的项目需要一个由10000以上的单元构成的列表，那么使用JSONP比使用JSON快多了。

JSONP的问题:

要避免使用JSONP还有一个与性能无关的原因：JSONP必须是可执行的js，利用动态脚本注入技术可以在任何网站上被任何人调用。从另一个角度来说，JSON在运行之前并不是有效的js，使用XHR时只是被当作字符串获取。不要将任何敏感的数据编码设置为JSONP，因为无法确定他是否包含私密信息、随机的url或者cookie。

最后，如果文章有什么错误和疑问的地方，请指出。与sf各位共勉！

GPU云服务器云服务器 ajax格式学习笔记学习笔记一基础学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92327.html

重学前端学习笔记（十一）--浏览器工作解析（一）

摘要：紧跟在后面的是请求头，每行用冒号分隔名称和值按下两次回车，收到服务端回复响应部分第一行被称作，它也分为三个部分，协议和版本状态码和状态文本。对前端来说系列的状态码是非常陌生的，原因是的状态被浏览器库直接处理掉了，不会让上层应用知晓。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要...

paulli3 2019-08-02 16:17 评论0 收藏0
重学前端学习笔记（十一）--浏览器工作解析（一）

摘要：紧跟在后面的是请求头，每行用冒号分隔名称和值按下两次回车，收到服务端回复响应部分第一行被称作，它也分为三个部分，协议和版本状态码和状态文本。对前端来说系列的状态码是非常陌生的，原因是的状态被浏览器库直接处理掉了，不会让上层应用知晓。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要...

付永刚 2019-08-30 10:49 评论0 收藏0
重学前端学习笔记（十一）--浏览器工作解析（一）

摘要：紧跟在后面的是请求头，每行用冒号分隔名称和值按下两次回车，收到服务端回复响应部分第一行被称作，它也分为三个部分，协议和版本状态码和状态文本。对前端来说系列的状态码是非常陌生的，原因是的状态被浏览器库直接处理掉了，不会让上层应用知晓。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要...

alighters 2019-08-26 18:26 评论0 收藏0