《高性能javascript》学习笔记七

七、ajax分析

1、数据传输

ajax是一种与服务器通信而无需重载页面的方法（即局部刷新。）目前，有五种向服务器请求数据的技术：

XMLhttpRequest(XHR)、

Dynamic script tag insertion(动态脚本注入)、

iframes、

Comet、

Multipart XHR。

其中，用的最多的是XHR、动态脚本注入、multipart XHR这三种方法（以XHR最常见）

2、XHR

XMLHttpRequest是目前最常用的技术，可以在请求中添加头信息和参数，读取服务器返回的所有头信息和响应文本，下面是一个简单的例子

readyState的值等于3时，说明这是ajax与服务器正在进行交互，相应信息还在传输过程中。

XHR技术不能跨域。

3、动态脚本注入

动态脚本注入技术，就是创建一个script标签，将它的src属性设置为url。这种方式只能使用get方式，也不能设置请求头等信息，也不能设置请求的超时处理或重试，必须等所有数据都返回才能访问数据。响应消息必须是可执行的javascript代码，不能返回xml、json或者其他格式的数据。

这种方式可以跨域，但是及其容易引起安全问题。

4、Multipart XHR

MXHR允许客户端用一个http请求就从服务器想客户端传送多个资源。它通过在服务器将资源打包成一个由双方约定的字符串分割的长字符串发送到客户端，然后在客户端解析这个长字符串，根据mime-type类型和传入的其他信息解析出每个资源。

5、发送数据的方式分析

<1>在使用XHR向服务器发送数据时，get会比post稍快。这是因为，对于一个get请求，只发送了一个数据包，而一个post请求，至少要发送两个数据包，一个装载头信息，一个装载post正文。当需要发送的数据较大时，适合用Post方式。

<2>用Beaacons方式。这种方式非常类似动态脚本注入。它的原理是，用js代码创建一个image对象，然后将src属性设置为服务器脚本的url，该url包含了我们要用get方式传送的数据（并没有创建img标签或者把它插入到dom）

服务器在接收到数据之后无须想客户端发送响应，所以没有图片会实际显示出来。

这种方式性能消耗很小，但是能做的事情也有限。只能使用get的方式将数据拼接到路径后面。

可以通过image对象的load事件获取返回的信息，但只能知道服务器是否接收数据和图片的宽高。

如果不需要在响应中返回数据，服务器应返回一个不带消息的204 No Content状态码，它将阻止客户端继续等待永远不会到来的消息正文。

6、数据格式

ajax请求传输数据的格式多种多样，没有哪一种最好。具体用什么格式取决于要传输的数据和它的用途。一种数据可能下载更快，另一种可能解析更快，这要结合具体使用场景选用数据格式。

<1>XML

XML是早起ajax选用的数据格式。它在客户端和服务器端都适用，格式严格，易于验证。

XML的缺点是冗长，有效数据的比例很低，解析过程也比较混乱，后来被放弃。

7、JSON

json是现在ajax常用的数据结构，用数组和对象直接量编写。

8、HTML

服务器渲染的项目会将完整的html以及js、css传给浏览器，浏览器直接解析成页面。HTML代码比XML更繁杂，这意味着需要占用更多的网络资源去下载html。

9、自定义格式

你可以与服务器端约定好传输的数据的格式，比如以特定的字符作为分隔符分隔字符串，在客户端用split（）方法切割成需要的数据。

10、缓存ajax数据

<1>设置http头信息

如果某个请求，多次请求返回的数据也是相同的，那么可以考虑缓存该请求的数据，下次请求时直接从缓存获取而不是从服务器获取。方法是，http请求用get发出，服务器端在响应头设置Expires属性，这个属性是一GMT个日期，过了这个日期，请求不会从缓存中获取而是从服务器中获取。如果在这个日期之前，就会从缓存中获取数据。

<2>本地存储数据

可以设置一个对象用于保存数据，用url作为key，数据作为value保存在本地。

相对来说，设置expires属性是更好的方案。