请求数据

一共 5 种从服务器请求数据的方式：

XMLHttpRequest (XHR)
动态脚本注入
iframe
Comet
Multipart XHR

其中 iframe 和 Comet 只有在特殊情况下会被使用。

XHR

XHR 是最最常用的数据请求工具了。它不止有 get 方法，还有 post、put、delete 这些方法。像 Axios 这类数据请求库就是 XHR 的封装。

动态注入脚本

动态注入脚本其实就是在 DOM 中添加指定 src 的 <script> 标签。

var scriptElement = document.createElement('script')
scriptElement.src = 'http://whale.ke.com/getList?name="123"&id=888'
document.getElementByTagName('head')[0].appendChild(scriptElement)

Multipart XHR

这种方案其实也是基于 XHR 的：

客户端使用 XHR 发起请求
服务器端响应多条数据的合成。
客户端收到响应后拆分数据、解析数据。
由于这种合成数据一般很大，我们可以使用轮询现有响应数据流来逐步获取数据。

发送数据

一共两种发送数据的方式：

XHR
信标

XHR

上面我们提到了 XHR 能够发送各类 http 请求，所以给服务器发送数据必然没有问题。无论是 GET 还是 POST 都可以做到传输数据到服务器端。

但是 URL 是有长度限制的，在处理类似表单这类大量数据的提交时，最好还是用 POST 方法。

信标

信标的创建方法（类似于动态脚本注入）：

创建 Image 对象
为 Image 对象 src 定义 URL

var url = "/status_tracker.php"
var params = [
  "step=2",
  "time=1243879"
]

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

这样就可以向服务器端发送 URL 拼接出的数据了。同样的，由于 URL 长度限制，无法传输大量数据。

优点：它是给服务器回传消息最有效的方式。性能消耗很小，且服务端错误不会影响客户端运行。
缺点：有 URL 长度限制，返回的信息很少。

那么提交数据的方式怎么选呢？

如果要提交大量数据，建议用 XHR
如果只是要发送简单数据到服务器端，用信标。

数据格式

常用的数据格式有以下几种：

XML —— 笨重而完善的数据格式，兼容性很好，性能不佳。
JSON —— 性能表现最好的数据格式
JSON-P —— 动态注入的 JSON 脚本，解析快、能跨域、但不安全。
HTML —— 特定场景下的数据格式
自定义格式 —— 自己约定的数据格式，性能好，但是需要约定解析方法。

总的来说，对于一般情况 JSON 是表现最好的数据格式。如果数据集很大并且对解析时间有要求，可以使用以下两种方案之一：

JSON-P：使用动态脚本注入技术注入，通过执行 JavaScript 而非解析字符串的方式来获取数据。它解析速度极快、还可以跨域进行，但是不安全。
使用字符分隔的自定义格式，利用动态脚本注入或者 XHR 获取自定义格式数据后，通过 split() 方法解析自定义字符串。这种方法速度快、数据文件小。

Ajax 性能优化

缓存数据，最快的请求就是没有请求。
设置 HTTP 头部信息
本地数据存储
注意使用 Ajax 类库会有一些局限，如不能访问 readyState 所以不能实现 MXHR。

小结

整体看下来，动态脚本注入来加载数据也是不错的数据获取方式。而 XHR + JSON 是现阶段最流行的数据传输方式。在性能上也表现不错。

更多 Ajax 的优化，还需要好好学习 HTTP 相关知识，如设置头部信息、设置缓存、过期时间、http2 等知识点。

高性能 JavaScript - Ajax