Ajax技術簡單入門

隨著Google公司推出的Gmail服務後,越來越多的人開始關注Ajax技術了,所謂Ajax(Asynchronous JavaScript and XML縮寫)技術,就是指運用JavaScript和XML在不用重新整理Web頁的情況下與Web伺服器通訊的技術．
一般來說，使用Ajax技術主要有兩個原因：一是fast；二是cool。
下面通過一個樣本來說明Ajax的使用：
1.HTML代碼
btn1用來調用Ajax代碼（請求伺服器並將返回資訊填充到select1裡）。

1 <select id="select1">select>
2 <input id="btn1" value="Fill Select" type="button" onclick="getOptions();">

2.JavaScript代碼調用Ajax

 1// Create the Request object (the AJAX wrapper)
 2var request = new Request();
 3// Change this to fit your environment
 4var url = "http://localhost/ajax/";
 5function getOptions()
 6{
 7    // Call the AJAX
 8    // Notice the second parameter is actually a function to handle the response
 9    request.GetNoCache(url + "requests/getOptions.aspx",
10    function(result)
11    {
12        if (result.readyState!=ReadyState.Complete)
13            return;               
14        if (result.status==HttpStatus.OK && result.responseText != "")
15        {
16            // If the request was successfull and returned data
17            var vals = result.responseText.split("~");
18            for (i=0; i<vals.length; i++)
19            {
20                var pair = vals[i].split("|");
21                var op = new Option(pair[1], pair[0], false, false);
22                var sel = document.getElementById("select1");
23                sel.options[sel.length] = op;
24            }
25            alert("Remember that the new values in form" + 
26                  " element 'select1' are not in viewstate." + 
27                  " Code appropriately.");
28        }
29        else
30        {
31            // Handle the failure condition
32            alert('Get options failed.');
33        }
34    }
35    )
36}

3.aspx檔案

1 <%@ Page language="c#" Codebehind="getOptions.aspx.cs" AutoEventWireupo="false" Inherits="ajax.requests.getOptions" %>
2 <%=result%>

4.codebehind代碼

1protected string result = string.Empty;
2private void Page_Load(object sender, System.EventArgs e)
3{
4    for (int i=0; i<10; i++)
5    {
6        result += i.ToString() + "|option " + i.ToString() + "~";
7    }
8    result = result.Substring(0, result.Length - 1); // to drop the last '~'
9}

更多Ajax
下載：源檔案 項目測試