码迷,mamicode.com
首页 > Web开发 > 详细

HTML5权威指南读书笔记【第五部分】

时间:2014-12-11 15:51:42      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:读书笔记   web应用   html5   html   web   

1、Ajax简单获取网页内容的示例:
function handleButtonPress(e) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = handleResponse;
    httpRequest.open(“GET”, e.target.innerHTML + “.html”);
    //httpRequest.open(“GET”, e.target.innerHTML + “.html”, true(true表示异步), “用户名”, “密码”);
    httpRequest.send();
}
function handleResponse(e) {
    if (e.target.readyState == XMLHttpResquest.DONE && e.target.status == 200) {
        document.getElementById(“target”).innerHTML = e.target.responseText;
    }
}
应对Opera的处理:
readystatechange事件不会生成一个Event对象
XMLHttpRequest.DONE类似常量确实,直接使用状态数字4
2、open之后 httpRequest.setRequestHeader(“X-HTTP-Method-Override”, “DELETE”)
形式上其实是再发送一个POST请求
httpRequest.setRequestHeader(“Cache-Control”, “no-cache”) 避免内容缓存
3、跨源访问 服务器添加“Access-Control-Allow-Origin”:”http://titan” 
允许该域名跨域访问
var origin = req.headers[“origin”];
if (origin.indexOf(“titan”) > -1) {
    res.setHeader(“Access-Control-Allow-Origin”, origin);
}//*代表全部允许
4、httpRequest.abort() 中止请求
5、e.preventDefault()组织默认响应
6、使用FormData传递数据
var formData = new FormData(form);
使用formData之后就不需要指定header的Content-Type了 会被默认修改成multipart/form-data
formData.append(键值对)
7、发送json数据
var formData = new Object();
formData[键] = 值;
设置头信息 httpRequest.setRequestHeader(“Content-Type”, “application/json”)
httpRequest.send(JSON.stringify(formData))
parse(<json>) 转化为字符串(应该说是对象,解析好的对象)
8、上传进度:
var upload = httpRequest.upload;
upload.onprogress = function(e) {
    progress.max = e.total;
    progress.value = e.loaded;
}
upload.onload = function(e) {
    progress.value = 1;
    progress.max = 1;
}
9、类型覆盖
httpRequest.overrideMimeType(“text/html”)
10、xml类型 application/xml
var xmlDoc = httpRequest.responseXML;
11、video preload=“none” 不播放显示空白 metadata 会获取视频的第一帧
但是preload属性可以被浏览器屏蔽掉 利用poster属性显示一张占位图更合适一些
12、video 嵌套source添加了多种视频来源选择,会按照顺序匹配 同样适用于audio
13、controls显示默认的操作控件
14、canvas height width 中间填写不支持信息
15、绘图简单示例
var ctx = document.getElementById(“canvas”).getContext(“2d”)
ctx.fillRect(10, 10, 50, 50);实心
strokeRect空心
clearRect清除该矩形区域的绘制
ctx.lineWidth = 2线宽
lineJoin控制交汇处图形 round bevel(斜切) miter(默认)
ctx.fillStyle  strokeStyle 设置颜色
16、绘制一条路径的步骤方法包括:
beginPath->moveTo移动到起点->arc和lineTo等方法绘制子路径->调用closePath(可选)->fill或stroke方法
17、lineCap控制末端样式 butt、round、square
18、绘制圆弧arcTo(x1,y1,x2,y2,rad) 依赖于从起点到x1,y1  从x1,y1到x2,y2的两条直线 半径为rad的最短弧
bubuko.com,布布扣
19、绘图获取鼠标移动
var canvasElem = document.getElementById(“canvas”);
var ctx = canvasElem.getContext(“2d”);
canvasElem.onmousemove = function(e) {
    if (e.ctrlKey) {//判断按键
        point1 = [e.clientX, e.clientY];//鼠标坐标
    }
}
20、ctx.arc(圆心横坐标,圆心纵坐标,半径,初始角度Math.PI/2,结束角度,true(true为逆时针 false为顺时针))
21、ctx.beginPath() -> ctx.rect() -> ctx.clip() rect区域内部的绘制可以显示
22、img.dragged 定义拖拽时的样式
23、地理信息获取
navigator.geolocation.getCurrentPosition(displayPosition);
function displayPosition(pos) {
    pos.coords[“longitude”]
}
24、web缓存
localStorage.setItem(key,value)
localStorage.clear()
localStorage.length
var key = localStorage.key(i)
var val = localStorage[key]
storageArea会返回发生变化的storage对象
sessionStorage会话存储
会在本次会话结束时清除用法与localStorage类似
25、离线Web应用离线清单
CACHE MANIFEST
example.html(把html本身也加入到清单中)
banana100.png
apple100.png
常为.appcache命名
<html manifest=“fruit.appcache”>
25、离线备用区域
FALLBACK:
*.png offline.png
* offline.html
如果需要未被离线缓存的png文件,就应当用offline.png代替
链接到为缓存的文档时,使用备用文件代替

HTML5权威指南读书笔记【第五部分】

标签:读书笔记   web应用   html5   html   web   

原文地址:http://blog.csdn.net/idaodao/article/details/41866877

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!