Ajax核心工作机制

1.Ajax核心工作机制:
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 I
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{}
}
解释：[/b]
[/b]
Ø 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 [/b]开发的基础架构：[/b]DOM [/b]文档对象模型[/b][/b]
DOM[/b]模型主要包括[/b]3[/b]个部分，[/b]分别是核心，html.xml.
它定义拉操作文档对象的接口，处理数据时，它首先加载整个文档在内存中，然后可以对文档中任意节点进行处理，并可对节点进行，添加，修改，删除
1) [/b]DOM[/b]中树的根节点：document[/b]
2) [/b]节点类型：[/b]
1) 元素节点 <font color=”red” size=”12px”>This is text!</font>
2) 属性节点
3) 文本节点
3) [/b]处理DOM[/b]中的节点[/b]
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.getAttribute(attributeName);
n 获取文本节点
elementNode.innerHTML;
4. 改变文档的层次结构
[/b]创建元素节点：document.createElement(“table”);//
创建文本节点：document.createTextNode(text);
添加节点：elementNode.appendChild(childNode);//
// elementNode是父节点，childNode是子节点，只能将节点添加到所有节点3后。
删除节点：elementNode.removeChild(childNode);

parentNode.insertBefore(newNode,referenceNode); newNode是待 插入的新节点，
referenceNode是父节点parentNode中已经存在的 节点。

var cell = document.createElement("td");
var textNode = document.createTextNode("java");
cell.appendChild(textNode);