@tsingwong 2016-02-17T12:41:57.000000Z 字数 2978 阅读 795

DOM day5

DOM JavaScript

DOM day5

1. Ajax

Ajax，用于概括异步加载网页内容的技术。
以前，WEb应用都要设计大量的页面刷新：用户点击了一个链接，请求发送回服务器，然后服务器根据用户的操作再返回新页面。
使用Ajax可以做到只更新页面的一小部分。其他内容都不用重新加载。
Ajax主要优势就是对页面的请求以异步方式发送到服务器。而服务器不会用整个页面来响应请求，它会在后台处理请求，与此同时用户还能继续浏览页面并与页面交互。脚本则可以按需加载和创建页面内容，而不会打断用户端浏览体验。

1. XMLHttpRequest对象

Ajax技术核心是XMLHttpRequest对象，这个对象充当了浏览器中的脚本（客户端）与服务器之间的中间人的角色。以往请求都是由浏览器发起，而JavaScript通过这个对象可以自己发送请求，同时也自己处理响应。

function getHTTPObject(){
    if (typeof XMLHttpRequest == "undefined") {
        XMLHttpRequest = function(){
            try{
                return new ActiveXObject("Msxml2.XMLHTTP.6.0");
            }catch (e) {}
            try{
                return new ActiveXObject("Msxml2.XMLHTTP.3.0");
            }catch (e) {}
            try {
                return new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e) {}
            return false;
        }
        return new XMLHttpRequest();
    }
}

XMLHttpRequest 对象有许多方法，其中最有用的是open方法，同来制定服务器上将要访问的文件，指定请求类型：GET、POST或SEND。这个方法的第三个参数用于指定请求是否以异步方式发送和处理。

function getNewContent(){
    var request = getHTTPObject();
    if (request) {
        request.open("GET","example.txt",true);
        request.onreadystatechange = function(){
            if (request.readyState == 4) {
                var para = document.createElement("p");
                var txt = document.createTextNode(request.responseText);
                para.appendChild(txt);
                document.getElementById("new").appendChild(para);
            }
        };
        request.send(null);
    }else{
        alert("Sorry, your brower doesn't support XMLHTTPRequest");
    }
}
addLoadEvent(getNewContent);

页面加载完成后，以上代码会发起一个GET请求，请求与ajax.html文件位于同一目录下的example.txt文件。

request.open("GET","example.txt",ture);

onreadystatechange是一个事件处理函数，会在服务器给XMLHttpRequest对象发送响应时被触发执行。可以指定处理函数，也可以引用函数。注意：在指定函数引用时，不要在函数名后加括号。因为加括号表示立即调用函数，而我们只是把函数自身的引用（并不是函数结果）赋值给onreadystatechange属性。

指定了请求目标，也明确了如何处理响应后，就可以用send方法来发送请求了：

request.send(null);

如果浏览器不支持XMLHttpRequest对象，返回false。
服务器在向XMLHttpRequest对象发回响应时，该对象许多属性可用，浏览器会在不同阶段更新readState属性值，有5个可能值：
* 0表示为初始化
* 1表示正在加载
* 2表示加载完毕
* 3表示正在交互
* 4表示完成
只要readyState属性值变成4，就可以访问服务器发送回来的数据了。
访问服务器发送回来的数据要通过两个属性完成，一个是responseText属性，用于保存文本字符串形式的数据；另一个是responseXML属性，用于保存Content-Type头部中指定为“text/xml”数据，其实是一个DOcumentFragement对象。

使用Ajax时，千万注意同源策略。使用XMLHttpRequest对象发送请求只能访问与所在HTML处于同一个域中的数据。

异步请求，异步性，即脚本在发送XMLHttpRequest请求之后，仍会继续执行，不会等待响应返回。

2. DOM两条重要原则

渐进增强：总应该从最核心部分，即从内容开始。应该根据内容使用标记实现良好的结构，然后再逐步加强这些内容。增强工作即可以通过CSS改进呈现效果，也可以通过DOM增加各种行为。

平稳退化：渐进增强的实现必然支持平稳退化。按照渐进增强的原则去充实内容，为内容增加的样式和行为就自然支持平稳退化。

注：<abbr>与<acronym>都有缩略词的意思。在HTML5中多用<abbr>。

3. 选用HTML、XHTML还是HTML5

不管选用哪种文档类型，使用的标记必须与你选用的DOCTYPE声明保持一致。

若使用XHTML DOTYPE ，文档开头：

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

使用HTML5的文档类型声明：

<!DOCTYPE html>

注：某些浏览器根据DOCTYPE来决定使用标准模式还是兼容模式来呈现页面。HTML5 DOCTYPE默认对应的是标准模式。

引用body标签有两种做法;
1.使用DOM Core，即引用某给定文档的第一个（也是唯一一个）body标签

document.getElementsByTagName("body")[0]

2.使用HTML-DOM，即引用某给定文档的body属性：

document.body

4. 快捷键

asscesskey属性可以把一个元素（如链接）与键盘上的某个特定按键关联在一起。
一般来说，在window系统浏览器里快捷键用法是Alt键+特定的键，Mac系统浏览器里快捷键是Ctrl键+特定的键。
例：

Home

5. 小结

在需要对文档里的现有内容进行检索时，以下DOM方法最有用：
1. getElementById
2. getElementsByTagName
3. getAttribute
在需要把信息添加到文档里去，以下DOM方法最有用：
1. createElement
2. createTextNode
3. appendChild
4. insertBefore
5. setAttribute
以上组合能编写出功能强大的DOM脚本。
但谨记：JavaScript脚本只应该用来充实文档的内容，要避免使用DOM技术来创建核心内容