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)
 2 var  request  =   new  Request();
 3 //  Change this to fit your environment
 4 var  url  =   " http://localhost/ajax/ " ;
 5 function  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代码

1 protected string result = string.Empty;
2 private 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
下载： 源文件 项目测试