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比较容易实现。