1.Ajax核心工作机制:<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
1. 对象初始化并发出XMLHttpRequest请求
Ø XMLHttpRequest 对象 整个Ajax开发的基础。提供客户端与服务器端异步通信的能力
Ø IE5.0 XMLHttpRequest = new ActiveXObject("Msxm12.XMLHTTP");
Ø IE5.5 XMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
Ø 其他不支持ActiveX控件的 XMLHttpRequest= new XMLHttpRequest()；
2.
var httprequest;
if (window.XMLHttpRequest)
{ // if Mozilla, Safari etc
httprequest=new XMLHttpRequest()
if (httprequest.overrideMimeType) //使浏览器处理服务器包含XML mime-type头部信息//确保返回的内容包含text/xml信息
httprequest.overrideMimeType('text/xml')
}
else if (window.ActiveXObject)
{ // if IE
try{
httprequest=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
3. 发送HTTP请求
httprequest.open(“GET”,url,true);
httprequest.onreadystatechange=processResponse;
httprequest.send(null);
4. 服务器接受请求并进行处理
5. 服务器返回响应数据
6. 客户端接受返回数据，依据相应数据修改客户端页面效果
function processResponse(){
if(httprequest.readyState==4)
if(httprequest.status==200){
}else{}
}
解释：
Ø open(method,url,asynch,user,password): 开启网页
Ø user 和password 为可选参数，指定请求的用户名和 密码，没有则省略。
Ø post方式提交，必须设置请求头部为
XMLHttpRequest.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
Ø send(string): 向服务器传送数据
Ø onreadystatechange: 状态改变处理函数
Ø readyState 判断请求状态 0,1,2,3,4
Ø onreadystatechange 事件是在readyState状态改变的时候触发的，readyState反应了当前请求的状态:
0,表示状态开始建立，还未初始化，未调用open方法。
1,open 已经调用，还未用send.
2,send已用，数据未发送。
3,请求发送成功，正在接受数据。
4,数据已经接受成功，
Ø status:请求结果的状态200 ,202 ,400 ,404 ,500
Ø 服务器返回的数据格式：
responseXML: 服务器返回的 XML 数据
responseText: 服务器返回的文字內容
接收到数据进行处理：
function handleResponse() {
// 检查请求状态
if(request.readyState == 4){
// 检查 http 相应状态
if(request.status == 200){
// 读取数据
var doc = request.responseText;
// 取得网页上需被更新的结点位置
var node = document.getElementById(“resp");
// 設定該 node 的內容
node.innerHTML =doc.documentElement.childNodes[0].nodeValue;
}
}
}
2.Ajax 开发的基础架构：DOM 文档对象模型
DOM模型主要包括3个部分，分别是核心,html,xml.
它定义了操作文档对象的接口，处理数据时，它首先加载整个文档在内存中，然后可以对文档中任意节点进行处理，并可对节点进行添加，修改，删除
1) DOM中树的根节点：document
2) 节点类型：
1) 元素节点 <font color=”red” size=”12px”>This is text!</font>
2) 属性节点
3) 文本节点
3) 处理DOM中的节点
n 使用document.getElementById()引用指定id 的节点
其它调用方式document.getElementsByTagName
document.getElementsByName（“”）
n 通过节点的childNodes集合属性引用子节点：element.childNodes[0];
其它应用方式 element.firstChild; element.lastChild
引用父节点：element.parentNode
引用兄弟节点：element.nextSibling,element.previousSibling
n 处理属性节点的方式：
elementNode.setAttribute(attributeName,attributeValue);
或elementNode. attributeName= attributeValue
elementNode.getAttribute(attributeName);
n 获取文本节点
elementNode.innerHTML;
4. 改变文档的层次结构
创建元素节点：document.createElement(“table”);
创建文本节点：document.createTextNode(text);
添加节点：elementNode.appendChild(childNode);
// elementNode是父节点，childNode是子节点，只能将节点添加到所有节点之后。删除节点：elementNode.removeChild(childNode);
parentNode.insertBefore(newNode,referenceNode);// newNode是待 插入的新节点，
referenceNode是父节点parentNode中已经存在的 节点。
var cell = document.createElement("td");
var textNode = document.createTextNode("java");
cell.appendChild(textNode);