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指向。