JavaScript DOM编程艺术 学习笔记（七）动态创建标记

之前见到的dom方法只能用来查找元素。

绝大多数的做法是网页的结构由标记负责创建，javaScript函数只用来改变某些细节而不改变其底层结构。本章将通过创建新元素和修改现有元素来改变网页结构。

过去使用的技术：document.write和innerHTML

 var testdiv = document.getElementById(“testdiv”);

testdiv.innerHTML = “<p> I inserted <em>this</em>content </p>”;

innerHTML属性无细节可言，要想获得细节就必须用dom方法和属性。

innerTHML属性是html专有属性，不能用于任何其他标记语言文档

createElement方法：

如：document.createElement(“p”)；

当一个元素创建出来它还不是任何一棵dom节点树的组成部分，只是一个文档碎片。不过已经有了nodeType值为1 和nodeName值为p

appendChild方法：

把新创建的节点插入某个文档的节点树的最简单的办法是，让它成为这个文档某个现有节点的子节点。

如: var testdiv = document.getElementById(“testdiv”);

var para = document.createElement(“p”)；

testdiv.appendChild(para);

createTextNode方法：

上面的createElement方法是创建元素节点，而这个方法是创建文本节点。同样也是用appendChild来加入进去

insertBefore方法:

因为appendChild方法会把元素加入到父元素的子元素最后一个，如果我想加到中间怎么做呢？用insertBefore

parentElement.insertBefore(newElement,targetElement)

newElement被插入到parentElement的子元素targetElement前面

比如gallery.parentNode.insertBefore(placeholder,gallery)

但是没有insertAfter这个方法！～～

但是可以这样parentElement.insertBefore(newElement,targetElement.nextSibling)

但是这是在targetElement不是最后一个元素的情况下即parentElement.lastChild不为targetElement的情况，如果是这样直接appendChild即可

AJAX

以前页面出现小部分的更新需要重新刷新整个页面，现在用了ajax之后就可以只刷新部分页面，其他的不用重新加载

AJAX的主要优势是对页面的请求以异步的方式发送到服务器，服务器不会用整个页面来影响请求，它会在后台处理请求，与此同时用户还能继续与页面进行交互(即异步)

AJAX核心技术就是XMLHttpRequest对象。以往请求都由浏览器自己发出，现在用了AJAX，可以通过这个对象自己去发，同时自己处理响应。

XMLHttpRequest对象的open方法用来指定服务器要访问的文件，指定请求的类型：get,post,send

request.open(“GET”,”example.txt”,true)；其中第3个参数用来指定请求是否以异步方式发送和处理

request.send(null)；发送请求

request.onreadystatechange是一个事件处理函数，它会在服务器给XMLHttpRequest对象送回响应的时候触发，在这个函数里可以根据返回的状态做处理如：

request.readyState==4的时候 可以拿到request.responseText

0:未初始化 1:正在加载 2:加载完毕 3:正在交互 4:已加载完成 所有数据接收完毕

没有调用open之前为0 调用后为1 

send调用后状态为2或者3

http://www.cnblogs.com/jerry01/archive/2009/09/03/1559624.html

responseText属性用于保存文本字符串

responseXML属性用于保存content-type头部中指定为”text/xml”的数据

在使用Ajax时要注意同源策略，使用XMLHttpRequest对象发送的请求只能访问与其所在的html处于同一个域中的数据，不能向其他域发送请求。

有些浏览器还会限制Ajax请求使用的协议，比如Chrome，如果你使用file://协议从自己硬盘加载example.txt就会看到跨域请求的错误