深入解析Ajax与DOM文档对象模型在Web开发中的应用-优快云博客

1.Ajax核心工作机制:

1.对象初始化并发出XMLHttpRequest请求

ØXMLHttpRequest 对象整个Ajax开发的基础。提供客户端与服务器端异步通信的能力

ØIE5.0 XMLHttpRequest = new ActiveXObject("Msxm12.XMLHTTP");

ØIE5.5 XMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

Ø其他不支持ActiveX控件的 XMLHttpRequest= new XMLHttpRequest()；

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);

例子代码：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script language="javascript">
       var http_request = false;
       function send_request(url) {//初始化、指定处理函数、发送请求的函数
              http_request = false;
              //开始初始化XMLHttpRequest对象
              if(window.XMLHttpRequest) { //Mozilla 浏览器
                     http_request = new XMLHttpRequest();
                     if (http_request.overrideMimeType) {//设置MiME类别
                            http_request.overrideMimeType("text/xml");
                     }
              }
              else if (window.ActiveXObject) { // IE浏览器
                     try {
                            http_request = new ActiveXObject("Msxml2.XMLHTTP");
                     } catch (e) {
                            try {
                                   http_request = new ActiveXObject("Microsoft.XMLHTTP");
                            } catch (e) {}
                     }
              }
              if (!http_request) { // 异常，创建对象实例失败
                     window.alert("不能创建XMLHttpRequest对象实例.");
                     return false;
              }
              http_request.onreadystatechange = processRequest;
              // 确定发送请求的方式和URL以及是否同步执行下段代码
              http_request.open("GET", url, true);
              http_request.send(null);
       }
       // 处理返回信息的函数
    function processRequest() {
        if (http_request.readyState == 4) { // 判断对象状态
            if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
                alert(http_request.responseText);
            } else { //页面不正常
                alert("您所请求的页面有异常。");
            }
        }
    }
</script>
</head>
<body>
	<input type="button" value="test" onclick="send_request('http://localhost:8080/Test/servlet/Test');"></body>
</html>