AJAX技术中Javascript、XMLHttpRequest、DOM、XML比较有用。

一、介绍

A、XMLHttpRequest对象

XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。

XMLHttpRequest对象的主要方法：

abort() 停止当前请求。

open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 设置未决的请求的目标URL，方法，和其他参数。

send(content)发送请求。

XMLHttpRequest对象的主要属性：

onreadystatechange 状态改变的事件触发器

readyState 对象状态(integer): 0 = 未初始化1 = 读取中2 = 已读取3 = 交互中4 = 完成。

responseText 服务器进程返回数据的文本版本。

responseXML 服务器进程返回数据的兼容DOM的XML文档对象。

status 服务器返回的状态码, 如：404 = "文件未找到" 、200 ="成功"。

B、Javascript

　　Javascript一直被定位为客户端的脚本语言，应用最多的地方是表单数据的校验。现在，可以通过Javascript操作XMLHttpRequest，来跟数据库打交道。

C、DOM

　　DOM（Document Object Model）是提供给HTML和XML使用的一组API，提供了文件的表述结构，并可以利用它改变其中的内容和可见物。脚本语言通过DOM才可以跟页面进行交互。Web开发人员可操作及建立文件的属性、方法以及事件都以对象来展现。比如，document就代表页面对象本身。Javascript技术其实大部分都是DOM技术。

常用的方法：document.body.appendChild(oDiv);

1、 获取节点

例如：document.getElementById("MessageNote").innerText = "您有" + length + "条新的消息！";

2、 设置属性

例如：document.getElementById("Ib_Messages").style.visibility = "visible";

3、 创建节点

例如：var oDiv = document.createElement("DIV");

4、 删除节点

document.getElementById("Div_Message").parentElement.removeChild(document.getElementById("Div_Message"));

5、 添加节点

document.body.appendChild(oDiv);

详细介绍请参考：

D、XML

　　通过XML（Extensible Markup Language），可以规范的定义结构化数据，是网上传输的数据和文档符合统一的标准。用XML表述的数据和文档，可以很容易的让所有程序共享。

二、使用

步骤一、创建请求对象

if （window.XMLHttpRequest) // Mozilla, Safari, ...

{

http_request = new XMLHttpRequest();

}

else if (window.ActiveXObject) // IE5以上

{

http_request = new ActiveXObject("Microsoft.XMLHTTP");

}

步骤二、指定响应处理函数

　　接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了。比如：

http_request.onreadystatechange = processRequest;

　　需要指出的时，这个函数名称不加括号，不指定参数。也可以用Javascript即时定义函数的方式定义响应函数。比如：

http_request.onreadystatechange = function() { };

步骤三、发出HTTP请求

指定响应处理函数之后，就可以向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。

http_request.open('GET', 'http://www.example.org/some.file', true,'','');

http_request.send();

open的第一个参数是HTTP请求的方法，为Get、Post。Post可以最大发送4M数据,Get最大发送256K数据。

open的第二个参数是目标URL。

open的第三个参数是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为True，则不会继续执行，直到服务器返回信息。默认为True。

按照顺序，open调用完毕之后要调用send方法。send的参数如果是以Post方式发出的话，可以是任何想传给服务器的内容。

步骤四、处理服务器返回的信息

　　在第二步已经指定了响应处理函数，这一步，来看看这个响应处理函数都应该做什么。

　　首先，它要检查XMLHttpRequest对象的readyState值，判断请求目前的状态。参照前文的属性表可以知道，readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：

if (http_request.readyState == 4)

{

// 信息已经返回，可以开始处理

}

else

{

// 信息还没有返回，等待

}

　　服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200代表页面正常。

if (http_request.status == 200)

{

// 页面正常，可以开始处理信息

}

else

{

// 页面有问题

}

XMLHttpRequest对成功返回的信息有两种处理方式：

responseText：将传回的信息当字符串使用；

responseXML：将传回的信息当XML文档使用，可以用DOM处理。

三、例子

功能：实时读取数据库而不刷新页面。

前台js代码：

var xmlhttp = null;//一定要定义为全局变量

function getMessages()

{

if (window.XMLHttpRequest) // Mozilla, Safari, ...

.载点网整理

{

xmlhttp = new XMLHttpRequest();

}

else if (window.ActiveXObject) // IE5以上

{

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange = processRequest;

xmlhttp.open("GET","GetMessages.aspx?"+new Date(),false,"","");

xmlhttp.send();

setTimeout('getMessages()',3000);

}

function processRequest()

{

if (xmlhttp.readyState == 4)

{ // 判断对象状态

if (xmlhttp.status == 200)

{ // 信息已经成功返回，开始处理信息

// 从服务器得到处理后的xml对象

var xmldom = new ActiveXObject("Microsoft.XMLDOM");

xmlhttp.responseXML.createProcessingInstruction("xml"," version=\"1.0\" encoding=\"gb2312\"");

xmldom = xmlhttp.responseXML.documentElement;

// 通过xmldom操作结果

var length = xmldom.getElementsByTagName("NOTIFYID").length;

if(length > 0)

{

document.getElementById("MessageNote").innerText = "您有" + length + "条新的消息！";

document.getElementById("Ib_Messages").style.visibility= "visible";

}

else

{

document.getElementById("MessageNote").innerText = "";

document.getElementById("Ib_Messages").style.visibility= "hidden";

}

}

else

{ //页面不正常

alert("您所请求的页面有异常。");

}

}

}

window.onload = getMessages;

GetMessages.aspx后台代码：

using System;

using System.Data;

using System.Data.SqlClient;

using System.Web.UI.WebControls;

using System.Drawing;

using System.Data.OleDb;

using System.Collections.Specialized;

using System.Collections;

using System.Configuration;

namespace SafeManage.MainPage.Web

{

/// <summary>

/// GetMessages 的摘要说明。

/// </summary>

public class GetMessages : System.Web.UI.Page

{

protected static string strConn = ConfigurationSettings.AppSettings["strConnection"];

private void Page_Load(object sender, System.EventArgs e)

{

//连接数据库

string strSql = "SELECT NOTIFYID FROM JXNF_NOTIFYTOSET";

OleDbConnection myCn = new OleDbConnection(strConn);

OleDbDataAdapter sda = null;

DataSet ds = null;

myCn.Open();

sda = new OleDbDataAdapter(strSql,myCn);

ds = new DataSet("ds");

sda.Fill(ds);

ds.Dispose();

sda.Dispose();

myCn.Close();

myCn.Dispose();

// 把xml对象发送给客户端

Response.ContentType = "text/xml";

Response.Write(ds.GetXml());

Response.End();

}

}

}