[ASP.NET] 簡單的Ajax範例

2011-10-30

7184
0

摘要:[ASP.NET] 簡單的Ajax範例

說明:

Ajax全名為"Asynchronous JavaScript XML"，在維基百科裡面有詳細的介紹，自己的瞭解是透過Ajax可以抓取靜態頁面上會變動的資料，就可以做到不需換頁資料就會自動更新的動作。以往須透過request給遠端主機，主機收到request後會將處理好的資料傳回給客戶端做render的動作，Ajax是透過瀏覽器內建的XmlHttp物件發出request給主機，再利用javascript來接收主機回傳的資料後做render。

這次的專案裡有兩個檔案，一個是HTML：用來存放javascript，另一個是ashx：用來吐資訊出來

先看一下AjaxContent.ashx.cs，這邊只做Response.Write的動作：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace AjaxDemo
{
    /// 
    /// Summary description for AjaxContent
    /// 
    public class AjaxContent : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/xml";
            context.Response.Write("這是Ajax回傳的資料");
            context.Response.End();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

在來看一下HTML頁面的部分：

在建立XMLHttpRequest物件的時候，這邊有些地方要注意的：

1.因每個瀏覽器支援方式不同，可參考MSDN或各大瀏覽器有關使用XMLHttpRequest物件的寫法

2.物件建立好後就可依序使用open()，setRequestHeader()，send()發法來發送request

3.接收資料的方式：XMLHttpRequest.responseText

4.變數名稱在大小寫的地方要注意，有個地方打錯後面就很難找出

看一下跑起來的實例：

回首頁