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 <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
}
// Create the Request object (the AJAX wrapper)2
var request = new Request();3
// Change this to fit your environment4
var url = "http://localhost/ajax/";5
function getOptions()6
{
7
// Call the AJAX8
// Notice the second parameter is actually a function to handle the response9
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 data17
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
else30
{31
// Handle the failure condition32
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%>
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}
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
下载：源文件 项目测试
