《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：在连接关闭时触发。

 

 

未完待续。。。