首页 > 代码库 > HTML5权威指南读书笔记【第五部分】

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

2024-08-07 10:41:01   233人阅读

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 = http://www.mamicode.com/new FormData(form);
使用formData之后就不需要指定header的Content-Type了 会被默认修改成multipart/form-data
formData.append(键值对)
7、发送json数据
var formData = http://www.mamicode.com/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 = http://www.mamicode.com/e.loaded;>
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的最短弧

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权威指南读书笔记【第五部分】


联系
我们