7,8章Ajax与编程实践.md

layout	title
default	{"site.name" => nil}

7章Ajax

Ajax从最基本层面说，是一种与服务器建立通信而无需重载页面的方法，数据可以从服务器获取或发送给服务器。有很多种方法建立通信，各有各自的优点和限制。

请求数据的方式

• XMLHttpRequest
• 动态脚本注入
• iframes
• Comet
• Multipart XHR

Comet和iframes作为数据传输技术往往用在极端情况下，这里就不讨论了。

XHR其实也什么好说的，毕竟现在的使用范围那么广，尽管是同域限制。注意post和get的区别，当我们经常请求某一个数据的时候，可以使用GET，因为get的请求会被缓存。当我们参数较长的时候，我们应该用Post来获得数据，因为IE限制URL长度，过长时会导致请求的URL被截断。

动态脚本注入的话，实际上就是JSONP，解决跨域的较好的方法。但是只能使用get请求，并不能使用post，关于跨域的问题我会重新整理一遍。

MXHR其实和XHR非常类似，也是同样的请求，不过是将一些静态资源在后端进行base64位的编码，然后通过一个请求传到前端，然后我们可以在readyState等于3的时候看下传到的资源，不过这件事情的价值不大..首先是我们可以直接base64放在文档里面，其次每个图片的base64里面都有一些部分是申明的会被浪费，雪碧图说不定效果还更好一些，而且最大的问题，这些资源不能被浏览器缓存。

发送数据

我们通过get和post方法都是可以发送数据，GET会更快一些，一个GET请求只发送一个数据包，而一个POST请求，至少要发送两个数据包(一个装载头信息，一个装POST正文。POST更适合发送大量数据，他不关心额外数据包的数量。另一个原因是IE对于URL长度有限制，GET会被限制。

Beacons

这个技术我们非常类似于动态脚本注入，就是通过设置img的src来发送请求(而且并不用创建img元素或者将它插入DOM中，只需要new Image()就行了)。我们只能监听onload事件来看请求是否成功，或者监听this.width来根据服务器返回的图片的宽度来得到响应。其实这个东西使用过，用来监听一些网络状况比较好使，打点嘛

数据格式

XML

AJAX最开始的时候，使用的是XML作为格式，因为通用性极佳，操作严格，易于验证

但是xml太冗余，有效数据比例很低，而且限制于结构，我们需要针对每段XML写不同的解析的工具，很麻烦。我们可能得使用getElementByTagName

但是现在高级点的浏览器都有xPath来通过一个路径来获取值，但是低级的浏览器不支持，IE8有类似的，就算用也得使用getElementByTagName来写降级的代码。

var path="/bookstore/book/title";
xml.selectNodes(path)

JSON

JSON是一种使用Javascript对象和数组直接量编写的轻量级且易于解析的数据格式。我们解析JSON很简单，只要JSON.parse和JSON.stringify就可以。

支持性还可以，正常的浏览器都可以，IE8以及以上是支持的。不支持的话，我们可以有简单的polyfill。

parse方法最简单的polyfill就是用eval执行一遍直接就能转化为对象了。

这里介绍了一些无聊的压缩传输的方法，没有价值。

接下来的几小节讲的东西都没有什么价值。

8章编程实践

避免双重求值

有四种方法可以执行一段字符串

• eval()
• Function()构造函数
• setTimeout
• setInterval

首先代码会以正常的方式求值，然后在执行过程中对包含在字符串中的代码发起另一个求值运算。代价非常昂贵，最好不要使用。

使用Object/Array直接量

相比于new Array，我们还是使用直接量来创建的效果是最好的。

避免重复工作

就是比如一些浏览器特性的检测操作，每次调用某个方法的时候都会重复调用。这个时候就可以调用惰性载入函数或者延迟加载。就是高程中也提过的，判断后，使用新函数替换原函数，然后以后的每次调用都是调的新函数了。或者使用申明时就检测一次的方法。

使用快的部分和原生的方法

就是说位操作的速度肯定会比一般的数学的操作要快得多

我们在能够使用原生的值或者原生的方法的时候尽量使用原生的，速度会快很多。因为他们都是浏览器自带的方法(典型的例子是选择器，jquery的选择速度已经很快了，但是使用querySelector还是能快个10%)，早就编译成了C++的代码，会更快一些。(chrome来说差别不大，因为都是使用的即时js编译器)