揭開AJAX神秘的面紗(AJAX個人學習筆記)第2/5頁

更新時間：2009年09月18日 13:50:55 作者：

寫這個學習筆記，只是記載一下自己的學習經(jīng)過和體會，把一些學習重點記錄下來，以備今后的鞏固復習及應用，很多知識點沒有詳細介紹，所以并不完全適用于初學者，如果你是初學者，最好選擇一本AJAX學習的書籍，然后與這篇學習筆記對照學習，效果會更好。

應用方式二：
在ASP.NET 中，內(nèi)置了一種非常適合Ajax開發(fā)的后臺處理方式即HttpHandler類，實際上所有的HttpHandler類都實現(xiàn)了IHttpHandler接口，用以進行請求接收和回送響應。
IHttpHandler這個接口提供了最基本的Web請求和Web響應的封裝，可以將此接口看作是Web容器提供的基本的Web實現(xiàn)方式的封裝類。
IHttpHandler接口具有一個方法：ProcessRequest(HttpContext context)，及一個布爾值屬性：IsReusable。所有實現(xiàn)IHttpHandler接口的類都必須實現(xiàn)上述方法和屬性，其中ProcessRequest方法用于接收和處理請求以及發(fā)送響應，而IsReusable指示其他請求是否可以使用IHttpHandler實例也就是說后繼的Http請求是不是可以繼續(xù)使用實現(xiàn)了該接口的類的實例，一般情況下設定為true。

應用一案例代碼：
Default.aspx 文件代碼（只有前臺代碼，后臺無任何代碼）:

復制代碼代碼如下:

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title>Ajax請求頁面</title> 
<script type="text/javascript" language=javascript src="Ajax.js"> 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div align=center> 
<div style="width:320px;height:150px" align=center> 
<table border=0 cellpadding=0 cellspacing=0 width=300px> 
<tr width=300px> 
<td>請輸入回傳至服務器的文本</td> 
</tr> 
<tr> 
<td><asp:TextBox runat="server" ID="txtCustomerInfo"></asp:TextBox></td> 
</tr> 
<tr> 
<td><input type=button runat=server id="btnRequest" value="發(fā)送請求" onclick="startRequest(document.getElementById('txtCustomerInfo').value)" /></td> 
</tr> 
<tr> 
<td>服務器處理后文本顯示如下</td> 
</tr> 
<tr> 
<td> 
<div style="width:100%;background-color:Yellow;color:black;height:48px" id="divServerMsg"> 
</div> 
</td> 
</tr> 
</table> 
</div> 
</div> 
</form> 
</body> 
</html> 

Ajax.js 文件代碼（createXmlHttp()函數(shù)部分很通用，可以在自己的應用程序中不用修改而直接復制）：

復制代碼代碼如下:

 
var xmlHttp; 

function createXmlHttp() 
{ 
var activeKey=new Array("MSXML2.XMLHTTP.5.0", 
"MSXML2.XMLHTTP.4.0", 
"MSXML2.XMLHTTP.3.0", 
"MSXML2.XMLHTTP", 
"Microsoft.XMLHTTP"); 
if(window.ActiveXObject) 
{ 
for(var i=0;i<activeKey.length;i++) 
{ 
try 
{ 
xmlHttp=new ActiveXObject(activeKey[i]); 
if(xmlHttp!=null) 
return xmlHttp; 
} 
catch(error) 
{ 
continue; 
} 
} 
throw new Error("客戶端瀏覽器版本過低，不支持XMLHttpRequest對象，請更新瀏覽器"); 
} 
else if(window.XMLHttpRequest) 
{ 
xmlHttp=new window.XMLHttpRequest(); 
} 
} 

function addUrlParameter(url,parameterName,parameterValue) 
{ 
url+=(url.indexOf("?"))==-1 ? "?" : "&";//判斷當前URL中是否存在? 即參數(shù)分隔符 
url+=encodeURIComponent(parameterName)+"="+encodeURIComponent(parameterValue); 
return url; 
} 


function startRequest(customerStr) 
{ 
xmlHttp=createXmlHttp(); 
xmlHttp.onreadystatechange=readyStateChangeHandler; 
xmlHttp.open("GET",addUrlParameter("AjaxPage.aspx","customerInfo",customerStr),null); 
xmlHttp.send(null); 
} 

function readyStateChangeHandler() 
{ 
if(xmlHttp.readyState==4) 
{ 
if(xmlHttp.status==200) 
{ 
var str=xmlHttp.responseText; 
var div=document.getElementById("divServerMsg"); 
div.innerHTML="<b>"+str+"</b>"; 
} 
} 
} 

AjaxPage.aspx 文件代碼（前臺）：

復制代碼代碼如下:

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxPage.aspx.cs" Inherits="AjaxPage" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title>無標題頁</title> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 

</div> 
</form> 
</body> 
</html> 

AjaxPage.aspx.cs 文件代碼（后臺）：

復制代碼代碼如下:

 
using System; 
using System.Data; 
using System.Configuration; 
using System.Collections; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Web.UI.HtmlControls; 

public partial class AjaxPage : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
string str = this.Request["customerInfo"].ToString(); 
string msg = "服務器獲得你的消息，時間:" + DateTime.Now.ToShortTimeString() + "<br>你的消息為:" + str + "<br>你的地址:" + this.Request.UserHostAddress; 
this.Response.Write(msg); 
this.Response.End(); 
} 
} 