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

 

posted @ 2019-01-18 17:32  ken丶123  阅读(299)  评论(0编辑  收藏  举报