标签：
向浏览器里的文档动态添加标记的方法：
一. 传统方法：以下两种都是HTML专有的属性，不能用于其他标记语言文档。
1. document.write()：最大的缺点是违背了“行为应该与表现分离”的原则。
2. innerHTML 属性：在需要把一大段HTML内容插入一份文档时，innerHTML属性可以又快又简单的完成这个任务。不过，innerHTML属性不会返回任何对刚插入的内容的引用。
在任何时候，DOM都可以来替代innerHTML。
二. 利用DOM方法：DOM是文档的表示。
1. createElement(ele)：只能创建元素节点
2. createTextNode(text)：创建文本节点
以上两种方法创建出来的节点是DocumentFragment对象（文档碎片），虽然已经在DOM中存在，也有了自己的DOM属性，但是无法显示在浏览器里，要通过appendChild方法、insertBefore方法进行添加。
3. parentEle.appendChild(childEle)：让某个节点成为现有节点的子节点。
4. parentEle.insertBefore(newEle,targetEle)：其实不用搞清楚parentEle具体是哪个，因为targetEle元素的parentNode属性值就是它。
5. js没有提供insertAfter方法，但是我们可以自己去封装一个函数：
insertAfter(oUl,oP);//举个例子
function insertAfter(newEle,targetEle){
var oParent = targetEle.parentNode;
if( oParent.lastChild == targetEle ){
oParent.appendChild(newEle);
}else{
oParent.insertBefore(newEle,targetEle.nextSibling);
}
}
关于在具体使用的时候，确保平稳退化原则，还是要在函数开头对浏览器支持性或者元素是否存在进行检测。
三. Ajax：用于概括异步加载页面内容的技术。依赖于Javascript。
1. XMLHttpRequest对象：核心。充当着浏览器中的脚本（客户端）与服务器之间的中间人的角色。以往请求由浏览器发出，js通过这个对象自己也可以发送请求和处理响应。
1）在test.html旁边创建一个text.txt的文件，充当服务器脚本的输出。------>要注意同源策略：使用XMLHttpRequest对象发送的请求只能访问与其所在的HTML处于同一个域中的数据，不能向其他域发送请求。此外，有些浏览器会限制Ajax请求使用的协议。
2）封装一个得到XMLHttpRequest对象的函数：
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();
};
3）封装一个得到getNewContent函数：
a.指定请求目标（XMLHttpRequest对象的open方法）；b.明确如何处理响应（onreadystatechange事件）；c.发送请求（XMLHttpRequest对象的send方法）
服务器在向XMLHttpRequest对象发回响应时，浏览器会在不同阶段更新readyState属性的值，共有5个可能的值。
访问服务器发回来的数据要通过两个属性完成：XMLHttpRequest.responseText属性 和 XMLHttpRequest.responseXML属性。
function getNewContent(){
var request = getHTTPObject();
if(request){
request.open( "GET", "text.txt", true );
request.onreadystatechange = function(){
if( request.readyState == 4 ){
var para = document.createElement("p");
var txt = document.createTextNode( request.responseText );
para.appendChild(txt);
document.body.appendChild(para);
};
};
request.send(null);
}else {
alert("Sorry, your browser doesn‘t support XMLHttpRequest");
};
};
PS：不要忽略Ajax的异步性，脚本在发送XMLHttpRequest请求之后，仍然会继续执行，不会等待响应返回。
因此，如果其他脚本依赖于服务器的响应，那么就得把响应的代码都转移到指定给onreadystatechange属性的那个函数中。
2. 渐进增强与Ajax：构建Ajax网站最好的方法也是先构建一个常规的网站，然后Hijax它。
3. Hijax：
Ajax应用主要依赖后台服务器，实际上是服务器端的脚本语言完成了绝大部分工作，XMLHttpRequest对象作为服务端和客户端脚本的中间人，只是负责传递请求和响应。
如果把这个中间人请开，浏览器和服务器之间的请求和响应应继续完成而不是中断，只不过花的时间可能会长一点点。
Ajax主要依赖于服务端处理，而非客户端处理。既然如此，就没有理由不能做到平稳退化。
PS：如何判断结构和行为分离？
如果某些元素的存在只是为了让DOM方法处理它们，那么用DOM方法来创建它们才是最合适的选择。
《Javascript DOM编程艺术》--第七章动态创建标记
标签：
原文地址：http://www.cnblogs.com/beileiluan/p/5584102.html
