js高级程序设计 笔记 --- 错误处理、json和ajax

1，错误处理　　

　　1，try-catch语句

　　　　try｛可能导致错误的代码｝ catch（error） ｛在错误发生时该怎么处理｝

　　　　error.message是所有浏览器都支持的属性。

　　　　finally语句是不论代码如何都会执行的。

　　2，错误类型

　　　　Error是基类型，其他错误都继承自该类型。

　　　　EvalError：使用eval函数发生异常时被抛出

　　　　RangeError： 数值超出相应范围时触发。

　　　　ReferenceError： 找不到对象，变量不存在

　　　　SyntaxError： 语法错误

　　　　TypeError：类型错误。 变量中保存意外的类型，或者访问不存在的方法

　　　　抛出错误：

　　　　　　throw操作符。用于抛出自定义错误。

　　　　错误事件

　　3，处理错误的策略

　　　　1，常见的错误类型

　　　　　　类型转换错误、数据类型错误、通信错误

　　4，区分致命错误和非致命错误

　　5，把错误记录到服务器

2，JSON

　　json是一种数据格式。

　　1，语法

　　　　json的语法可以表示以下三种类型的值

　　　　　　简单值： 使用与js相同的语法，可以在json中表示字符串，数值，布尔值和null，但json不支持undefined； json的字符串必须要使用双引号。

　　　　　　对象：对象是一种复杂数据类型。表示的是一组无序的键值对，每个键值对中的值可以是简单值，也可以是复杂数据类型的值。与js的对象字面量相比，json有两个地方不一样，首先没有声明变量，其次，没用结尾的分号。还有对象的属性必须加双引号。

　　　　　　数组：数组也是一种复杂数据类型。表示一组有序的值的列表。可以通过索引来访问，数组的值也可以是任意类型。

　　2，解析与序列化

　　　　全局JSON对象有两个方法：

　　　　parse（） ：  将json转为js对象。 也可以接收另一个参数，该参数为一个函数。将在每个键值对上调用。

　　　　stringify（） ： 将js对象序列化为JSON对象 ；   除了要接收需要序列化的js对象外，还可以接收两个参数： 第二个参数 如果是一个数组，那么结果中将只会包含数组中列出的属性。如果是一个函数，键名和属性值。根据键名来处理属性值。如果函数返回的是undefined，那么相应的属性会被忽略。  第三个参数用于控制结果中的缩进和空白符。

　　　　可以为任何对象添加toJSON（）方法，那么将会返回对应的值

　　　　序列化对象的顺序如下：

　　　　　　1，如果存在toJSON（）方法而且能通过它取得有效的值，则调用该方法，否则返回对象本身

　　　　　　2，如果提供了第二个参数，则应用这个过滤器，传入函数过滤器的值是第一步返回的值

　　　　　　3，对第二步返回的每个值进行相应的序列化。

　　　　　　4，如果提供了第三个参数，执行相应的格式化。

小结： JSON是一个轻量级的数据格式。js使用js语法的子集表示对象、数组、字符串、数值、布尔值和null。 es5定义了一个原生的json对象，可以用来将js对象转化为JSON字符串或者将JSON解析为js对象。 JSON.stringify和JSON.parse也可以接受一些选项，通过他们改变过滤方式。

　　

3，ajax

　　页面的局部刷新技术。

　　1，XMLHttpRequest对象

　　　　new XMLHttpRequest()　

　　　　使用XHR对象的时候，要调用的第一个方法时open（），它接受3个参数，要发送请求的类型（get，post等），请求的URL和表示是否异步发送的布尔值。

　　　　要发送特定的请求，必须调用send（）方法； send方法接收一个参数，即作为请求主体发送的数据。如果不需要，则必须传入null。调用send后，请求就会被分派到服务器。

　　　　在收到相应后，响应的数据会自动填充XHR的属性。相关的属性有以下：

　　　　responseText：作为响应主体被返回的文本

　　　　responseXML：如果响应的类型为text/xml或application/xml，这个属性将保存着响应数据的XML DOM文档。

　　　　status： 响应的HTTP状态。

　　　　statusText：HTTP状态的说明

　　　　在接收到响应后，第一步是检查status属性。以确定响应成功返回。状态代码为200 或者为304时，可以意味着响应为有效的。

　　　　XHR对象的readyState属性表示请求/响应过程的当前活动阶段。有以下取值：

　　　　0：未初始化，尚未调用open方法

　　　　1：启动。已经调用open，尚未调用send

　　　　2：发送。调用send，未收到响应

　　　　3：接收。接收部分响应数据

　　　　4：完成。接收到全部数据，可以使用

　　　　可以监听readystatechange事件，在事件内部判断响应状态和活动阶段。

　　　　

　　　　HTTP头部信息

　　　　每个HTTP请求和响应都会带有相应的头部信息。默认的头部信息如下：

　　　　Accept：浏览器能处理的内容类型

　　　　Accept-Charset： 浏览器能显示的字符集　　　　

　　　　Accept-Encoding： 浏览器能够处理的压缩编码

　　　　Accept-Language： 浏览器当前设置的语言

　　　　Connection ： 浏览器与服务器之间连接的类型

　　　　Cookie： 当前页面设置的任何Cookie

　　　　Host： 发出 请求的页面所在的域

　　　　Referer： 发出请求的URI。

　　　　User-Agent： 浏览器用户代理字符串

　　　　使用setRequestHeader（） 方法可以设置自定义的请求头部信息。接收两个参数：头部字段名称和 值。必须在调用open之后，send之前调用setRequestHeader方法。

　　　　建议使用自定义的头部字段名称。不要使用浏览器正常发送的字段名称。

　　

　　2，get请求

　　　　向服务器查询某些信息。可以将查询字符串参数追加到URL的末尾。对于XHR来说，传入open的查询字符串必须经过正确的编码。

　　3，post请求

　　　　向服务器发送应当被保存的数据。post是把数据作为请求的主体提交，

　　

4，XMLHttpRequest 2

　　1，FormData：

　　2，跨源资源共享

　　　　ajax的主要限制就是跨域安全策略。 默认情况下XHR对象只能访问与包含它的页面位于同一个域中的资源。

　　　　CORS：使用自定义的http头部让浏览器与服务器进行沟通，需要符加一个Origin头部。 不能使用setRequestHeader设置自定义头部。不能发送和接受cookie。

　　　　

　　　　其他跨域技术：

　　　　　　1，图片Ping：动态创建图像，侦听onload和onerror事件。 主要用于跟踪用户点击页面和广告曝光。 缺点是 只能发送GET请求和无法访问服务器响应的文本。

　　　　　　2，JSONP： 动态创建script元素，服务器返回一个函数，参数为需要获得的数据，客户端可以调用这个函数，就能取到参数中的数据。

　　　　　　3，Comet： 服务器向页面推送数据的技术。 分为 长轮询和流。

　　　　　　　　长轮询是页面发起一个到服务器的请求，然后服务器一直保持连接打开。直到有数据可发送。随即又发送一个新请求到服务器。这一过程在页面打开期间一直持续不断。

　　　　　　　　HTTP流是在生命周期内只使用一个http连接。 浏览器向服务器发送请求之后，服务器保持连接打开，然后周期性的向浏览器发送数据。

　　　　　　4，服务器发送事件

　　　　　　　　SSE API是用于创建到服务器的单向连接。服务器通过这个连接可以发送任意数量的数据。服务器响应的MIME类型必须是text/event-stream。

　　　　　　　　要订阅事件流，首先要创建一个新的EventSource对象。 并传进一个入口点。

　　　　　　　　还有三个事件： open（） 在连接时触发。

　　　　　　　　　　　　　　　 message（） ： 在从服务器接收到新事件时触发

　　　　　　　　　　　　　　    error（） ： 在无法建立连接时触发。

　　　　　　　　

　　　　　　5，Web Sockets

　　　　　　　　web scokets的目标是在一个单独的持久连接上提供全双工、双向通信。在js中创建websocket之后，会有一个http请求发送到浏览器以发起连接。在取得服务器响应后，建立的连接会从HTTP服务交换为websocket协议。也就是说，只有支持这种协议的服务器才能实现websocket。

　　　　　　　　websockets API：

　　　　　　　　　　要创建web socket，先实例一个websocket对象并传入要连接的URL

　　　　　　　　　　var socket = new Websocket（'ws:// www.xxx.com'）

　　　　　　　　　　必须要给websocket构造函数传入绝对url，同源策略对websocket不适用，因此可以打开到任何站点的连接。至于是否可以与页面通信，则取决于服务器

　　　　　　　　　　实例化websocket对象后，浏览器就会马上尝试创建连接。 websocket也有一个表示当前状态的readystate属性。0表示正在建立连接。1表示已经建立连接。2表示正在关闭连接。3表示已经关闭连接。

　　　　　　　　　　关闭websocket连接可以调用close（）方法； readystate值立即变为2，在关闭之后变为3.

　　　　　　　　　　使用send（）方法来发送数据。 只能发送纯文本数据，对于复杂类型，先进行序列化。

　　　　　　　　　　监听message事件来接收

　　　　　　6，SSE与Web sockets

　　　　　　　　web sockets协议不同于http，要查看现有的服务器能否用于web socket通信。

　　　　　　　　如果必须要双向通信，那么web sockets更好，XHR与SSE的组合也可以。  如果只是读取服务器的数据，那么SSE比较容易实现。