Ajax基础-XMLHttpRequest对象的创建、数据请求和处理中已经介绍了XMLHTTPREQUEST对象的使用。下面是使用该对象请求服务器数据。
代码在IE6、FireFox1.5、NetScape8.1、Opera9调试通过。服务器为Window2000P + IIS5+ASP.net 2.0
1、使用XMLHTTPREQUEST对象请求ASP.Net文件
这里仍然使用GET方法来请求服务器端数据，与上篇不同的是，这次请求的是ASP.Net的脚本文档而不是XML文件，需要服务器解析并返回数据。客户端得到数据后依然直接显示。
///// ＡＳＰ．ｎｅｔ处理过程，请求ＡＳＰ．ｎｅｔ文件
function startRequestFromServer()
{
createXMLHttpRequest();
xhr.onreadystatechange = handleStateChangeASPX;
xhr.open("GET","ajaxserver.aspx",true); // 使用GET方法请求ASP.Net文件
xhr.send(null);
}
///// AJAX得到回应的处理方式，直接在已有的标签中显示返回结果
function handleStateChangeASPX()
{
if (xhr.readyState == 4)
{
if (xhr.status == 200)
{
var test = document.getElementById("test");
test.innerHTML = xhr.responseText;
}
}
}
XMLHTTPREQUEST对象的建立参照上文
2、服务器端脚本
服务器端脚本简单的使用了ASP.Net提供的数据查询功能，查询结果通过HTML文档的方式返回给客户端。
ajaxserver.aspx.cs文件
using System;
using System.Data;
using System.Data.OleDb;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class ajaxserver : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// 建立数据库连接并查询数据
String connectionString = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=";
connectionString += MapPath("") + "/XTT.MDB";
OleDbConnection connection = new OleDbConnection(connectionString);
connection.Open();
OleDbCommand command = new OleDbCommand();
command.Connection = connection;
command.CommandText = "SELECT * FROM Classes";
OleDbDataReader reader = command.ExecuteReader();
// 将数据查询结果以HTML的格式返回给浏览器
Response.Write("<br //>");
// 创建返回结果的表格，这里最好要包含<tbody>这个标签，IE对这个标签敏感。
String Xhtml = "<table cellspacing='0' cellpadding='0' width='60%' style='border-style: solid; border-width: 1px; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom:0px font-family:宋体; font-size:9pt'><tbody>";
Xhtml += "<tr>";
// 建立表头
Xhtml += "<th bgcolor='#C0C0C0' height='32' style='border-right:1px solid #FFFFFF;'>分类标识<//th>";
Xhtml += "<th bgcolor='#C0C0C0' height='32' style='border-right:1px solid #FFFFFF;'>分类名称<//th>";
Xhtml += "<th bgcolor='#C0C0C0' height='32' style='border-right:1px solid #FFFFFF;'>创建时间<//th>";
Xhtml += "<th bgcolor='#C0C0C0' height='32' style='border-right:1px solid #FFFFFF;'>创 建 人<//th>";
Xhtml += "<th bgcolor='#C0C0C0' height='32' style='border-right:1px solid #FFFFFF;'>父类标识<//th>";
Xhtml += "<th bgcolor='#C0C0C0' height='32'>操作<//th>";
Xhtml += "</tr>";
// 填写表格数据
while (reader.Read())
{
Xhtml += "<tr>";
Xhtml += "<td height='20' style='border-right:1px solid #C0C0C0;'>" + reader["Class_ID"].ToString() + "<//td>";
Xhtml += "<td height='20' style='border-right:1px solid #C0C0C0;'>" + reader["Class_Name"].ToString() + "<//td>";
Xhtml += "<td height='20' style='border-right:1px solid #C0C0C0;'>" + reader["Create_Time"].ToString() + "<//td>";
Xhtml += "<td height='20' style='border-right:1px solid #C0C0C0;'>" + reader["Create_Man"].ToString() + "<//td>";
Xhtml += "<td height='20' style='border-right:1px solid #C0C0C0;'>" + reader["Parent_ID"].ToString() + "<//td>";
Xhtml += "<td>" + "<a href=edit.aspx?ID=" + reader["Class_ID"].ToString() + ">" + "编辑" + "<//a>";
Xhtml += "<//tr>";
}
// 建表结束
Xhtml += "<//tbody><//table>";
// 返回给浏览器
Response.Write(Xhtml);
reader.Close();
reader.Dispose();
}
}
}
ajaxServer.aspx文件
由于服务器端会返回ASP.net页面上的所有内容，这里将HTML标签全部删掉了。只剩下与.CS文件相关的内容。如果将标签和代码放在一个页面内会更好。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajaxserver.aspx.cs" Inherits="ajaxserver" Debug="true" %>
3、数据库
数据库文件与ajaxServer.ASPX在相同的目录下。
名称：XTT.mdb
表名：Classes
字段名 类型 长度
Class_ID char 10
Class_Name char 20
Create_Time DateTime
Create_Man char 10
Parent_ID char 10
4、执行结果
京公网安备 11010802021500号