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,可以看到下面的圖像
ajax-1-1.JPG

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

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

ajax-1-2.JPG

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

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

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

None.gif[WebService(Namespace?=?"http://tempuri.org/")]
None.gif[WebServiceBinding(ConformsTo?
=?WsiProfiles.BasicProfile1_1)]
ExpandedBlockStart.gifContractedBlock.gif
public?class?SampleService?:?System.Web.Services.WebService?dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif????
public?SampleService?()?dot.gif{
InBlock.gif????????
//Uncomment?the?following?line?if?using?designed?components?
InBlock.gif????????
//InitializeComponent();?
ExpandedSubBlockEnd.gif
????}

InBlock.gif????[WebMethod]
ExpandedSubBlockStart.gifContractedSubBlock.gif????
public?string?SayHello(string?name)?dot.gif{
InBlock.gif????????
return?"Hello?"+name;
ExpandedSubBlockEnd.gif????}

InBlock.gif????
ExpandedBlockEnd.gif}

None.gif

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

None.gif[WebService(Namespace?=?"http://tempuri.org/")]
None.gif[WebServiceBinding(ConformsTo?
=?WsiProfiles.BasicProfile1_1)]
None.gif[System.Web.Script.Services.ScriptService?()]
ExpandedBlockStart.gifContractedBlock.gif
public?class?SampleService?:?System.Web.Services.WebService?dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif????
public?SampleService?()?dot.gif{
InBlock.gif????????
//Uncomment?the?following?line?if?using?designed?components?
InBlock.gif????????
//InitializeComponent();?
ExpandedSubBlockEnd.gif
????}

InBlock.gif????[WebMethod]
ExpandedSubBlockStart.gifContractedSubBlock.gif????
public?string?SayHello(string?name)?dot.gif{
InBlock.gif????????
return?"Hello?"+name;
ExpandedSubBlockEnd.gif????}

InBlock.gif????
ExpandedBlockEnd.gif}

None.gif

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

ajax-1-5.JPG

?

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

?

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

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

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


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

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

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

InBlock.gif
InBlock.gif
function?OnComplete(arg)
ExpandedSubBlockStart.gifContractedSubBlock.gif
dot.gif{
InBlock.gif????document.getElementById(
"Text2").innerText=arg;
ExpandedSubBlockEnd.gif}

InBlock.gif
InBlock.gif
function?OnTimeOut(arg)
ExpandedSubBlockStart.gifContractedSubBlock.gif
dot.gif{
InBlock.gif????alert(
"TimeOut?raise?when?calling?SayHello.");
ExpandedSubBlockEnd.gif}

InBlock.gif
InBlock.gif
function?OnError(arg)
ExpandedSubBlockStart.gifContractedSubBlock.gif
dot.gif{
InBlock.gif????alert(
"Error?raise?when?calling?SayHello.");
ExpandedSubBlockEnd.gif}

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

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

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

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

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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/447960.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/447960.shtml
英文地址,請注明出處:http://en.pswp.cn/news/447960.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

insertSelective 和 insert 的區別

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1、selective的意思是&#xff1a;選擇性。 2、insertSelective--選擇性保存數據&#xff1b; 比如User里面有三個字段:id&#xff0c;n…

病從口入 這樣吃小心癌癥找上門

腫瘤專家估計&#xff0c;大約有35%的致癌物質是經過飲食&#xff0c;30%是經過吸煙侵入體內的。僅此兩項已經占了致癌因素入侵人體的一半以上了。所以說&#xff0c;預防腫瘤&#xff0c;飲食首當其沖&#xff0c;第一步就要從入口的食物談起。 食管癌&#xff1a;腌制的咸…

VUE插件總結

UI組件 element - 餓了么出品的Vue2的web UI工具套件Vux - 基于Vue和WeUI的組件庫mint-ui - Vue 2的移動UI元素iview - 基于 Vuejs 的開源 UI 組件庫Keen-UI - 輕量級的基本UI組件合集vue-material - 通過Vue Material和Vue 2建立精美的app應用muse-ui - 三端樣式一致的響應式 …

解決:No goals have been specified for this build. You must specify a valid lifecycle phase or a goal i

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1. 執行打包命令報錯&#xff1a; No goals have been specified for this build. You must specify a valid lifecycle phase or a goa…

十個好習慣幫你理財省大錢

理財和收入高低其實是沒有關系的&#xff0c;僅和生活習慣相關。有了好的理財方法&#xff0c;也可以攢下自己的錢&#xff0c;達到財務自由的境界。下面是一些理財的技巧? 1、定時積極的存款 怎樣開源節流是理財的第一步。增加收入來源&#xff0c;算好該存的錢&#xff0…

生成隨機碼,保存隨機文件.

PrivateFunction GetRandomizeNo()Function GetRandomizeNo() As Integer 功能說明:生成隨機驗證碼 Dim RandomizeNo As Integer Randomize() RandomizeNo 9999 * Rnd() 1000 If (RandomizeNo).ToString.Length > 5 Then R…

解決:org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) ...

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)問題&#xff0c;即在mybatis中dao接口與mapper配置…

真實股市房市信托本質,金融故事三則:錢都去哪兒了?

什么叫做虛擬經濟、泡沫經濟、次貸危機、金融危機?看完本文這幾個簡短精辟故事&#xff0c;你就都知道了。 故事&#xff08;1&#xff09; 有一個商人到了一個山村&#xff0c;村子周圍的山上全是猴子。 商人就和村子種地的農民說&#xff0c;我買猴子&#xff0c;100元一只…

Mac 遠程命令工具

轉載于:https://www.cnblogs.com/BrightMoon/p/4479375.html

Springboot Mybatis 整合(完整版)

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 正題 本項目使用的環境&#xff1a; 開發工具&#xff1a;Intellij IDEA 2017.1.3 springboot: 1.5.6 jdk&#xff1a;1.8.0_161 maven…

OpenCL 第5課:向量相加

OpenCL程序分為兩個部份&#xff0c;一部份是內核代碼&#xff0c;負責具體算法。另一部份是主程序負責初始化OpenCL和準備數據。主程序加載內核代碼&#xff0c;并按照即定方法進行運算。 內核代碼可以寫在主程序里面&#xff0c;也可以寫在另一個文本文件里&#xff0c;有點…

同名的const 成員函數

如下代碼&#xff1a;struct Derived{ void foo(string) { cout<<"ddd foo"<<endl; }; void foo(string) const { cout<<"ddd foo const"<<endl; };}; int _tmain(int argc, TCH…

springboot 中使用 Mybatis 注解 配置 詳解

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 傳參方式 使用不同的傳參方式&#xff1a; 使用Param 之前博文中的項目使用了這種簡單的傳參方式&#xff1a; Insert("INSERT IN…

mongodb數據庫的備份與恢復

先介紹下命令語法&#xff1a; ./mongodump -h 127.0.0.1:10001 -d lietou -o /usr/local/data -h&#xff1a;MongDB所在服務器地址&#xff0c;例如&#xff1a;127.0.0.1&#xff0c;當然也可以指定端口號&#xff1a;127.0.0.1:10001 -d&#xff1a;需要備份的數據庫實例…

OpenCL 第6課:矩陣轉置

上一節我們寫了個一維向量相加的程序。這節我們來看一個44矩陣轉置程序。 4X4矩陣我們采用二維數組進行存儲&#xff0c;在程序設計上&#xff0c;我們讓轉置過程分4次轉置完成&#xff0c;就是一次轉一行。注意這里的OpenCL的工作維數是二維。&#xff08;當然用一維的方式也…

springboot 系列技術教程目錄

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 一、教程目錄地址&#xff1a; springboot系列技術教程目錄 二、教程內容&#xff1a; springboot2.X系列&#xff1a; springboot整…

OpenCL 第7課:旋轉變換(1)

旋轉是一個常用的處理功能。圖片中所有的點以某一個點為軸&#xff0c;順時或逆時方向旋轉N個角度。我們利用OpenCL就可以對圖片中所有的點進行并行轉換&#xff0c;大大提高效率。 上兩節中&#xff0c;我們編寫了CL文件來傳遞數組的地址&#xff0c;這一節中我們會多加入幾個…

WinForms多線程編程之搖獎程序

利用多線程模擬一個電腦搖獎程序&#xff0c;如圖所示。在點擊【滾動號碼】&#xff0c;啟動線程&#xff0c;對后臺的電話號碼進行循環顯示&#xff1b;點擊【開獎】按鈕&#xff0c;關閉線程&#xff0c;此時顯示在文本框中的電話號碼即為中獎號碼 using System;using System…

idea 版本控制忽略文件、文件夾設置

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 setting 中&#xff1a; 或者底部的 設置 忽略某個文件 后面選擇框可以去選擇 忽略某個文件夾 后面選擇框可以去選擇 忽略某種文件 后面…

Windows Azure HandBook (1) IaaS相關技術

《Windows Azure Platform 系列文章目錄》 1.Microsoft Azure底層是否由System Center和Hyper-V構成? Microsoft Azure雖然支持Hyper-V的VHD直接上傳至Azure云端進行管理&#xff0c;但是Azure底層技術是微軟自己研發的、獨有的技術&#xff0c;且不對外提供。如果客戶想構建屬…