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