第20章 JSON
JSON是一个轻量级的数据格式，可以简化表示复杂数据结构的工作量
JSON的语法可以表示一下三种类型的值
l 简单值：使用与JavaScript相同的语法，可以在JSON中表示字符串、数值、布尔值和null。但JSON不支持JavaScript中的特殊数值undefined。
“Hello world!”
l 对象(属性的值可以是简单值，也可以是复杂类型值，如下这样在对象嵌入对象)
{
“name” : ”Nicholas”,
“age” : 29
“school” : {
“name” : “MerrimackCollege”,
“location” : “North Andover, MA”
}
}
l 数组
[25, “hi”, true]
把数组和对象结合起来，可以构成更复杂的数据集合，例如：
[
{
“title” : “professinal JavaScript”,
“authors” : [
“Nicholas C. Zakas”
],
edition : 3,
year : 2011
},
{
“title” : “ professinal JavaScript”,
“authors” : [
“Nicholas C. Zakas”
],
edition : 2,
year : 2009
}
]
ECMAScript 5定义了一个原生的JSON对象，可以用来将对象序列化为JSON字符串或者将JSON数据解析为JavaScript对象。JSON.stringify()和JSON.parse()方法分别用来实现上述两项功能。
第21章 Ajax与Comet
Ajax技术的核心是XMLHttpRequest对象(简称XHR).能够以异步方式从服务器取得更多信息，以为着用户单击后，可以不刷新页面也能取得新数据。
1、XMLHttpRequest对象
（1）XHR的用法
使用下面的代码在所有浏览器中创建XHR对象：
var xhr = createrXHR();
在使用XHR对象时，要调用的第一个方法是open(),它接受3个参数：要发送的请求的类型（“get”、”post”等）、请求的URL和表示是否异步发送请求的布尔值。
调用open()方法并不会真正发送请求，而只是启动一个请求以备发送。
要发送特定的请求，条用send()方法，如：
xhr.open("get","example.php", false)；
xhr.send(null);
如果不需要通过请求主体发送数据，则必须传入null。
在收到响应后，响应的数据会自动填充XHR对象的属性，相关属性如下：
- responseText：作为响应的主体被返回的文本；
- responseXML：若响应的内容类型”text/xml”或”application/xml”，此属性保存响应数据XML DOM文档
- status：响应的HTTP状态；
- statusText：HTTP状态的说明。
在接收到响应后，第一步是检查status属性，以确定响应已经成功返回。
多数情况下，要发送异步请求，可以检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。可能的取值如下：
0 : 未初始化，未调用open()；
1 : 启动，已经调用了open()；
2 : 发送，已经调用了send()，未接受响应；
3 : 接受，已接收到部分响应；
4 : 完成，已接收到全部响应，且已经可以在客户端使用。
只要readyState属性的值由一个值变成另一个值，都会触发一次readystatechange事件。
另外，在接收到响应之前还可以调用abort()方法来取消异步请求。
（2）HTTP头部信息
每个HTTP请求和响应都会带有相应的头部信息。
默认情况下，在发送XHR请求的同时，还会发送下列头部信息：
Accept：浏览器能够处理的内容类型；
Accept-Charset：浏览器能够显示的字符集；
Accept-Encoding：浏览器能够处理的压缩编码；
Axxept-Language：浏览器当前设置的语言；
Connection：浏览器与服务器之间连接的类型；
Cookie：当前页面设置的如何Cookie；
Host：发送请求耳洞页面所在域；
Referer：发出请求的页面的URI；
User-Agent：浏览器的用户代理字符串。
使用setRequestHeader()方法可以设置自定义的请求头部信息。
调用XHR对象的getResponseHeader()方法并传入头部字段名称，可以取得相应的响应头部信息。
而调用getAllResponseHeader()方法则可以取得一个包含所有头部信息的长字符串。
（3）GET请求
GET是最常见的请求类型，最常用于向服务器查询某些信息。
必要时，可以将查询字符串参数追加到URL的末尾，以便将信息发送给服务器。
查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才能放到URL的末尾。
下面这个函数可以辅助想现有URL的某位添加查询字符串参数：
function addURLParam(url,name,value){
url += (url.indexOf('?') == -1?'?':'&');
url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
return url;
}
（4）POST请求
POST请求，通常用于向服务器发送应该被保存的数据。
2、XMLHttpRequest 2级
（1）FormData为序列化表单以及创建于表单格式相同的数据（用于通过XHR传输）提供了便利。
下面的例子创建了一个FormData对象，并向其中添加了一些数据：
var data = new FormData();
data.append(“name”,”Nicholas”);
这个append()方法接收两个参数：键和值。
而通过向FormData构造函数传入表单元素，也可以用表单的数据预先向其中填入键值对：
var data = new FormData(document.forms[0]);
创建FormData的实例后，可以将它直接传给XHR的send()方法。
使用FormData的方便之处体现在不必明确地在XHR对象上设置请求头部。
（2）超时设定
IE8为XHR对象添加了一个timeout属性，表示请求在等待响应多少毫秒之后就终止。
（3）overrideMimeType()
Firefox最早引入了overrideMimeType()方法，用于重写XHR响应的MIME类型。
3、进度事件
Progress Events 规范定义了与客户端服务通信有关的事件。有以下6个进度事件：loadstarts、progress、error、abort、load、loadend。
每个请求都从触发loadstart事件开始，接下来是一个或多个progress事件，然后触发error、abort或load事件中的一个，最后以触发loadend事件结束。
4、跨源资源共享
CORS（Cross-Origin Resource Sharing，跨源资源共享）定义了在必须访问跨源资源时，浏览器与服务器应该如何沟通。
其基本思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。
（1）IE对CORS的实现
微软在IE8中引入了XDR（XdomainRequest）类型。这个对象与XHR类似，但能实现安全可靠的跨域通信。
XDR对象的使用方法与XHR对象非常相似。也是创建一个XdomainRequest的实例，调用open()方法，在调用send()方法。
所有XDR请求都是异步执行的，不能用它来创建同比请求。
XDR对象也支持timeout属性以及ontimeout事件处理程序。
为支持POST请求，XDR对象提供了contentType属性，用来表示发送数据的格式。
（2）其他浏览器对CORS的实现
Firefox3.5+、Safair4+、Chrome、iSO版和Android平台中的WebKit都通过XMLHttpRequest对象实现了对CORS的原生支持。
要请求位于另一个域中的资源，使用标准的XHR对象并在open()方法中传入决定URL即可。
（3）Preflighted Reqeusts
CORS通过一种叫做Preflighted Reqeusts的透明服务器验证机制支持开发人员使用自定义的头部GET或POST之外的方法，以及不同类型的主体内容。
（4）带凭据的请求
默认情况下，跨源请求不提供凭据（cookie、HTTP认证及客户发顿SSL证明等）。通过将withCredentials属性设置为true，可以指定某个请求应该发送凭据）。
（5）跨浏览器的CORS
检测XHR是否支持CORS的最简单方式，就是检查是否存在withCredentials属性。再结合检测XdomainRequest对象是否存在，就可以兼顾所有浏览器了。
5、其他跨域技术
利用DOM中能够执行跨域请求的功能，在不依赖XHR对象的情况下也能发送某种请求。
（1）图像Ping
第一种跨域请求技术是使用<img>标签。
通过图像Ping，浏览器得不到任何具体的数据，但通过监听load和error事件，它能知道响应是什么时候接收到的。
缺点：只能发送GET请求；无法访问服务器的响应文本。
（2）JSONP
填充式JSON或参数式JSON，是应用JSON方法的一种新方法。
优点：能够直接访问文本，支持浏览器与服务器之间的双向通信。
缺点：JSONP是从其他域中加载代码执行的，可能不安全；要确定JSONP请求是否失败并不容易。
（3）Comet
Ajax是一种从页面向服务器请求数据的技术，而Comet则是一种服务器向页面推送数据的技术。
有两种实现Comet的方式：长轮询和流。
轮询的优势是所有浏览器都支持。
（4）服务器发送事件（SSE）
SSE API用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据。
要预定新的事件流，首先要创建一个新的EventSource对象，并传进一个入口点：
var source = new EventSource(“myevents.php”);
默认情况下，EventSource对象会保持与服务器的活动连接。如果想强制立即端来连接并且不再连接，可以调用close()方法。
（5）Web Sockets
Web Sockets的目标是在一个单独的持久连接上提供全双工、双向通信。
使用标准的HTTP服务器无法实现Web Sockets，只有支持这种协议的专门服务器才能正常工作。
要创建Web Socket，先实例一个WebSocket对象并传入要连接的URL：
var socket = new WebSocket(“ws://www.example.com/server.php”);
要关闭Web Socket连接，可以在任何时候调用close()方法。
socket.close();
Web Socket打开之后，就可以通过连接发送和接收数据。要向服务器发送数据，使用send()方法。
Web Sockets只能通过连接发送纯文本数据，所以对于复杂的数据结构，在通过连接发送之前，必须进行序列化。
在服务器向客服端发来消息时，WebSocket对象就会触发message事件。
6、安全
为确保通过XHR访问的URL安全，通行的做法就是验证发送请求者是否有权访问相应的资源。
第23章 离线应用与客户端存储
支持离线Web应用开发是HTML5的另一个重点。
开发离线Web应用需要几个步骤：
首先是确保应用知道设备是否能上网；
然后，应用还必须能访问一定的资源（图像、JavaScript、CSS等）；
最后，必须有一块本地空间用于保存数据。
1、离线检测
HTML5为此定义了一个navigator.onLine属性，这个属性值为true表示设备能上网，值为false表示设备离线。
为了更好地确定网络是否可用，HTML还定义了两个事件：online和offline。当网络从离线变为在线或者从在线变为离线时，分别触发这两个事件。
为了检测应用是否离线，在页面加载后，最好先通过navigator.onLine取得初始的状态。然后，就是通过上述两个事件来确定网络连接状态是否变化。
2、应用缓存
HTML5的应用缓存，简称为appcache。就是从浏览器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。
要将描述文件与页面关联起来，可以在<htnl>中的manifest属性中指定这个文件的路径，如：
<html manifest=”/offline.manifest”>
应用缓存也有相应的JavaScript API让你知道它都在做什么。这个API的核心是applicationCache对象，这个对象有一个status属性，属性的值是常量，表示应用缓存的如下当前状态：
0 :无缓存。
1：闲置。
2：检查中。
3：下载中。
4：更新完成。
5：废弃。
应用缓存还有很多相关是事件，表示其状态的改变。有：checking、error、noupdate、downloading、progress、updateready、cached。
一般来讲，这些事件会随着页面加载按上述顺序依次触发。不过，通过调用update()方法也可以手工干预，让应用缓存为检查更新而触发上述事件。
3、数据存储
（1）Cookie
HTTP Cookie，通常直接叫做cookie，最初是在客户端用于存储会话信息的。
- 限制
cookie在性质上是绑定在特定的域名下的。
由于cookie是存储在客户端计算机上的，还加入了一些限制确保cookie不会被恶意使用，同时不会占据太多磁盘空间。每个域的cookie总数是有限制的，不过浏览器之间个不相同。
当超过单个域名限制之后还要再设置cookie，浏览器就会清楚之前设置的cookie。
浏览器中对cookie的尺寸也有限制。大多数浏览器都有大约4096B（加减1）的长度限制。
如果你尝试创建超过最大尺寸限制的cookie，那么该cookie会被悄无声息地丢掉。
- cookie的构成
cookie由浏览器保存的以下几块信息构成：名称、值、域、路径、失效时间、安全标志。
- JavaScript中的cookie
基本的cookie操作有三种：读取、写入和删除。
（2）IE用户数据
在IE5.0中，微软通过一个自定义行为引入了持久化用户数据的概念。
（3）Web存储机制
Web Storage的目的是克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。
最初的Web Storage规范包含了两种对象的定义：sessionStorage和globalStorage。
（4）IndexedB
IndexedB是一种类似SOL数据库的结构化数据储存机制。