• js高程笔记16-20章


    第16章 HTML5脚本编程

    1.跨文档消息传送XDM:向包含在当前页面的<iframe>元素或由当前页面弹出的窗口传递数据。

      原窗口发送:postMessage(内容,目标域名)

      目标窗口接收后触发window对象的message事件,event对象的属性有data,origin,source

    2.原生拖放:

      拖放事件:拖放元素上dragstart,drag,dragend,放置元素上dragenter,dragover,dragleave或者drop

      dataTransfer对象:event对象的属性,利用拖放传递字符串数据。

        两个方法:getData()和setData()

        数据只能在drop事件处理程序读取

    3.媒体元素:<audio>,<video>

    4.历史管理状态:history对象

    第17章 错误处理和调试

    1.类型转换错误:使用"==="和"!=="避免发送类型转换

            未使用的命名变量会自动赋予undefined,undefined可以转换成false

            在判断语句中使用非布尔值,容易发送错误

    2.数据类型错误:将预料之外的值传递给函数,容易发送错误

            基本类型的值用typeof检测,对象的值使用instanceof检测

    3.通信错误:url未用encodeURIComponent()进行编码

    第18章 js与XML

    第19章 E4X

    第20章 JSON

    1.JSON可以表示的值类型有:简单值,对象,数组

    2.简单值:字符串必须用双引号

    3.对象:对象字面量跟js有三点不同:没有声明变量,没有末尾分号,属性名必须加双引号

        同一个对象不应该出现同名属性

    4.数组:JSON数组没有变量和分号

    5.解析:json对象的方法:stringify()把js对象序列化为JSON字符串,可以根据第二个参数过滤结果,根据第三个参数控制缩进

                 parse()把JSON字符串解析为js值

                 toJSON()作为stringify()的补充

    第21章 Ajax和Comet

    1.Ajax:无须刷新页面即可从服务器取得数据,但不一定是XML数据。

    2.XMLHttpRequest对象:兼容IE7以下版本,IE7+和其他浏览器都支持原生XHR对象。

     1 function createXHR(){
     2     if(typeof XMLHttpRequest != "undefined"){
     3         return new XMLHttpRequest();
     4     }
     5     else if(typeof ActiveXObject != "undefined"){
     6         if(typeof arguments.callee.activeXString != "string"){
     7             var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
     8                 i,
     9                 len;
    10             for(i=0,len=versions.length;i<len;i++){
    11                 try{
    12                     new ActiveXObject(versions[i]);
    13                     arguments.callee.activeXString = versions[i];
    14                     break;
    15                 } catch(ex){
    16                     //跳过
    17                 }
    18             }
    19         }
    20         return new ActiveXObject(arguments.callee.activeXString);
    21     }
    22     else{
    23         throw new Error("No XHR object available.");
    24     }
    25 }

    3.XHR用法:只能向同一个域中使用相同端口和协议的URL发送请求。

      发送:open(),send()

      收到响应:status属性,检查浏览器状态码,200或者304

           readyState属性,表示请求响应过程的活动阶段,一般只关心值4。只要值有变化就会触发readyStatechange事件。

           必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。因为该事件也会侦听open()。

     1 var xhr = createXHR();
     2 xhr.onreadystatechange = function(){
     3     if(xhr.readyState == 4){
     4         if((xhr.status >=200 && xhr.status <300) || xhr.status == 304){
     5             alert(xhr.responseText);
     6         }
     7         else{
     8             alert("Request was unsuccessful:" + xhr.status);
     9         }
    10     }
    11 };
    12 xhr.open("get","example.txt",true);
    13 xhr.send(null);

      取消异步请求:abort()

    4.操作HTTP头部信息:setRequestHeader(),getResponseHeader(),getAllResponseHeaders()

    5.GET请求:如果往URL后面添加信息,要将参数的名称和值使用encodeURIComponent()进行编码。

    6.POST请求:可以使用XHR模仿表单的提交,将表单数据序列化,方便传值,否则要逐个取。

    7.XHR 2级:

      FormData对象:append()方法,向对象实例中添加键值对。可以向构造函数直接传入表单元素,自动完成表单序列化。

      超时设定:timeout事件

      进度事件:load事件代替readyStatechange事件,不用检查readyState属性

           progress事件可以显示接收数据进度,必须在open()方法前添加事件

    8.跨源资源共享:默认情况下,Ajax只能同一个域中的资源。

            CORS跨源资源共享 ajax可以通过输入绝对路径实现get请求,

    9.其他跨域技术:图像Ping,通过<img>标签的src实现跨域,弊端:只能get,无法访问服务器响应数据。

            JSONP,通过<script>标签的src指定回调函数,弊端:其他域如果不安全会夹带恶意代码,不好确定是否失败。只能get

            comet:长轮询,相对与短轮询

                                      HTTP流,浏览器向服务器发送一个请求,服务器保持连接打开,周期性向浏览器发送数据。关键是服务器端将结果打印到输出缓存然后刷新。

    10.web Sockets:在一个单独的持久连接提供全双工、双向通信。弊端:指定ws协议的时间太长,可能服务器不支持。适合需要双向通信的时候。

    11.安全问题:

      CSRF:跨站点请求伪造,对于未被授权系统有权访问某个资源,办法:验证发送请求者是否有权限访问资源,比如要求使用SSL连接,或者要求每次请求附带经过相应算法得到的验证码。

    第22章 高级技巧

    1.作用域安全的调用函数:在构造函数中用this指定属性时,如果是直接调用该函数,this便指向window,可能会影响原本window对象的属性。因此在构造函数中先使用this instanceof Person判断一下。

    2.惰性载入函数:在函数有很多if语句的时候,如果知道函数每次都会执行某种相同的操作,那么在进行第一次判断时,就将函数赋值为该操作,这样再次调用就会直接调用新的函数。

    3.函数绑定:ES5提供了bind()函数,将函数绑定到某个对象的环境上,指定this指向。

  • 相关阅读:
    UE4 WCF RestFul 服务器 读取JSON 数据并解析 简单实例
    Android aidl Binder框架浅析
    AIDL
    android 五种存储方式
    Android进程间通信机制
    Service全面总结
    Android平台中关于音频播放
    Android广播机制
    Cursor,CursorAdapter中的观察者模式解析
    ContentProvider和Uri详解
  • 原文地址:https://www.cnblogs.com/little-jelly/p/5766712.html
Copyright © 2020-2023  润新知