ajax非同步呼叫資料執行個體
通過ajax在用戶端調用後台代碼，通過後台代碼更改，修複，查詢資料，並把結果返回給用戶端，在用戶端擷取到伺服器返回的資料在做相應的操作，從而實現通過HTML控制項操作一些在網頁特效比較難實現的功能；比如通過HTML的控制項訪問查詢資料庫教程，並把結果傳給用戶端顯示，這方面在google地圖開發應用得比較多，下面以一個簡單的執行個體說明：
添加一個.asp教程x的頁面，命名為：ajaxPKashx.aspx，全部代碼如下：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ajaxPKashx.aspx.cs" Inherits="AjaxTest.ajaxPKashx" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml" >
6 <head runat="server">
7 <title>通過ajax實現用戶端擷取後台資料</title>
8 </head>
9 <body>
10 <script language="javascript" type="text/javascript">
11 //對於沒有XMLHttpRequest對象的瀏覽器，需要構造一個
12 //該方法可寫在公用js檔案中，定義全域變數儲存
13 if (!window.XMLHttpRequest) {
14 window.XMLHttpRequest = function () {
15 return new ActiveXObject("Microsoft.XMLHTTP");
16 }
17 }
18 //HTML按鈕控制項的觸發事件
19 function showUserInfo()
20 {
21 //擷取傳遞參數
22 var userID = document.getElementById("tbID").value;
23 //接收返回的結果
24 var jsUserInfo = "";
25 //分解返回的結果字串，數組形式出現
26 var objArray = new Array();
27 //定義一個XMLHttpRequest,用於請求sample.ashx檔案
28 var aRequest = new XMLHttpRequest();
29 //非同步呼叫sample.ashx檔案並傳參數
30
31 //第一個參數傳輸方式
32 //第二個參數是目標的地址
33 //第三個參數是表示是否為非同步呼叫，false非非同步，即同步；為true則為非同步呼叫
34 aRequest.open("POST","sample.ashx?userid=" + userID,true);
35
36 ////請求完成將收到此事件
37 aRequest.onreadystatechange = function()
38 {
39 //狀態4表示請求成功
40 if(aRequest.readyState == 4)
41 {
42 //擷取返回結果
43 jsUserInfo = aRequest.responseText;
44 //對返回結果處理
45 if(jsUserInfo.length > 0)
46 {
47 objArray = jsUserInfo.split(",");
48 }
49 document.getElementById("spNo").value = objArray[0].toString();
50 document.getElementById("spName").value = objArray[1].toString();
51 document.getElementById("spTime").value = objArray[2].toString();
52 }
53 }
54 aRequest.send(null);
55 }
56 </script>
57 <form id="form1" runat="server">
58 <div>
59 <asp:TextBox ID="tbID" runat="server"></asp:TextBox>
60 <input id="btShow" type="button" value="button" onclick="showUserInfo();" />
61 </div>
62 <div>
63 <asp:Label ID="Label1" runat="server" Text="工號："></asp:Label>
64 <input id="spNo" type="text" />
65 </div>
66 <div>
67 <asp:Label ID="Label2" runat="server" Text="姓名："></asp:Label>
68 <input id="spName" type="text" />
69 </div>
70 <div>
71 <asp:Label ID="Label3" runat="server" Text="入職時間："></asp:Label>
72 <input id="spTime" type="text" />
73 </div>
74 </form>
75 </body>
76 </html>
第34行中
aRequest.open("POST","sample.ashx?userid=" + userID,true);
sample.ashx 為“一般處理常式”檔案，也是後台代碼編寫的地方，根據我的瞭解，這種檔案系統會產生兩個方法，不允許在添加任何方法，或是添加了也無效，有待驗證，有比較清楚的大蝦請指教，以下為該檔案的全部代碼：
這個方法是在建立檔案時自動建立的，當我們在用戶端通過
1 using System;
2 using System.Data;
3 using System.Web;
4 using System.Collections;
5 using System.Web.Services;
6 using System.Web.Services.Protocols;
7
8 namespace AjaxTest
9 {
10 /// <summary>
11 /// $codebehindclassname$ 的摘要說明
12 /// </summary>
13 [WebService(Namespace = "http://tempuri.org/")]
14 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
15 public class sample : IHttpHandler
16 {
17
18 public void ProcessRequest(HttpContext context)
19 {
20 context.Response.ContentType = "text/plain";
21 //使用者ID，接收用戶端傳過來的參數
22 string userID = "";
23 //傳回的字串
24 string userInfo = "";
25 //讀取用戶端傳過來的參數
26 if(!string.IsNullOrEmpty(HttpContext.Current.Request["userid"]))
27 userID = HttpContext.Current.Request["userid"];
28
29 //通過用戶端傳來的參數擷取後台資料，包括對資料庫的操作後返回的資料集，在此就不累贅了
30 //擷取後的資料可以以JSON或XML的格式封裝後以string的形式傳送到用戶端
31 //如果資料簡單就返回一個字串，如下：
32 userInfo = "8080,張三,2008-07-01";
33 context.Response.Write(userInfo);
34 }
35
36 public bool IsReusable
37 {
38 get
39 {
40 return false;
41 }
42 }
43 }
44 }
我們的代碼只需要寫在這個方法中
public void ProcessRequest(HttpContext context)
aRequest.open("POST","sample.ashx?userid=" + userID,true);
這個方法調用這個“一般處理常式”時，系統預設調用了該方法，所以我們的處理代碼和傳回值都在該方法完成，這樣有一個不好的地方，就是每調用一次都必須新建立一個“一般處理常式”，可以想象在項目中如果經常用到這種方法那這種檔案要建立很多個，這對應項目的管理是比較鬱悶的；這個問題其實也是有解決的方法，ajax調用webservice便可以解決，通過調用制定的方法和制定的傳回值來實現
返回方法：
context.Response.Write(userInfo);
通過該方法可以把string類型的userInfo變數傳回用戶端，用戶端接收到該string類型的變數即可對其操作，用戶端的接收代碼如下：
jsUserInfo = aRequest.responseText;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
