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

  • 相关阅读:
    第五周课程总结&实验报告(三)
    第四周Java实验总结&学习总结
    第三周课程总结&实验报告
    第二周JAVA学习总结
    大一学习总结
    寒假第一次作业
    寒假第二次作业
    第十周课程总结
    第九周课程总结&实验报告(七)
    第八周课程总结&实验报告(六)
  • 原文地址:https://www.cnblogs.com/wjyz/p/10288901.html
Copyright © 2020-2023  润新知