基於asp.net下使用jquery實現ajax的解決方案

來源:互聯網
上載者:User

無論是jquery還是ajax在今天來討論已經很落後了,網上也有非常多的這方面的資料,但是依然有不少新手對此很茫然。本文以最簡單的方法為新手示範如何使用jquery實現ajax技術(所以本文是專為新手所寫,老鳥勿噴,大神此處省略一萬字)。至於什麼是jquery什麼是ajax,自己Google去。

首先建立一個名聞Ajax的asp.net web空應用程式,項目目錄如所示

其中.ashx檔案是一般處理常式,暫時不用知道它是幹嘛用的,後面你就知道了。jquery-1.7.1.js可以在這裡下載。

我們首先理清一下我們要實現的功能:WebForm1頁面每隔一秒向Handler1處理常式發出請求,Handler1返還資料給WebForm1頁面,WebForm1頁面通過ajax技術實現局部重新整理效果。

首先來看看Handler1的主要代碼:

複製代碼 代碼如下:public void ProcessRequest(HttpContext context)
{
Random rand = new Random();
int num = rand.Next(1,10);
context.Response.Write(num);
}

主要是把ProcessRequest這個方法改成以上的樣子,產生一個1~9的隨機整數返回給請求頁面。

再來看看WebForm1.aspx的主要代碼:

複製代碼 代碼如下:<script type="text/javascript" src="jQuery/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function get() {
$.ajax({
type: "Post",
url: "Handler1.ashx",
data: "",
success: function (data) {
$("#dataShow").text(data);
}
});
}
setInterval(get, 1000);
})
</script>

我們要使用jquery的話,就要引用我們剛下下載的那個jqury-1.7.1.js檔案,下面的代碼應該能看明白吧?如果這也看不明白,那要先去補補js的基礎了。

在頁面上添加這樣一句代碼:

複製代碼 代碼如下:<p id="dataShow"></p>

是用來顯示請求Handler1返回的資料的。

完了!就這麼多!如果正常的話,你可以在瀏覽器上看到一個從1到9不斷隨機變換的數字,注意,這裡並不是整個頁面重新整理的!如果不信,你可以給<p>標籤一個margin,讓它顯示的時候超過瀏覽器高度出現捲軸,如果資料變化時捲軸沒有回到最上面說明是局部重新整理。

至於更進階的功能,需要讀者自己去查資料研究,這隻是篇簡單的入門文章。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.