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">< SPAN>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
下载：源文件 项目测试