《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:在连接关闭时触发。
未完待续。。。
转载于:https://www.cnblogs.com/qzccl/p/5317337.html
《JavaScript高级程序设计》心得笔记-----第四篇章相关推荐
- JavaScript高级程序设计---学习笔记(四)
1.全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以. var age = 29;window.color = "red";delete age;/ ...
- 《javascript高级程序设计》笔记:原型图解
文章直接从原型图解开始的,如果对一些概念不太清除,可以结合后面几节查看 1. 图解原型链 1.1 "铁三角关系"(重点) function Person() {}; var p = ...
- 《javascript高级程序设计》笔记:内存与执行环境
上一篇:<javascript高级程序设计>笔记:继承 近几篇博客都会围绕着图中的知识点展开 由于javascript是一门具有自动垃圾收集机制的编程语言,开发者不必担心内存的分配和回收的 ...
- 《javascript高级程序设计》笔记:变量对象与预解析
上一篇:<javascript高级程序设计>笔记:内存与执行环境 上篇文章中说到: (1)当执行流进入函数时,对应的执行环境就会生成 (2)执行环境创建时会生成变量对象,确定作用域链,确定 ...
- JavaScript高级程序设计学习笔记(三)
分享一下第五章(引用类型)的笔记,内容比较多,我拆成了两部分,今天这部分是关于Object.Array.Date和RegExp类型的. 以下的笔记是书上一些我以前学习的时候,没有太重视的js基础知识, ...
- javascript高级程序设计学习笔记
javascript高级程序设计,当枕头书已经好久了~zz 现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...
- 《JavaScript高级程序设计》笔记总结
在北京上班的我每天在上下班路上的时间总共是两个半小时,为了充实这两个多小时的时间,我便花了银子换得了下面这个宝贝 本书内容(引用书中前言) 本书提供了JavaScript开发人员必须掌握的内容,全面涵 ...
- 《JavaScript高级程序设计》笔记:变量、作用域和内存问题(四)
基本类型和引用类型的值 ECMAScript变量可能包含两种不同数据类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段,而引用类型的值指那些可能有多个值构成的对象. 动态的属性 var p ...
- Javascript高级程序设计第二版第四章--变量,作用域及内存问题--笔记
由于JavaScript 变量松散类型的本质,决定了它是在特定时间用于保存特定值的一个名字而已,变量的值及其数据类型可以在脚本的生命周期内改变.这可能既有趣又强大,同时又容易出问题. 4.1 语法 E ...
最新文章
- UVa 10701 - Pre, in and post
- c语言数组数据的输入,在C语言中,数组中的值如何输入到函数中?
- php_中替换换行符
- 数据库引起的性能瓶颈应如何优化?
- 数据可视化(BI报表的开发)第三天
- 西北大学计算机排行,世界排名领先,西北大学到底有多厉害?
- 数据库中有痣但是有时取不到_农村这种长得像“泥鳅”的鱼,以前没人吃,现在可能有钱都吃不到...
- [转载] Java三元运算符示例
- 面向对象JavaScript入门——来自Mozilla的官网教程
- nodejs+vue+elementui房屋租赁网站系统 python协同过滤推荐系统
- Rayleigh-Ritz法和Galerkin法
- PostgreSQL使用pgAdmin3不能编辑表里的数据
- Unity3D C#数学系列之求点到直线的距离
- Tableau Desktop 10.4.2 的安装和激活
- 关于偏微分、全微分总结
- Assembler - 数据段与代码段
- jordan标准 相似_矩阵的Jordan标准形及其相似变换矩阵.pdf
- 动态生成的chosen实现模糊查询
- 启动计算机时听到嘀嘀声,笔记本电脑开机嘀嘀滴声音如何解决
- UML预约挂号系统建模(团队作业)
热门文章
- 单片机c语言编程300例_趣味c语言编程100例(四)
- c++ vector最大值_第14章 火柴人的无尽冒险(《C和C++游戏趣味编程》配套教学视频)...
- 决策树模型回归可视化分析_Excel进行线性回归模型分析的操作——「杏花开生物医药统计」...
- 综合评价模型的缺点_浅谈交通影响评价中不同交通预测方法的特性
- 3d相册 html 代码_HTML5 3D立体图片相册
- centos7.3允许mysql远程连接_Centos7.3 安装Mysql和远程登录到Mysql-Go语言中文社区
- java return用法_Java枚举的高级用法之多键值的映射使用
- python opencv教程rtsp server_Python多进程opencv调用rtsp视频流
- arraylist从大到小排序_初学Python最简易入门之十四排序算法10对字典排序
- jmeter学习指南之深入分析跨域传递cookie