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对象。

function createXHR(){
    if(typeof XMLHttpRequest != "undefined"){
        return new XMLHttpRequest();
    }
    else if(typeof ActiveXObject != "undefined"){
        if(typeof arguments.callee.activeXString != "string"){
            var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
                i,
                len;
            for(i=0,len=versions.length;i<len;i++){
                try{
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                } catch(ex){
                    //跳过
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    }
    else{
        throw new Error("No XHR object available.");
    }
}

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

　　发送：open()，send()

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

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

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

var xhr = createXHR();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if((xhr.status >=200 && xhr.status <300) || xhr.status == 304){
            alert(xhr.responseText);
        }
        else{
            alert("Request was unsuccessful:" + xhr.status);
        }
    }
};
xhr.open("get","example.txt",true);
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指向。