Ajax异步与JavaScript的一些初浅认识

jopen 10年前

向服务器请求数据的技术

有以下五种常用技术用于向服务器请求数据

  1. XMLHttpRequest（XHR）
  2. Dynamic script tag insertion(动态脚本标签插入)
  3. iframes
  4. Comet
  5. Multipart XHR (多部分的XHR)

XHR

优点：能够精细的控制发送请求和数据接收，也就是说你可以在请求的报文中添加任意的头信息和参数（包括Get和Post），并读取从服务器返回的头信息，以及响应文本自身。

缺点：不能使用XHR从当前运行的代码域之外请求数据，而且老版本的IE不提供readyState为3的状态（为3的状态表示数据正在接收中），它也不支持流。从请求返回的数据像一个字符串或者一个XML对象那样对待，这意味着处理大量数据时将相当缓慢。

建议：当使用XHR请求数据时，可以使用POST或GET。如果请求不改变服务器状态而只是取回数据建议使用GET，因为GET请求的数据会被浏览器自动缓冲起来，如果多次提取相同的数据可提高性能。

只有当URL和参数的长度超过了2048个字符时才使用POST提取数据，因为IE限制了URL的长度，过长将导致请求参数被截断。

Dynamic script tag insertion(动态脚本标签插入)

优点：可以从不现域的服务器上获取数据

因为其响应结果是运行JavaScript，而不是作为字符串必须被进一步处理。所以它应该是客户端上获取并解析数据最快的方法。

缺点：不能通过请求发送信息头，参数只能通过GET方法传递，不能POST。

不能设置请求的超时或重试，实际上你不需要知道它是否失败，而且你必须得等待所有数据返回之后才可以进行处理。

不能访问响应信息头或像访问字符串那样访问整个响应报文

备注：因为JavaScript没有权限或访问控制的概念，所以你的页面上任何使用动态脚本标签插入的代码都可以完全控制整个页面，所以在使用外部来源的代码时务必非常小心。

因为响应报文被用作脚本标签的源码，它必须是可执行的JavaScript。也就是说任何数据无论什么格式必须在一个回调函数中被组装起来。

Multipart XHR (多部分的XHR)

多部分的XHR（MXHR）允许你只用一个HTTP请求就可能从服务器端获取多个资源，通过将资源打包成一个由特定分隔符界定的大字符串，从服务器端发送到客户端。JavaScript代码处理此长字符串，根据它的媒体类型和其他“信息头”解析出每个资源。

优点：显著提高了整个页面的性能。

缺点：获得的资源不能被浏览器缓存。

老版本的IE并不支持readyState=3或data:URL

建议：由于MXHR响应报文越来越大，有必要在每个资源收到时立刻处理而不是等待整个响应报文接收完成，这可以通过监听readyState =3 来实现

发送数据

有时候我们只需要将数据发送给服务器而并不关心接收数据，可以采取如下两个技术

  1. XHR
  2. 灯标

XHR

使用XHR将数据发回服务器时，它比GET要快。（原因：向服务器发送一个GET请求要占用一个单独的数据包，另一方面一个POST至少发送两个数据包，一个用于信息头，一个用于POST体）POST更适合于向服务器发送大量数据，因为它不关心额外数据包的数量 ，又因为IE的URL长度限制，所以使用GET会受到限制。

灯标

实现原理：创建一个Image对象，将src设置为服务器上一个脚本文件的URL，此URL包含我们打算通过GET格式传回的键值对数据。（并没有创建img元素或者将它们插入到DOM中），服务器取得此数据并保存下来，而不必向客户端返回什么，因此没有实际图像显示。

优点：这是将信息返回服务器的最有效方法，回送数据最快，其开销最小，而且任何服务器端错误并不会影响客户端。

缺点：接收到的响应类型是受限的，不能发送POST数据，所以URL长度限制在一个相当小的字符数量上。可以用非常有限的方法接收返回数据，可以监听Image对象的load事件，它可以告诉你服务器端是否成功接收了数据。

如果你需要向客户端返回大量数据，那么使用XHR，如果你只关心将数据发送到服务器端（可能需要极少的回复），那么使用灯标

数据格式

主要有以下几种数据格式

  1. XML
  2. JSON
  3. HTML
  4. 自定义格式

XML

优点：格式严格，易于验证

缺点：数据冗长，解析困难，解析速度慢，虽然XPath可稍微加快点解析速度，但并未得到广泛支持。

JSON

JSON是一个轻易级并易于解析的数据格式 ，它按照JavaScript对象和数组字面量语法编写。JSON数据可称为能够运行的JavaScript代码。

优点：格式小，占用空间小，下载最快，解析时间最短

下面具体说一下JSON

当使用XHR时JSON数据作为一个字符串返回，该字符串使用()转换为一个本地对象

当使用动态脚本标签插入时，JSON数据被视为另外一个JavaScript文件并作为本地码执行。为了做到这一点，JSON数据必须被包装在回调函数中，这也就是JSON-P（JSON填充   也就是JSON-Padding）

JSON-P

JSON-P因为回调包装的原因略微增加了文件尺寸，但与其解析性能的改进相比这点增加微不足道，由于数据作为本地JavaScript处理，它的解析速度像本地JavaScript一样快。

最快的JSON格式是使用数组的JSON-P格式。

注意点：因为JSON-P必须是可执行的JavaScript，实验室能够跨域使用它使用动态脚本标签注入技术可以任何网站中被任何人调用 ，所以安全性必须得注意，不应该涉及敏感数据。

HTML

使用HTML传输数据大合格解析时间长（在此不讨论 一般尽量少使用）

自定义格式

自定义格式下载懂事，易于解析，只需要调用字符串的split将分隔符来解析数据。当创建你的自定义格式时，最重要的决定是采用何种分隔符（分隔符应该是一个单字符而不能存在于你的数据之中）。

总结：XHR和动态脚本标签注入都可以使用这种格式 ，两种情况下都要解析字符串，在性能上没有实质上的差异，对于非常大的数据集，它是最快的传输格式，甚至可以在解析速度和下载时间上击败本机执行的JSON。用此格式向客户端传送大量数据只用很少的时间。

数据格式总结

最好是用JSON和自定义格式 ，如果数据集大或者需要很长解析时间，请最好使用这两种格式之一

JSON-P数据用动态技术标签插入法获取 ，它将数据视为可运行的JavaScript而不是字符串，解析速度极快，能够跨域使用，但不应涉及敏感数据。

字符分隔的自定义格式，使用XHR或动态脚本标签插入技术提取，使用split解析。此技术在解析非常大数据集时比JSON-P技术略快，而且通常文件尺寸更小。

缓存数据

在服务器端，设置HTTP头，确保返回报文被缓存在浏览器中

在客户端，于本地缓存已获取的数据，不要多次请求同一数据。

原文出处： YouYaInsist 的博客