AJAX与DOM模型

AJAX与DOM节点

创建XMLHttpRequest
<script language="javascript" type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
</script>


XMLHttpRequest 简介
该对象的很少的几个 方法和属性。
* open()：建立到服务器的新请求。
* send()：向服务器发送请求。
* abort()：退出当前请求。
* readyState：提供当前 HTML 的就绪状态。
* responseText：服务器返回的请求响应文本。
* setRequestHeader：设置请求头

open()方法有五个参数：
* request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求。
* url：要连接的 URL。
* asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true。
* username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。
* password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。


GET请求
function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
需要特别注意的是该属性在代码中设置的位置 —— 它是在调用 send() 之前设置的。
发送请求之前必须设置该属性，这样服务器在回答完成请求之后才能查看该属性。

POST请求
function validate() {
var username = document.getElementById("userName").value;
//要发送的字符串数据
var content = "id=hello&message=" + username + "&say=我是帅哥";
var url = "validate.do";
request.open("post", url, true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.onreadystatechange = callback;
//send函数发送请求，参数
request.send(content);
}

send() 只有一个参数，就是要发送的内容
如果需要发送安全信息或 XML，可能要考虑使用 send() 发送内容，如果不需要通过 send() 传递数据，则只要传递 null 作为该方法的参数即可


HTTP 就绪状态
在 Ajax 应用程序中需要了解五种就绪状态：
* 0：请求没有发出（在调用 open() 之前）。
* 1：请求已经建立但还没有发出（调用 send() 之前）。
* 2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。
* 3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。
* 4：响应已完成，可以访问服务器响应并使用它。

对于 Ajax 编程，需要直接处理的惟一状态就是就绪状态 4，它表示服务器响应已经完成。
检查就绪状态
function updatePage() {
if (request.readyState == 4)
alert("Server is done!");
}

HTTP 状态码
* 401：未经授权
* 403：禁止
* 404：没找到
* 200：一切正常

检查 HTTP 状态码
function updatePage() {
if (request.readyState == 4)
if (request.status == 200)
alert("Server is done!");
}

增加一点错误检查
function updatePage() {
if (request.readyState == 4)
if (request.status == 200)
alert("Server is done!");
else if (request.status == 404)
alert("Request URL does not exist");
else
alert("Error: status code is " + request.status);
}

读取响应文本
服务器返回的数据保存在 XMLHttpRequest 对象的 responseText 属性中

其他请求类型
实际上生成 HEAD 请求非常简单；您可以使用 "HEAD"（而不是 "GET" 或 "POST"）作为第一个参数来调用 open() 方法
使用 Ajax 生成一个 HEAD 请求
function getSalesData() {
createRequest();
var url = "/boards/servlet/UpdateBoardSales";
request.open("HEAD", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
当您这样生成一个 HEAD 请求时，服务器并不会像对 GET 或 POST 请求一样返回一个真正的响应。相反，服务器只会返回资源的 头（header），这包括响应中内容最后修改的时间、请求资源是否存在和很多其他有用信息。您可以在服务器处理并返回资源之前使用这些信息来了解有关资源的信息。
对于这种请求您可以做的最简单的事情就是简单地输出所有的响应头的内容。
function updatePage() {
if (request.readyState == 4) {
alert(request.getAllResponseHeaders());
}
}

有用的 HEAD 请求
您会发现 HEAD 请求非常有用的一个领域是用来查看内容的长度或内容的类型。这样可以确定是否需要发回大量数据来处理请求，和服务器是否试图返回二进制数据，而不是 HTML、文本或 XML（在 JavaScript 中，这 3 种类型的数据都比二进制数据更容易处理）。
要获取响应的长度，只需要调用 request.getResponseHeader("Content-Length");
要获取内容类型，请使用 request.getResponseHeader("Content-Type");。

AJAX传值中文乱码解决方法
AJAX传值时采用的是UTF-8编码格式，客户端中文字符传输到服务器端时，如果服务器编码格式或者所采用的MVC框架的编码格式不是UTF-8，则很可能会出现中文乱码。解决办法如下：
客户端用js函数encodeURI()对中文字符进行两次编码 ，服务器端采用URLDecoder 类对客户端传输过来的中文字符进行UTF-8格式的解码。

客户端代码:
$.ajax({
type: "post",
url: "createNewGroup.action",
data:"name="+encodeURI (encodeURI ("张三")),
success: function(msg){
alert(msg);
}
});

服务器端代码:
String name = URLDecoder.decode ("客户端传输过来的中文字符","UTF-8");

服务器端往客户端传输中文字符出现乱码时，服务器端可采用URLEncoder类对中文字符进行UTF-8格式的编码。客户端采用js函数decodeURI()对服务器端传输过的中文字符进行两次解码。
或者设置response.setCharacterEncoding("utf-8");

DOM节点的属性

DOM 节点的属性主要有：
nodeName 报告节点的名称
nodeValue 提供节点的 "值"
parentNode 返回节点的父节点。记住，每个元素、属性和文本都有一个父节点。
childNodes 是节点的孩子节点列表。该列表仅对元素有意义，文本节点和属性节点都没有孩子。
firstChild 仅仅是 childNodes 列表中第一个节点的快捷方式。
lastChild 是另一种快捷方式，表示 childNodes 列表中的最后一个节点。
previousSibling 返回当前节点之前的节点。换句话说，它返回当前节点的父节点的 childNodes 列表中位于该节点前面的那个节点（如果感到迷惑，重新读前面一句）。
nextSibling 类似于 previousSibling 属性，返回父节点的 childNodes 列表中的下一个节点。
attributes 仅用于元素节点，返回元素的属性列表

DOM节点方法
insertBefore(newChild, referenceNode)将newChild节点插入到referenceNode之前。记住，应该对 newChild 的目标父节点调用该方法。
replaceChild(newChild, oldChild) 用 newChild 节点替换 oldChild 节点。
removeChild(oldChild) 从运行该方法的节点中删除 oldChild 节点。
appendChild(newChild) 将 newChild 添加到运行该函数的节点之中。newChild 被添加到目标节点孩子列表中的末端。
hasChildNodes() 在调用该方法的节点有孩子时则返回 true，否则返回 false。
hasAttributes() 在调用该方法的节点有属性时则返回 true，否则返回 false。

节点类型
文档节点表示整个 HTML 文档。document
元素节点表示 HTML 元素，如 a 或 img。
属性节点表示 HTML 元素的属性，如 href（a 元素）或 src（img 元素）。
文本节点表示 HTML 文档中的文本


文档节点
可使用 document 对象创建新节点
createElement(elementName) 使用给定的名称创建一个元素。
createTextNode(text) 使用提供的文本创建一个新的文本节点。
createAttribute(attributeName) 用提供的名称创建一个新属性。
但是并没有将其附加或者插入到特定的文档中。 因此，必须使用前面所述的方法如 insertBefore() 或 appendChild() 来完成这一步。因此，可使用下面的代码创建新元素并将其添加到文档中：
var pElement = myDocument.createElement("p");
var text = myDocument.createTextNode("Here's some text in a p element.");
pElement.appendChild(text);
bodyElement.appendChild(pElement);

元素节点
1.与属性处理有关的方法：
* getAttribute(name) 返回名为 name 的属性值。
* re moveAttribute(name) 删除名为 name 的属性。
* setAttribute(name, value) 创建一个名为 name 的属性并将其值设为 value。
* getAttributeNode(name) 返回名为 name 的属性节点（属性节点在 下一节 介绍）。
* removeAttributeNode(node) 删除与指定节点匹配的属性节点。
2.与查找嵌套元素有关的方法：
*getElementsByTagName(elementName) 返回具有指定名称的元素节点列表。

处理属性
处理元素很简单，比如可用 document 对象和上述方法创建一个新的 img 元素：
var imgElement = document.createElement("img");
imgElement.setAttribute("src", "http://www.headfirstlabs.com/Images/hraj_cover-150.jpg");
imgElement.setAttribute("width", "130");
imgElement.setAttribute("height", "150");
bodyElement.appendChild(imgElement);

查找嵌套元素
if (bodyElement.hasChildNodes()) {
for (i=0; i<bodyElement.childNodes.length; i++) {
var currentNode = bodyElement.childNodes[i];
if (currentNode.nodeName.toLowerCase() == "img") {
bodyElement.removeChild(currentNode);
}
}
}
也可以使用 getElementsByTagName() 完成类似的功能
// Remove all the top-level <img> elements in the body
var imgElements = bodyElement.getElementsByTagName("img");
for (i=0; i<imgElements.length; i++) {
var imgElement = imgElements.item[i];
bodyElement.removeChild(imgElement);
}

属性节点

文本节点

nodeType 属性

DOM 节点类型定义了一些常量，表示节点类型
1. Node.ELEMENT_NODE 是表示元素节点类型的常量。
2. Node.ATTRIBUTE_NODE 是表示属性节点类型的常量。
3. Node.TEXT_NODE 是表示文本节点类型的常量。
4. Node.DOCUMENT_NODE 是表示文档节点类型的常量。
var someNode = document.documentElement.firstChild;
if (someNode.nodeType == Node.ELEMENT_NODE) {
alert("We've found an element node named " + someNode.nodeName);
} else if (someNode.nodeType == Node.TEXT_NODE) {
alert("It's a text node; the text is " + someNode.nodeValue);
} else if (someNode.nodeType == Node.ATTRIBUTE_NODE) {
alert("It's an attribute named " + someNode.nodeName
+ " with a value of '" + someNode.nodeValue + "'");
}
JavaScript 中使用 Node 常量，IE6不支持都会报错