《JavaScript高级程序设计》心得笔记-----第四篇章
第十六章
1、 跨文档消息传送： postMessage("消息", "发送消息的文档所在域")
2、 拖放事件：
1) 拖动某元素会依次触发:dragstart、drag、dragend
2) 当某个元素被拖动到一个有效的放置目标上时，会依次发生：dragenter、 dragover、dragleave 或 drop
3) 自定义放置目标：重写dragenter、dragover
4) dataTransfer(在拖放操作时实现数据交换)：
（1） 两个方法: getData(【text/URL】、【value】)和 setData(【text/URL】)：：【HTML5 也支持"text"和"URL"，但这两种类型会被映射为"text/plain"和"text/uri-list",,,event.dataTransfer.setData()】
（2） dataTransfer 对象的两个属性： dropEffect和effectAllowed。
ps:dropEffect 属性只有搭配 effectAllowed 属性才有用
5) HTML5 为所有 HTML 元素规定了一个 draggable【true、false，IE 10+、 Firefox 4+、 Safari 5+和 Chrome。 Opera 11.5】、
3、 媒体元素【IE9+、 Firefox 3.5+、 Safari 4+、 Opera 10.5+、 Chrome】：
src：指向要加载的媒体文件
poster：指定图像的 URI 可以在加载视频内容期间显示一幅图像
controls：浏览器应该显示 UI 控件
1) <audio>
2) <video>
PS：并非所有浏览器都支持所有媒体格式，所以可以指定多个不同的媒体来源。为此，不用在标签中指定 src 属性，而是要像下面这样使用一或多个<source>元素。
<!-- 嵌入视频 --> <video id="myVideo"> <source src="Video.webm" type="video/webm; codecs='vp8, vorbis'"> <source src="Video.ogv" type="video/ogg; codecs='theora, vorbis'"> <source src="Video.mpg"> Video player not available. </video> <!-- 嵌入音频 --> <audio id="myAudio"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Audio player not available. </audio>
1) 自定义媒体播放器：play()和 pause()方法
2) 检测视频格式：canPlayType(状态对象，新状态的标题，可选的相对 URL)
1、 历史状态管理：
1) hashchange
2) history.pushState()
第十七章
1、 把错误记录到服务器：
首先需要在服务器上创建一个页面（或者一个服务器入口点），用于处理错误数据。这个页面的作用就是从查询字符串中取得数据，然后再将数据写入错误日志中
for (var i=0, len=mods.length; i < len; i++){ try { mods[i].init(); } catch (ex){ logError("nonfatal", "Module init failed: " + ex.message); } }
第十八章
1、 创建一个新的、文档元素为<root>的 XML 文档
var xmldom = document.implementation.createDocument("", "root", null);
2、 将 XML 解析为 DOM 文档：首先必须创建一个 DOMParser 的实例，然后再调用parseFromString(【XML 字符串】、【内容类型（text/xml）】)方法
var parser = new DOMParser(); var xmldom = parser.parseFromString(" “, "text/xml");
3、 将 DOM文档序列化为 XML 字符串: 首先必须创建 XMLSerializer 的实例，然后将文档传入其 serializeToString ()方法
var serializer = new XMLSerializer(); var xml = serializer.serializeToString(xmldom);
4、 IE8 及之前版本中的XML
1) 解析 XML 字符串，首先必须创建一个 DOM 文档，然后调用 loadXML()方法
var xmldom = createDocument(); xmldom.loadXML("<root><child/></root>");
2) 输出解析过程中出错的错误信息：parseError的属性
(1) 看是否解析出错【调用 loadXML()之后、查询 XML 文档之前，检查是否发生了解析错误】：
if (xmldom.parseError != 0){ alert("Parsing error occurred."); }
5、 跨浏览器处理XML：
1) 解析 XML
function parseXml(xml){ var xmldom = null; if (typeof DOMParser != "undefined"){ xmldom = (new DOMParser()).parseFromString(xml, "text/xml"); var errors = xmldom.getElementsByTagName("parsererror"); if (errors.length){ throw new Error("XML parsing error:" + errors[0].textContent); } } else if (typeof ActiveXObject != "undefined"){ xmldom = createDocument(); xmldom.loadXML(xml); if (xmldom.parseError != 0){ throw new Error("XML parsing error: " + xmldom.parseError.reason); } } else { throw new Error("No XML parser available."); } return xmldom; }
2) 序列化 XML
function serializeXml(xmldom){ if (typeof XMLSerializer != "undefined"){ return (new XMLSerializer()).serializeToString(xmldom); } else if (typeof xmldom.xml != "undefined"){ return xmldom.xml; } else { throw new Error("Could not serialize XML DOM."); } }
6、 Xpath（在 DOM 文档中查找节点）:两个类型是 XPathEvaluator 【在特定的上下文中对 XPath 表达式求值】（evaluate()是最常用的）和 XpathResult
7、 跨浏览器使用Xpath:
重新创建 selectSingleNode(上下文节点,XPath表达式,可选的命名空间对象)和selectNodes()方法
1）selectSingleNode
1) function selectSingleNode(context, expression, namespaces){ var doc = (context.nodeType != 9 ? context.ownerDocument : context); if (typeof doc.evaluate != "undefined"){ var nsresolver = null; if (namespaces instanceof Object){ nsresolver = function(prefix){ return namespaces[prefix]; }; } var result = doc.evaluate(expression, context, nsresolver, XPathResult.FIRST_ORDERED_NODE_TYPE, null); return (result !== null ? result.singleNodeValue : null); } else if (typeof context.selectSingleNode != "undefined"){ //创建命名空间字符串 if (namespaces instanceof Object){ var ns = ""; for (var prefix in namespaces){ if (namespaces.hasOwnProperty(prefix)){ ns += "xmlns:" + prefix + "='" + namespaces[prefix] + "' "; } } doc.setProperty("SelectionNamespaces", ns); } return context.selectSingleNode(expression); } else { throw new Error("No XPath engine found."); } } 使用： var result = selectSingleNode(xmldom.documentElement, "wrox:book/wrox:author", { wrox: "http://www.wrox.com/" });
2）selectNodes
2) function selectNodes(context, expression, namespaces){ var doc = (context.nodeType != 9 ? context.ownerDocument : context); if (typeof doc.evaluate != "undefined"){ var nsresolver = null; if (namespaces instanceof Object){ nsresolver = function(prefix){ return namespaces[prefix]; }; } var result = doc.evaluate(expression, context, nsresolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); var nodes = new Array(); if (result !== null){ for (var i=0, len=result.snapshotLength; i < len; i++){ nodes.push(result.snapshotItem(i)); } } return nodes; } else if (typeof context.selectNodes != "undefined"){ //创建命名空间字符串 if (namespaces instanceof Object){ var ns = ""; for (var prefix in namespaces){ if (namespaces.hasOwnProperty(prefix)){ ns += "xmlns:" + prefix + "='" + namespaces[prefix] + "' "; } } doc.setProperty("SelectionNamespaces", ns); } var result = context.selectNodes(expression); var nodes = new Array(); for (var i=0,len=result.length; i < len; i++){ nodes.push(result[i]); } return nodes; } else { throw new Error("No XPath engine found."); } } 使用：var result = selectNodes(xmldom.documentElement, "wrox:book/wrox:author", { wrox: "http://www.wrox.com/" });
第二十章
1、 JSON的字符串必须引用双引号（””）
2、 JSON种类：
1) {
“name”:”ccl”,
“age”:23
}
2) [“ccl”,23]
3) [
{
“name”:”ccl”,
“age”:23,
friend:[“ss”,”ddd”]
},
{
“name”:”csa”,
“age”:23,
friend:[“ss”,”ddd”]
}
]
3、 JSON对象：
1) JSON对象序列化：var jaonText(JSON字符串) = JSON.stringify(b【JavaScript值】);
2) JSON字符串转换为JavaScript值：var b1【JavaScript值】= JSON.parse(jaonText(JSON字符串));
4、 序列化选项：
1) JSON.stringify(【b】,【数组或者函数或者null】 ,【缩进（数值，所有>10的都会自动转换成10）或者空白格或者字符串】)
2) 将某个属性置为underfined的时候就忽略该属性
3) 可以为任何对象添加toJSON()方法
【toJSON:function(){return this.name;}】
5、 解析选项：
1) JSON.parse(【jaonText】,【函数】)
2) 可以给任何对象添加releaseDate ()方法【releaseDate:new Date(2011,11,1)】
第二十一章
1、 IE7+、Chorme、Safri、Opera、Firefox都支持原生的XHR，但是IE7之前的版本会有所不同：可以使用：
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."); } }
在用var xhr = createXHR()来创建。。。
6、 XHR的用法：
1) open(【get/post】,【请求的url地址】,【是否发送异步请求(true、false)】):
2) send(【如果不需要请求主体发送数据，设为null】):
3) 收到响应后，响应的数据会自动填充XML对象的属性
（1） responseText【响应主体被返回的文本】
（2） responseXML【响应的内容类型如果是”text/html”、”application/xml”， 这个属性将保存包含着响应数据的XML DOM文档】
（3） status【响应的http状态，200（成功）、304（请求资源没有被修改）】
（4） statusText【http状态的说明】
（5） 异步请求：：检测readyState的值来判断【0：未初始化、1：启动、2：发送、3：接收、4：完成】。但是需要在调用open()之前指定才能确保浏览器的兼容性。
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); } } };
（1） xhr.abort():在接收到响应之前可以调用来取消异步请求
6、 HTTP头部信息：
1) setResponsetHeader(【头部字段的名称】、【头部字段的值】)可以设置自定义的请求头部信息，必须放在open()之后，send（）之前。
2) setAllResponsetHeaders()取得所有的头部信息
7、 Get请求：
需要查询字符串的格式，使用encodeURIComponent()进行编码
function addURLParam(url, name, value) { url += (url.indexOf("?") == -1 ? "?" : "&"); url += encodeURIComponent(name) + "=" + encodeURIComponent(value); return url; } var url = "example.php"; //添加参数 url = addURLParam(url, "name", "Nicholas"); //初始化请求 xhr.open("get", url, false);
9、POST请求:要记得先设置Content-Type， xhr.open("post", "postexample.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var form = document.getElementById("user-info");
xhr.send(serialize(form));
在页面中：php中使用：$_POST[‘ ‘]。。
如果没有设置Content-Type，使用$HTTP_POST_DATA
10、 FormData:为序列化表单和创建与表单格式相同的数据提供便利【Chorme、Safri5+、Firefox4+】
xhr.open("post","postexample.php", true);
var form = document.getElementById("user-info");
xhr.send(new FormData(form));
11、 超时设定：timeout【只适用于IE8】
xhr. timeout =1000; xhr.ontimeout = function(){ alert("Request took too long."); };
12、 重写MIME类型：overrideMimeType()【Chorme、Safri4+、Firefox、Opera 10.5】调用的时候必须在send()之前
xhr.overrideMimeType("text/xml");
13、 进度事件
1) load事件【IE不支持】，浏览器接收到服务器的响应，不管结果如何，都会触发
2) progress事件
14、 XDR【IE8】和XHR有区别
15、 Comet:
1) 长轮询
2) HTTP流【createStreamingClient(要连接的 URL、在接收到数据时调用的函数以及关闭连接时调用的函数)】
16、 WebSocket：
var socket = new WebSocket(url);
1) 发送连接：socket.send();
2) 关闭连接：socket.close();
3) open：在成功建立连接时触发。
4) error：在发生错误时触发，连接不能持续。
5) close：在连接关闭时触发。
未完待续。。。
