JavaScript高级程序设计-读书笔记

Posted 2020-06-23 浅岸

第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数据库的结构化数据储存机制。