Ajax关键技术
1.异步提交对象的创建
/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
2.简单的发出请求模型(2001年前的办法)
function callServer() {
// Get the city and state from the web form
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
// Only go on if there are values for both fields
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;
// Build the URL to connect to
var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
// Open a connection to the server
xmlHttp.open("GET", url, true);
// Setup a function for the server to run when it's done
xmlHttp.onreadystatechange = updatePage;
// Send the request
xmlHttp.send(null);
}
// 响应函数
function updatePage() {
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;
}
}
3.XMLHttpRequest详解
方法
● open()：建立到服务器的新请求。
● send()：向服务器发送请求。
● abort()：退出当前请求。
● readyState：提供当前 HTML 的就绪状态。
● responseText：服务器返回的请求响应文本。
open() 方法来完成。该方法有五个参数：
● request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送HEAD 请求。
● url：要连接的 URL。
● asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true。
● username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。
● password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。
xmlHttp.readyState参数
● 0：请求没有发出（在调用 open() 之前）。
● 1：请求已经建立但还没有发出（调用 send() 之前）。
● 2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。
● 3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。
● 4：响应已完成，可以访问服务器响应并使用它。
HTTP 状态码(xmlHttp.readyState虽然=4,还可能会有错误)
function updatePage() {
if (request.readyState == 4)
if (request.status == 200)
alert("Server is done!");
}
● 200：一切正常
● 401：未经授权
● 403：禁止
● 404：没找到
● 301：永久移动
● 302：找到（请求被重新定向到另外一个 URL/URI 上）
● 305：使用代理（请求必须使用一个代理来访问所请求的资源）
获取请求头
function getSalesData() {
createRequest();
var url = "/boards/servlet/UpdateBoardSales";
request.open("HEAD", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
function updatePage() {
if (request.readyState == 4) {
alert(request.getAllResponseHeaders());
}
}
如:
request.getResponseHeader("Content-Length");获取长度
request.getResponseHeader("Content-Type");获取内容类型
注意:
请求页面必须在同一个域.
onreadystatechange是在调用 send() 之前设置的
4.Document Object Model( DOM )展示
Dom是树结构
属性不重复,子对象可重复
只有元素(Element)具有属性
节点的属性
● nodeName 报告节点的名称（详见下述）。
● nodeValue 提供节点的 “值”（详见后述）。
● parentNode 返回节点的父节点。记住，每个元素、属性和文本都有一个父节点。
● childNodes 是节点的孩子节点列表。对于 HTML，该列表仅对元素有意义，文本节点和属性节点都没有孩子。
● firstChild 仅仅是 childNodes 列表中第一个节点的快捷方式。
● lastChild 是另一种快捷方式，表示 childNodes 列表中的最后一个节点。
● previousSibling 返回当前节点之前 的节点。换句话说，它返回当前节点的父节点的 childNodes 列表中位于该节点前面的那个节点（如果感到迷惑，重新读前面一句）。
● nextSibling 类似于 previousSibling 属性，返回父节点的 childNodes 列表中的下一个节点。
● attributes 仅用于元素节点，返回元素的属性列表。
节点方法
● 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节点类型
● 文档节点表示整个 HTML 文档。
● 元素节点表示 HTML 元素，如 a 或 img。
● 属性节点表示 HTML 元素的属性，如 href（a 元素）或 src（img 元素）。
● 文本节点表示 HTML 文档中的文本，如 “Click on the link below for a complete set list”。这是出现在 p、a 或h2 这些元素中的文字。
Javascript文档节点
document
documentElement (<html>)
document 对象创建新节点
● createElement(elementName) 使用给定的名称创建一个元素。
● createTextNode(text) 使用提供的文本创建一个新的文本节点。
● createAttribute(attributeName) 用提供的名称创建一个新属性。
元素节点
○ getAttribute(name) 返回名为 name 的属性值。
○ removeAttribute(name) 删除名为 name 的属性。
○ setAttribute(name, value) 创建一个名为 name 的属性并将其值设为 value。
○ getAttributeNode(name) 返回名为 name 的属性节点（属性节点在 下一节 介绍）。
○ removeAttributeNode(node) 删除与指定节点匹配的属性节点。
○ getElementsByTagName(elementName) 返回具有指定名称的元素节点列表。
属性节点
● getAttribute(name) 返回名为 name 的属性值。
● removeAttribute(name) 删除名为 name 的属性。
● setAttribute(name, value) 创建一个名为 name 的属性并将其值设为 value。
文本节点
● appendData(text) 将提供的文本追加到文本节点的已有内容之后。
● insertData(position, text) 允许在文本节点的中间插入数据。在指定的位置插入提供的文本。
● replaceData(position, length, text) 从指定位置开始删除指定长度的字符，用提供的文本代替删除的文本。
节点类型判断
1. Node.ELEMENT_NODE 是表示元素节点类型的常量。
2. Node.ATTRIBUTE_NODE 是表示属性节点类型的常量。
3. Node.TEXT_NODE 是表示文本节点类型的常量。
4. Node.DOCUMENT_NODE 是表示文档节点类型的常量。
如:if (someNode.nodeType == Node.TEXT_NODE)IE不能使用常量
5.数据处理
XML
xmlHttp.setRequestHeader("Content-Type", "text/xml");设置发送XML格式
var xmlDoc = request.responseXML;响应XML
var showElements = xmlDoc.getElementsByTagName("show");
JSON表示法
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "[email protected]" }
数组
{ "people": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "[email protected]" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "[email protected]" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "[email protected]" }
]}
可直接赋值
var people = { "firstName": "Brett", "lastName":"McLaughlin", "email": "[email protected]" }
转换成JSON
String newJSONtext = people.toJSONString();
使用POST请求发送
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send(people.toJSONString());
JSON服务端解析需要解析器