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、执行结果