# 动态创建标记 此前见过的绝大多数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。 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://lewiszlw.gitbook.io/notebooks/blogs/history/dong-tai-chuang-jian-biao-ji.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.