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

第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:浏览器和服务器之间连接的种;

              库克(Cook)ie:当前页面设置的怎么库克ie;

              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 伊芙nts
规范定义了同客户端服务通信有关的风波。有以下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平台遭受之Web基特都经过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”);

默认情状下,伊芙ntSource对象会晤保持同服务器的走总是。假设想强制登时端来连接而不再连接,可以调用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 库克ie,通常直接称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数据库的结构化数据存储机制。