Ajax基礎-伺服器端ASP.net指令碼請求和響應

AJAX請求ASP.Net指令碼

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、執行結果