JavaScript高级程序设计笔记2
2018-02-14 本文已影响0人
woshixixi
[TOC]
JavaScript高级程序设计
第一章 JavaScript简介
第二章 在HTML中使用JavaScript
2.1 script元素
2.2 嵌入代码与外部文件
第三章 基本概念
3.4 数据类型 Undefined Null Boolean Number String Object
3.5 操作符
3.7 函数
第四章 变量、作用域和内存问题
4.1 基本类型和引用类型的值
4.2 垃圾回收
第五章 引用类型
5.2 Array类型
5.3 Date类型
5.4 RegExp类型 支持正则表达式
5.5 Function类型
5.6 基本包装类型 (Boolean Number String)
5.7 单体内置对象 （开发人员不必显式地实例化内置对象，因为已经实例化了）
第六章 面向对象的程序设计
6.1 理解对象
6.2 创建对象
6.3 继承 【只支持实现继承，不支持接口继承】
第七章 函数表达式
7.1 递归
7.2 闭包 【有权访问另一个函数作用域中的变量的函数】
7.3 模仿块级作用域
7.4 私有变量
第八章 BOM
8.1 window对象
8.2 location对象
8.3 Navigator对象
8.4 screen对象
8.5 history对象
第九章 客户端检测
9.1 能力检测
9.2 怪癖检测
9.3 用户代理检测
第十章 DOM
10.1 节点层次
10.2 DOM操作技术
第十一章 DOM扩展
11.1 选择符API
1. querySelector()
参数：CSS选择符 返回：匹配的第一个元素，或者null
var myDiv = document.querySelector("#myDiv");
2. querySelectorAll()
参数：CSS选择符 返回：匹配的所有元素，NodeList实例
3.matchesSelector()
参数：CSS选择器 返回：若调用元素与选择器匹配则为true，否则false
11.2 元素遍历
防止选择到空白文本节点
childElementCount 子元素个数(不包含文本节点和注释)
firstElementChild 第一个子元素
lastElementChild 最后一个子元素
previousElementSibling 前一个同辈元素
nextElementSibling 后一个同辈元素
11.3 HTML5
1. 类相关扩展
getElementByClassName()
document对象上调用，返回与类名匹配的所有元素
元素上调用，返回后代元素中匹配的元素
返回对象为NodeList对象
classList
对元素的类进行操作
add(value) 给定字符串添加到列表中
contains(value) 确认列表中是否有给定的值
remove(value) 删除给定的字符串
toggle(value) 若已存在，则删除，若没有，则添加
2. 焦点管理
document.activeElement 引用DOM当前获得焦点的元素
document.hasFocus() 确定文档是否获得焦点
3. HTMLDocument的变化 [HTML5扩展新功能]
1. readyState属性：
loading[正在加载文档]、complete[已经完成加载文档]
2. 兼容模式 compatMode属性:
"CSS1Compat"[标准模式]、"BackCompat"[混合模式]渲染页面模式
3. head属性
4. 字符集属性
charset属性 表示文档中实际使用的字符集，默认为"UTF-16"
可使用<meta>元素、响应头部或直接设置charset属性进行修改
defaultCharset 表示默认浏览器及操作系统的设置
5. 自定义数据属性
给元素添加非标准属性，要添加前缀"data-",与渲染无关，提供语义信息
dataset属性访问自定义属性的值: div.dataset.data-myname
6. 插入标记
innerHTML属性
读模式：返回与调用元素的所有子节点对应的HTML标记
写模式：解析为响应的DOM树，然后用DOM树完全替换调用元素原先的所有子节点
outerHTML属性
读模式：返回与调用元素及所有子节点对应的HTML标签
写模式：解析为响应的DOM树，然后用DOM树完全替换调用元素
insertAdjacentHTML()方法
第一个参数，插入位置：beforebegin[在当前元素前插入对应同辈元素]/afterbegin/beforeend/afterend
第二个参数：要插入的HTML文本
内存与性能：
若插入大量的HTML标记，则使用innerHTML比多次DOM操作效率更高
因为innerHTML和outHTML会创建一个HTML解析器，因此要避免频繁使用innerHTML
7. scrollIntoView()方法
可在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素出现在视口中
若传入true，或不传，则调用元素顶部与视口齐平
若传入false，底部齐平
11.4 专有扩展
1. 文档模式
IE5 混杂模式渲染页面
IE7 IE7标准模式渲染页面
IE8 IE8标准模式渲染页面 可使用选择符API、HTML5功能、CSS2 CSS3等
IE9 IE9标准模式渲染页面 可使用完整的CSS3 HTML5 和ECMAScript5
2. children属性
element.children.length
element.children[0]
3. contains()方法
某节点是否为另一个节点的后代，返回true为后代
compareDocumentPosition() 返回表示关系的掩码，若为16 则是被包含的关系【给定的节点是参考节点的后代】
4. 插入文本
innerText
读取值：由浅入深的顺序，将子文档树种的所有文本拼接起来
写入值：删除元素的所有子节点，插入包含响应文本值的文本节点
textContent 会返回其他文本一样返回行内的样式和脚本代码
outerText
范围扩大到包含调用它的节点
5. 滚动
scrollIntoView()
scrollIntoViewIfNeeded(alignCenter) 当元素不在视口内，滚动到可见
作用对象是元素的容器
scrollByLines(lineCount)
scrollByPages(pageCount)
作用对象是元素自身
第十二章 DOM2和DOM3
12.1 DOM变化
1. 针对XML命名空间的变化
2. 其他方面的变化
1. DocumentType类型的变化
新增了三个属性：publicId、systemId、internalSubset
2. Document类型的变化
importNode()从文档中去的一个节点，导入到另一个文档 HTML中不常用
document.implementation对象规定了两个方法：
createDocumentType() 创建一个新的DocumentType
createDocument() 创建新文档
createHTML-Document() 创建一个完整的HTML文档
3. Node类型的变化
isSupported() 确定当前节点具有什么能力
isSameNode() -|
isEqualNode() -| 节点是相同的类型、属性及attributes和childNodes
setUserData() 将数据指定给节点
4. 框架的变化
HTMLFrameElement和HTMLIFrameElement
...
12.2 样式
给HTML添加指定样式有三种方式：<link>外部样式 <style>嵌入式 及 style特性内联样式
1. 访问元素的样式
float是JavaScript保留子，为style.cssFloat或style.styleFloat
在给style.width添加值时，不要忘了添加单位
1. DOM样式属性和方法
cssText 可访问style特性中的CSS代码
length CSS属性的数量
parentRule CSS信息的CSSRule对象
getPropertyCSSValue(propertyName) 包含给定属性值的CSSValue对象
...
2. 计算的样式
document.defaultView.getComputedStyle(要取得计算样式的元素,伪元素字符串)
只读
2. 操作样式表
CSSStyleSheet
sheet.insertRule() 向样式表中添加新规则
sheet.deleteRule(0) 删除规则
3. 元素大小
偏移量
元素内容+内边距+边框 大小
offsetHeight offsetWidth
offsetLeft offsetTop
客户区大小
元素内容+内边距 大小
clientWidth clientHeight 内容宽高，不包含边框
滚动大小
scrollHeight scrollWidth 在没有滚动条的情况下，元素的高宽
scrollLeft scrollTop 被隐藏在内容区域左或上方像素数
确定元素大小
getBoundingClientRect() 返回矩形对象，包含left top right bottom属性
12.3 遍历
1. NodeIterator
document.createNodeIterator() 创建新实例
四个参数：root whatToShow filter entityReferenceExpansion
2. TreeWalker
nextNode()
previousNode()
document.createTreeWalker()
四个参数与前面的相同
12.4 范围
选择文档中的一个区域，而不考虑节点的界限
createRange()
setStart()
setEnd()
第十三章 事件
13.1 事件流
1. 事件冒泡
事件由最开始的具体元素接收，然后逐级向上传播到较为不具体的节点
<div>--<body>--<html>--document
2. 事件捕获
在事件到达预定目标前捕获
document--<html>--<body>--<div>
3. DOM事件流
事件捕获阶段
处于目标阶段
事件冒泡阶段
13.2 事件处理程序
1. HTML事件处理程序
onclick = "showMessage()"
function showMessage() {
event 变量 直接访问事件对象
this 等于 事件的目标元素
}
缺点：
2. 作用域在不同浏览器中导致不同结果
3. 紧密耦合，若更改，则需要将HTML和JavaScript代码都进行更改
在处于目标阶段
2. DOM0级事件处理程序
将函数赋值给一个事件处理程序属性
var btn = document.getElementById("myBtn")
btn.onclick = function() {
this.id
}
删除事件处理程序 btn.onclick = null
3. DOM2级事件处理程序
addEventLinstener(要处理事件名，作为事件处理程序的函数，布尔值)
布尔值为true时，在捕获阶段调用事件处理程序，false在冒泡阶段调用事件处理程序
removeEventListener(与add相同，三个参数)
btn.addEventListener("click",function() {...},false);
移除该事件处理程序只能使用remove...，因此无法移除匿名函数
一般添加到冒泡阶段，不要在事件到达目标之前截取事件处理程序
4. IE事件处理程序
添加到冒泡阶段
attachEvent(事件处理程序名称,事件处理程序函数)
detachEvent()
btn.attachEvent("onclick",function() {})
作用域为全局 this === window
调用多次传递不同的时间处理程序，但执行顺序是相反的
5. 跨浏览器的时间处理程序
13.3 事件对象
触发DOM事件时，会产生一个事件对象event
1. DOM中的事件对象
event.currentTarget
event.target
event.cancelable 是否可取消时间的默认行为
target和currentTarget有时候不一定一样，比如当绑定的到body时，target是button元素，因为它是click时间真正的目标，但是按钮上并没有注册时间处理程序，通过冒泡到body上才进行处理的。
阻止默认行为：preventDefault()方法，必须cancelable属性为true时
stopPropagation() 停止时间在DOM层次中的传播，取消进一步的事件捕获或冒泡
event.eventPhase 确定事件当前正位于事件流的哪个阶段
1：捕获阶段 2：处于目标阶段 3：冒泡阶段
event对象只有在时间处理程序执行期间存在，执行完成，event对象销毁
2. IE中的事件对象
3. 跨浏览器的事件对象
13.4 事件类型
1. UI事件
1. load
页面完全加载后(包括所有图像、JavaScript文件、CSS文件等外部文件)，在window上触发
在任意一元素上添加onload特性:<body onload="alert('Loaded!')"></body>
2. unload
页面完全卸载后，在window上触发,如页面切换。
多用在清楚引用，以避免内存泄露
用法类似于load
3. resize
当浏览器窗口呗调整到一个新的高度或宽度时，在window上触发
4. scroll
页面滚动时触发，在滚动期间会重复触发。在window上触发
2. 焦点事件
blur focus(不冒泡)
focusin focusout(冒泡) 失去焦点和获得焦点
3. 鼠标与滚轮事件
click(单击鼠标左键，或按enter) dblclick(双击)
mousedown(按下任意鼠标按钮) mouseup(释放鼠标)
mouseenter(光标从元素外首次移到元素内，不冒泡)
mouseleave(光标从元素上移动到元素外，不冒泡)
mousemove(鼠标在元素内移动)
mouseout(鼠标位于一个元素上方，移入另一个元素)
mouseover(鼠标位于一元素外部，首次移入另一个元素边界)
mousewheel 鼠标滚轮事件
在iOS和Android设备中：
1. 不支持dblclick事件
2. 轻击可单击元素会触发mousemove事件
3. mousemove事件也会触发mouseover和mouseout事件
4. 两个手指放屏幕上且页面滚动时会触发 mousewheel和scroll事件
4. 键盘与文本事件
keydown 按下键盘上任意键，若按住不放，会重复触发
keypress 按下键盘上字符键或ESC触发，按住不放会重复触发
keyup 当用户释放键盘上的键时触发
keyup keydown event对象有keyCode属性,与键盘上一个特定键对应
textInput 用户在可编辑区域中输入字符时触发
5. 复合事件
处理IME的输入序列 可以让用户输入在屋里键盘上找不到的字符
compositionstart IME文本输入打开时触发
compositionupdate
...
6. 变动事件
在DOM中的某一部分变动时给出提醒
DOMSubtreeModified DOM结构中发生任何变化都给出提示
...
7. HTML5事件
1. contextmenue
确定何时显示上下文菜单 会自动阻止默认菜单的显示
2. beforeunload
在页面加载前，阻止操作 弹出系统显示框，使用
event.returnValue = message ，其中message为显示字符串
3. DOMContentLoaded
在形成完整的DOM树之后触发，不管图像、JavaScript文件等是否下载完毕
若不支持该操作，可以使用setTimeout(function(){},0),必须保证为第一个超时调用，也不太能确定是否早于load事件
4. readystatechange
提供与文档或元素的加载状态相关的信息
支持该事件的对象都有一个readyState属性,可能取值如下：
uninitialized未初始化、loading正在加载、loaded加载完毕、interactive交互、complete完成
在与load事件一起使用时，无法预测两个事件触发的先后顺序
5. pageshow pagehide
pageshow 在页面显示时触发，无论该页面是否来自bfcatche，在load事件触发后触发,若页面来自bfcatche，则load事件不会触发
pageshow的event对象有persisted布尔值属性，若页面被保存在bfchache中，则为true，否则为false
pagehide 在页面卸载时触发，在unload事件前，document上触发
6. hashchange
URL参数列表(#号后面的字符串)发生变化时通知开发人员
event.oldURL 变化前参数列表
event.newURL 变化后参数列表
8. 设备事件
1. orientationchange
确定用户合适将设备有横向查看模式切换为纵向查看模式
三个值：0 90 -10
windwo.orientation可访问
2. MozOrientation
设备加速计检测到设备方向改变时
3. deviceorientation
告诉开发人员设备在空中朝向哪儿
4. devicemotion
是否掉下，或者被走着的人手拿着
9. 触摸与手势事件
1. 触摸事件
touchstart 当手指触摸屏幕时触发
touchmove 当手指在屏幕上滑动时连续的触发 调用preventDefault()可阻止滑动
touched 当手指从屏幕上移开时触发
touchcancel 当系统停止跟踪触摸时触发
以上都是会冒泡的，event属性：
bubbles、cancelable、view、clientX、clientY、screenX ...
跟踪触摸的属性：
touches 当前跟踪的触摸操作的Touch对象的数组
targetTouchs 特定于事件目标的Touch对象的数组
changeTouches 自上次触摸以来发生了什么改变的Touch对象的数组
对每个Touch对象，包含下来属性：
clientX clientY 触摸目标在视口出现的x,y坐标
identifier 标识触摸的唯一ID
pageX pageY 触摸目标在页面中的x,y坐标
screenX screenY 触摸目标在屏幕中的x,y坐标
target 触摸的DOM节点目标
使用：event.touches[0].clientX
2. 手势事件
gesturestart 当一个手指按住屏幕，另一个触摸时
gesturechange 触摸屏任何一个手指位置变化时
gestureend 任何一个手指从屏幕上移开时
13.5 内存和性能
1. 事件委托
事务处理程序过多的解决方案，利用冒泡，指定event.id不同的属性，来区别对待，都绑定到document上
优点：document对象访问快，可在页面生命周期的任何时点上添加事务处理程序
只添加一个时间处理程序，需要的DOM引用更少
页面占内存空间更少
2. 移除事件处理程序
最好先通过onunload移除所有时间处理程序
13.6 模拟事件
1. DOM中的事件模拟
1. 模拟鼠标事件
document.createEvent("MouseEvents") 返回的对象有一个名为initMouseEvent()的方法，接收15个参数，最后将对象传给dispatchEvent()方法：
var btn = document.getElementById("myBtn");
//创建事件对象
var event = document.creatEvent("MouseEvents");
//初始化事件对象
event.initMouseEvent("click",true,true,document.defaultView,...);
//触发事件
btn.dispatchEvent(event);
2. 模拟键盘事件
"KeyboardEvent" "KeyEvents"
initKeyEvent() initKeyEvent()
3. 模拟其他事件
"MutationEvents" initMutationEvent()
4. 自定义DOM事件
"CustomEvent" initCustomEvent()
2. IE中的事件模拟
document.crateEventObject()方法创建event对象
手动添加event对象信息
调用fireEvent("onclick",event)触发事件
第十四章 表单脚本
14.1 表单的基础知识
<form> HTMLForm-Element类型，继承了HTMLElement
document.getElementById("form1")/document.forms得到所有的表单
属性和方法：
acceptCharset 服务器能够处理的字符集
action 接受请求的URL
elements 表单中所有的空间的集合
enctype 请求的编码类型
length 表单中控件的数量
method 要发送的HTTP请求类型 get 或 post
name 表单名称
reset() 将所有表单域重置为默认值
submit() 提交表单
target 用于发送请求和接收响应的窗口名称
1. 提交表单
<input type = "submit" ...> 提交按钮
<button type="submit" ></button> 提交按钮
<input type="image"> 图像按钮
preventnDefault() 阻止提交表单
form.submit() js提交表单
2. 重置表单
<input type = "reset">
<button type = "reset"></button>
3. 表单字段
form.elements["name1"] 可根据name属性来取，若不止一个，则返回NodeList
1. 共有的表单字段属性
disable 布尔值，当前字段是否被禁用
form 指向当前字段所属表单的指针，只读
name 当前字段的名称
readOnly 布尔值，当前字段是否只读
tabIndex 当前字段的切换序号
type 当前字段的类型
value 当前字段将被提交给服务器的值
2. 共有的表单字段方法
focus()
blur()
3. 共有的表单字段事件
blur
change 失去焦点且value值改变时触发
focus
14.2 文本框脚本
<input> 单行文本框 size value maxlength type="text"
<textarea> 多行文本框 rows cols
select() 方法，都支持 获得焦点时，选择其所有文本
会触发select事件
selectionStart 文本选择区开头
selectionEnd 文本选择区结尾的偏移量
setSelectionRange()
接收两个参数：要选择的第一个字符的索引、要选择的最后一个字符之后的字符的索引
crateTextRange()
创建一个范围
moveStart()
moveEnd()
collapse()
SelectText()
三个参数：要操作的文本框、要选择文本中第一个字符的索引、要选择文本中最后一个字符之后的索引
6个剪贴板事件
1. beforecopy 在发生复制操作前触发
2. copy 复制操作时触发
3. beforecut 发生剪切操作前触发
4. cut 剪切操作时触发
5. beforepaste 发生粘贴操作前触发
6. paste 粘贴操作时触发
clipboardData对象
window对象的属性
getData()
setData()
clearData()
HTML5约束验证API
1. 必填字段
required属性 任何标注有required的字段，在提交表单时都不能空着
2. 其他输入类型
<input type="email"> 要求输入的文本必须符合电子邮件地址的模式
<input type="url"> 要求输入的文本必须符合URL的模式
3. 数值范围
type = number/range/datetime/datetime-local/date/month/week/time
min、max、step属性
4. 输入模式
pattern属性 比如只想输入数字：pattern="\d+"
5. 检测有效性
checkValidity() 检测表单中某个字段是否有效
validity属性的字段 可告诉你为什么字段无效，其对象包含一系列属性：
cutomError、patternMismatch、rangeOverflow、rangeUnderflow...
6. 禁用验证
novaliidate 告诉表单不进行验证
14.3 选择框脚本
<select>、<option>元素
<select> type selectedIndex ...
<option value="1">1</option> index、label、selected、text、value
<option value="2">2</option>
<option value="3">3</option>
</select>
14.4 表单序列化
14.5 富文本框编辑
在页面中编辑富文本内容
在页面中嵌入一个包含空HTML页面的iframe，通过设置designMode属性，空白HTML页面可被编辑
1. contenteditable属性
将该属性给任何元素，用户就可以编辑该元素
三个值：true(打开) false(关闭) inherit(从父元素继承)
2. 操作富文本
document.execCommand()
三个参数：要执行命令、表示浏览器是否应该为当前命令提供界面的布尔值、执行命令必须的值
3.富文本选区
第十五章 使用Canvas绘图
15.1 基本用法
<canvas></canvas> 必须设置width、height属性
getContext("2d") 获取上下文，传入"2d"即可获取2D上下文
toDataURL("image/png") 可导出在<canvas>元素上绘制的图像
15.2D上下文
1. 填充和描边
fillStyle = "red"/"#0000ff"/"rgba(0,0,255,0.5)"
strokeStyle
2. 绘制矩形
fillRect()
strokeRect()
clearRect()
四个参数：矩阵x坐标，矩阵y坐标，矩阵宽度，矩阵高度 单位：像素
lineWidth属性控制 描边线条宽度由
lineCap 控制 线条模块形状(butt平头/round圆头/square方头)
lineJoin 控制 线条相交方式(round圆交/bevel斜交/miter斜接)
3. 绘制路径
beginPath()开始绘制路径
创建路径方法：
arc(x,y,radius,startAngle,endAngle,counterclockwise)
arcTo(x1,y1,x2,y2,radius)
bezierCurveTo(c1z,c1y,c2x,c2y,x,y)
lineTo(x,y)
moveTo(x,y)
quadraticCurveTo(cx,xy,x,y)
rect(x,y,width,height)
closePath() 绘制一条连接到路径起点的线条
fill()方法填充
stroke()路径描边
clip()路径上创建一个剪切区域
isPointInPath() 在路径关闭之前确定画布上某一点是否位于路径上
4. 绘制文本
fileText()
strokeText()
四个参数：要绘制的文本字符串,x坐标，y坐标，可选的最大像素宽度
font textAlign textBaseline css有默认值
5. 变换
rotate(angle) 围绕远点旋转angle弧度
scale(scaleX,scaleY) 缩放x方向以scaleX，y方向以scaleY
translate(x,y) 将坐标远点移动到(x,y)
transform(m1_1,m1_2,m2_1,m2_2,dx,dy) 修改变换矩阵
setTransform(m1_1,m1_2,m2_1,2_2,dx,dy) 将变换矩阵重置为默认状态，在transform
6. 绘制图像
drawImage(image,x,y)
drawImage(image,x,y,width,height)
drawImage(image,源图像x,源图像y,源图像width,源图像height,目标图像x,目标图像y,目标图像width,目标图像height)
7. 阴影
shadowColor 用css颜色格式表示的引用颜色，默认为黑色
shadowOffsetX 形状或路径x轴方向的阴影偏移量，默认为0
shadowOffsetY 形状或路径y轴方向的阴影偏移量，默认为0
shadowBlur 模糊的像素数，默认为0，即不模糊
8. 渐变
1. 创建新的线性渐变
createLinearGradient(起点x坐标,起点y坐标,终点x坐标,终点y坐标)
创建放射渐变：createRadialGradient(x1,y1,r1,x2,y2,r2)
2. 指定色标
addColorStop(色标位置[0~1],CSS颜色)
3. 设置fillStyle或strokeStyle为该对象
9. 模式
创建一个新模式
createPattern(imag/video/canvas,如何重复图像的字符串)
第二个参数:repeat/repeat-x/repeat-y/no-repeat
10. 使用图像数据
获取原始图像数据:getImageData(要取得数据的化名区域的x,y,该区域像素width,height)
返回对象有三个属性:width height data
data[0]红 [1]绿 [2]蓝 [3]透明度
11. 合成
globalAlpha 透明度0~1（全局）
globalComposition-Operation 表示后绘制的图像怎样与县绘制的图形结合
取值有：source-over/sourci-in/destination-over/.../copy/xor
15.3 WebGL
Canvas的3D上下文
1. 类型化数组
ArrayBuffer 为了将来使用而分配一定数目的字节 创建的对象可通过byteLength属性访问其字节数
1. 视图
用ArrayBuffer创建数组缓冲器视图
2. 类型化视图
2. WebGL上下文
1. 常量
2. 方法命名
3. 准备绘图
4. 视口与坐标
5. 缓冲区
6. 错误
7. 着色器
8. 编写着色器
9. 编写着色器程序
10. 为着色器传入值
11. 调试着色器和程序
12. 绘图
13. 纹理
14. 读取像素
3. 支持
不是所有的浏览器都支持，且有些是禁用的
一些老的机器驱动不是最新的，默认禁用WebGL
第十六章 HTML5脚本编程
第十七章 错误处理与调试
第十八章 JavaScript与XML
第二十章 JSON
20.1 语法
1. 简单值
字符串必须用双引号""
2. 对象
对象的属性名必须加双引号""
3. 数组
20.2 解析与序列化
1. JSON对象
stringify() JavaScript对象序列化为JSON
parse() JSON字符串解析为JavaScript
2. 序列化选项
JOSN.stringify() 可接收另外两个参数：
第二个参数：
数组：只返回该数组中对应的属性值
函数：函数参数为key 和value 过滤后，返回原对象
第三个参数：
每个级别锁紧的空格数
toJSON()方法 可做过滤器，在任意对象中添加该方法
3. 解析选项
JOSON.prase() 可接收另一个参数（函数参数）
第二十一章 Ajax与Comet
21.1 XMLHttpRequest对象
var xhr = new XMLHttpRequest()
1. XHR的用法
1. open(发送请求的类型,请求的URL,是否异步发送请求);
xhr.open("GET","example.php",false)
2. send(请求主题发送的数据)
3. 响应对象
xhr.responseText 作为响应主体被返回的文本
xhr.responseXML 若为"text/xml"或"application/xml"属性中将保持XMLDOM文档
xhr.status 响应的HTTP状态
xhr.statusText HTTP状态的说明
4. 异步请求
检测readyState属性，其取值：
0(未初始化，未调用open方法)
1(启动，已调用open方法，未调用send方法)
2(发送，已调用send方法，未响应)
3(接收，已接收到部分响应数据)
4(完成，已经收到全部响应数据)
readyState 值变化，触发readystatechange事件，必须在调用open前指定onreadystatechange事件
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if((xhr.status >= 200 && xhr.sttus<300) || xhr.status == 304) {
alert(xhr.responseText);
}else {
console.log("Request was unsuccessful"+ xhr.status);
}
}
};
xhr.open("get","example.txt",true);
xhr.send(null);
可使用xhr.abort() 方法取消异步请求
2. HTTP头部信息
请求头部信息
Accept: 浏览器能够处理的内容类型
...
Cookie: 当前页面设置的任何Cookie
Host: 发送请求的页面所在的域
Referer: 发送请求的页面的URL
User-Agent: 浏览器的用户代理字符串
setRequestHeader(头部字段的名称,头部字段的值) 设置请求头部信息
getResponseHeaer("MyHeader"); 传入头部字段名称
getAllResponseHeaders(); 去的包含所有头部信息的长字符串
3. GET请求
向服务器查询信息，将查询字符串参数追加到URL的末尾
4. POST请求
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
21.2 XMLHttpRequest 2级
21.3 进度事件
21.4 跨资源共享
CORS 跨域资源共享 自定义的HTTP头部让浏览器与服务器进行沟通
21.5 其他跨资源技术
图像Ping: 使用<img>标签 网页可以从任何网页中加载图像，
缺点：只能发送GET请求，
无法访问服务器的响应文本 单项通信
JSONP：回调函数(响应到来时应该在页面中调用的函数)和数据
动态添加<script>元素script的src指定为url，参数?callback= handleResponse
只支持GET请求
优点：能够直接访问响应文本，并支持服务器与浏览器的双向通信
缺点：确定请求不容易
Comet:
长轮询：
短轮询：浏览器定时向服务器发送请求，看是否有更新的数据
页面发起请求，服务器报纸连续打开，知道有数据可发送，发送完数据，浏览器关闭连接
流：HTTP流...
SSE 服务器发送时间
建立到服务器的单项连接 服务器可以发送任意数量的数据 响应的MIME类型必须是text/event-stream
Web Sockets
HTTP请求发动到浏览器以发起连接
得到响应后，协议交换为Web Socket协议
wss://
优点：能够发送少量的数据，而不担心HTTP字节级的开销 适合移动应用
21.6 安全
第二十二章 高级技巧
第二十三章 离线应用与客户端存储
23.1 离线检测
navigator.onLine 检测是否在线
online 、offline 事件
23.2 应用缓存
appcache
manifest文件
applicationCache对象 一个status属性
0 无缓存 1 闲置 2 检查中 3 下载中 4 更新完成
...
23.3 数据存储
1. Cookie
1. 限制
cookie在性质上是绑定在特定的域名下的
当设定了一个cookie后，在给创建它的域名发送请求时，都会包含这个cookie
2. cookie的构成
1. 名称(name) 不区分大小写 必须经过URL编码
2. 值(value) 存储在cookie中的字符串值，必须URL编码
3. 域(domain) cookie对于哪个域有效，可包含子域
4. 路径(path=) 指定域中的那个路径，应该向服务器发送cookie
5. 失效时间(expires) cookie合适应该被删除的时间戳
6. 安全标志(secure) 指定后，cookie只有在使用SSL链接的时候才发送到服务器
3. JavaScript中的cookie
最好设置cookie时使用documentty.cookie = encodeURLComponent("name")+"="+encodeURLComponent("zhangsan");
使用decodeURLComponent()来解码
name1=value1;name2=value2 domain=.baidu.com; path=/; secure
4. 子cookie
为了绕开浏览器的单域名下的cookie数限制 subcookie
存放单个cookie中的最小段的数据
格式：name=name1=value1&name2=value2&name3=value3
5. HTTP专有cookie
只能从服务器端读取，JavaScript无法获取HTTP专有cookie的值
2. IE用户数据
3. Web存储机制
1. Storage类型
clear()
getItem(name)
key(index)
removeItem()
setItem(name,value)
2. SessionStorage(无)
浏览器关闭后消失 可以跨越网页刷新存在 绑定于某个服务器对话
sessionStorage.getItem("name")
for(key in sessionStorage){}
3. LocalStorage(5M)
要访问同一个LocalStorage对象，页面必须来自同一个域名 使用同一种协议,在同一个端口
数据保留到通过JavaScript删除或者用户清理浏览器缓存
localStorage.setItem("name","Nicholas")
4. storage事件
Storage对象进行任何修改，都会触发storage事件
该事件的event对象包含以下属性
domain:发生变化的存储空间的域名
key：设置或者删除的健名
newValue：如果是设置值，则是新值，若删除则为null
oldValue：键值被修改前的值
4. IndexedDB
