# 动态创建标记 此前见过的绝大多数DOM方法只能用来查找元素。getElementById和getElementsByTagName都可以方便快捷地找到文档中的某个或某些特定的元素节点，这些元素随后可以用诸如setAttribute和nodeValue之类的方法和属性来处理。在这两种情况里，都是对已经存在的元素做出修改。这是绝大多数JavaScript函数的工作原理。网页的结构有标记负责，JavaScript函数只是来改变某些细节而不改变其底层结构。不过JavaScript也可以通过创建新元素和修改现有元素来改变网页结构。 ## 一些传统方法 ### document.write document对象的write()方法可以方便快捷地把字符串插入到文档里。 示例： ```html Test ``` 将这个html文件加载到web浏览器，你将看到“This is inserted.”的文本段落。 document.write的最大缺点是它违背了“行为应该与表现分离”的原则。从某种意义上讲，使用document.write方法有点像使用\标签去设定字体和颜色。虽然这两种技术在HTML文档里都工作得不错，但它们不够优雅。把结构、行为和样式分开永远是一个好主意。只要有可能，就应该用外部CSS文件代替\标签去设定和管理网页的样式信息，最好用外部JavaScript文件去控制网页的行为。应该避免在\部分乱用\ ``` ## Ajax 以前，web应用都要涉及大量的页面刷新：用户点击了某个链接，请求发送回服务器，然后服务器根据用户的操作再返回新页面。即便用户看到的只是页面的一小部分发生变化，也要刷新和重新加载整个页面。使用Ajax就可以做到只更新页面中的一小部分。 Ajax的主要优势就是对页面的请求以异步方式发送到服务器，而服务器不会用整个页面来响应请求它会在后台处理，与此同时用户还能继续浏览页面并与页面交互。你的脚本则可以按需加载和创建页面内容，而不会打断用户的浏览体验。 ### XMLHttpRequest对象 Ajax技术的核心就是XMLHttpRequest对象。这个对象充当着浏览器中的脚本（客户端）与服务器之间的中间人的角色。以往的请求都由浏览器发出，而JavaScript通过这个对象可以自己发出请求，同时也自己处理响应。 创建XMLHttpRequest对象：微软最早在IE5中以ActiveX对象的形式实现了一个名叫XMLHTTP的对象。在IE中创建新的对象要使用以下代码： ```javascript var request=new ActiveXObject("Msxml2.XMLHTTP.3.0"); ``` 更麻烦的是不同IE版本中使用的XMLHTTP对象也不完全相同。 其他浏览器则基于XMLHttpRequest来创建新对象： ```javascript var request=new XMLHttpRequest(); ``` 为了兼容所有浏览器，我们要写个函数getHTTPObject()达到目的： ```javascript function getHTTPObject(){ if (typeof XMLHttpRequest=="undefined") XMLHttpRequest=function(){ try {return new ActiveXObject("Msxml2.XMLHTTP.6.0");} catch(e){} try{return new ActiveXObject("Msxml2.XMLHTTP3.0");} catch(e){} try{return new ActiveXObject("Msxml2.XMLHTTP");} catch(e){} return false; } return new XMLHttpRequest(); } ``` getHTTPObject通过对象检测技术使其能在不同浏览器实现兼容。用getHTTPObject函数创建XMLHttpRequest对象： ```javascript var request=getHTTPObject(); ``` XMLHttpRequest对象有许多方法。其中最有用的是open方法，它用来**指定**服务器上将要访问的文件，指定请求的类型有：GET、POST和SEND。 例如： ```javascript 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 browser does not support XMLHttpRequest'); } } ``` 当页面加载完成后，以上代码会发起一个GET请求，请求与.html文件位于同一目录的example.txt文件。代码中onreadystatechange是一个事件处理函数，它会在服务器给XMLHttpRequest对象送回响应的时候被触发执行。在指定了请求的目标，也明确了如何响应之后，就可以用send方法来发送请求了：request.send(null);不发送任何数据的请求。 服务器在向XMLHttpRequest对象发回响应时，该对象有许多属性可用，浏览器会在不同阶段更新readyState属性的值： * 0：未初始化 * 1：正在加载 * 2：加载完毕 * 3：正在交互 * 4：完成 只要readyState属性的值变成了4，就可以访问服务器发送回来的数据了。访问服务器发送回来的数据要通过两个属性完成。一个是responseText属性，用于保存文本字符串形式的数据。另一个是responseXML属性，用于保存Content-Type头部中指定为“text/xml”的数据，其实是一个DocumentFragment对象。 > 注意：在使用Ajax时，千万要注意同源策略。使用XMLHttpRequest对象发送的请求只能访问与其所在的HTML处于同一个域中的数据，不能向其他域发送请求。此外，有些浏览器还会限制Ajax请求使用的协议，比如Chrome。 异步请求有一个容易被忽略的问题是异步性，就是脚本在发送XMLHttpRequest请求之后，仍然会继续执行，不会等待响应返回。为此，如果其他脚本依赖于服务器的响应，那么就得把相应的代码都转移到指定给onreadystatechange属性的那个函数中。 ### 渐进增强与Ajax 构建Ajax网站的最好方法，也是先构建一个常规的网站，然后Hijax它。 ### Hijax Hijax是指渐进增强地使用Ajax。