當前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

asp.net ajax的学习第一篇

發布時間：2023/12/18 asp.net 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 asp.net ajax的学习第一篇小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

自己理解的asp.net ajax的核心思想： javascript 調用web service

<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

由于工作的原因，要在自己的網頁上使用無刷新技術，增加客戶體驗。開始學習asp.net ajax，到了asp.net ajax的大本營(ajax.asp.net)找了些視頻看,給我的最初印象是：asp.net ajax實現無刷新就是利用javascript調用web service。（剛開始學習ajax的知識，可能會火星一下，請高手們見諒）

大家做網站網頁開發的人都知道，javascript是在客戶端執行的，執行的時候頁面不會postback信息到服務端，在頁面上修改呈現信息時，瀏覽器也不會整體刷新頁面，而只是根據javascript的操作來修改一個頁面上其中一個地方的內容，比如把text框里的文本修改一下。而asp.net ajax也利用了這一點，實現了頁面無刷新的功能，那頁面又如何能把需要服務器端進行操作的結果反饋到本地呢？ Asp.net ajax的方法是使用javascript調用服務器端的web service。

我還是比較喜歡用一個例子來加以說明，這樣比較清晰明了。

開發環境：windows xp sp2+visual studio2005 sp1+asp.net ajax

安裝asp.net ajax 只要到ajax.asp.net上下載一個安裝文檔安裝一下就可以了，不需要什么配置。

1.?????? 安裝完asp.net ajax后，打開visual studio,新建web site,可以看到下面的圖像

在模板中我們可以發現多了一個叫做ASP.NET AJAX-Enabled Web Site的模板，我們選擇這個模板新建一個web site,使用這個模板建的網站，跟普通建站模板的區別是在web.config里，大家有興趣可以研究一下這個config文件，這樣我們可以手工建一個支持asp.net ajax的網站了。

首先我們給這個網站新建一個web service，如圖：

建完這個web serivce，我們在瀏覽器里運行web service的asmx文件，這里我們給web service取得名字是SampleService，所以生成的名字是SampleService.asmx，在瀏覽器里我們看到的樣子是這樣的

這是一個標準的web service的asmx頁面，可以用來測試一下我們建的web service里提供的SayHello函數，這時我們如果在地址后面加上一個/js 就可以看到下面的錯誤頁面

現在我們回過頭來看web service的.cs文件，我們看到web service的類是這么寫的：

[WebService(Namespace?=?"http://tempuri.org/")]
[WebServiceBinding(ConformsTo?=?WsiProfiles.BasicProfile1_1)]
public?class?SampleService?:?System.Web.Services.WebService?{
????public?SampleService?()?{
????????//Uncomment?the?following?line?if?using?designed?components?
????????//InitializeComponent();?
????}
????[WebMethod]
????public?string?SayHello(string?name)?{
????????return?"Hello?"+name;
????}
????
}

接著我們在這個類申明上加上一句：[System.Web.Script.Services.ScriptService ()]，變成下面的代碼：

[WebService(Namespace?=?"http://tempuri.org/")]
[WebServiceBinding(ConformsTo?=?WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService?()]
public?class?SampleService?:?System.Web.Services.WebService?{
????public?SampleService?()?{
????????//Uncomment?the?following?line?if?using?designed?components?
????????//InitializeComponent();?
????}
????[WebMethod]
????public?string?SayHello(string?name)?{
????????return?"Hello?"+name;
????}
????
}

重新編譯一下網站，這時候我們再瀏覽這個.asmx文件并在后面加上/js,就會看到如下情況：

它會讓你下載一個js文件，保存這個文件，并用記事本打開它，可以看到js調用web service的代碼：）

接著我們打開default.aspx這時候在頁面上已經存在一個asp.net ajax使用必須的ScriptManager控件（如果沒有就手工添加一個，哈哈），我們在頁面上放置兩個input text和一個input button (這些是標準的html控件)并給ScriptManger控件添加一些代碼：

?????<asp:ScriptManager?ID="ScriptManager1"?runat="server"?>
????????????<Services>
????????????????<asp:ServiceReference?Path="SampleService.asmx"?/>
????????????</Services>
????????</asp:ScriptManager>

這里指定了客戶端需要調用web service的頁面.

接著給button控件增加一個客戶端的click事件，最后完成全部代碼是這樣的：

<%@?Page?Language="C#"?AutoEventWireup="true"?CodeFile="Default.aspx.cs"?Inherits="_Default"?%>
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.1//EN"?"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head?runat="server">
<title>Untitled?Page</title>
<script?language="javascript"?type="text/javascript">
//?<!CDATA[

function?Button1_onclick()?{
????ret=SampleService.SayHello(document.getElementById?("Text1").value,OnComplete,OnTimeOut,OnError);
????return(true);
}

function?OnComplete(arg)
{
????document.getElementById("Text2").innerText=arg;
}

function?OnTimeOut(arg)
{
????alert("TimeOut?raise?when?calling?SayHello.");
}

function?OnError(arg)
{
????alert("Error?raise?when?calling?SayHello.");
}

//?]]>
</script>
</head>
<body>
????<form?id="form1"?runat="server">
????????<asp:ScriptManager?ID="ScriptManager1"?runat="server"?>
????????????<Services>
????????????????<asp:ServiceReference?Path="SampleService.asmx"?/>
????????????</Services>
????????</asp:ScriptManager>
????????<div>
????????????<br?/>
????????????<br?/>
????????????<input?id="Text1"?style="width:?200px"?type="text"?/>
????????????<br?/>
????????????<input?id="Button1"?style="width:?205px"?type="button"?value="Say?Hello"?onclick="return?Button1_onclick()"?/><br?/>
????????????<input?id="Text2"?style="width:?317px"?type="text"?/>
????????</div>
????</form>
</body>
</html>

這里注意一下button1的Button1_onclick()事件的實現。

可以看出，針對defaul.aspx頁面，我們這里全部使用了客戶端代碼，但調用到了服務端的執行代碼和返回結果，從而實現了頁面無刷新的修改，這應該就是asp.net ajax的核心思想了吧！！

這個例子可以在ajax.asp.net的視頻講座里找到的，我按照自己的記憶重新寫的，可能有點不同，不過核心思想是一樣的。例子下載

轉載于:https://www.cnblogs.com/dotLive/archive/2007/03/11/670690.html

總結

以上是生活随笔為你收集整理的asp.net ajax的学习第一篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。