Ajax之一 簡介

      網友投稿 665 2025-03-31

      視頻:https://edu.csdn.net/course/detail/27107


      [學習目標]

      使用Asp.NetAJAX核心組件實現無刷新和局部更新效果

      掌握AutoComplete控件的使用,并利用其實現自動完成功能

      【本章簡介】

      AJAX基于那些已經廣泛使用的瀏覽器技術,包括異步JavaScript和XML。Ajax這個概念出現后不久就開始風靡起來,因為它使Web應用程序的功能和用戶界面(UI)變得更加接近于桌面應用程序。

      Ajax的主要思想是使Web頁可以在后臺(或者說是異步的)發送HTTP請求,而不需要重新讀取整個頁面(用Asp.Net的話來說,就是不需要往返行程或回發)。Ajax允許使用JavaScript、Dom(文檔對象模型)、Css(層疊樣式表)等。

      1.1 Ajax概述

      1.1.1 Ajax典型應用

      在推進Ajax技術發展的過程中,Google公司起到了非常大的作用,它的很多網上應用都大量地采用了Ajax技術,例如:Google Suggest、Google Maps等。下面我看兩個具體的例子。

      1.Google Suggest(搜索建議)

      有了搜索建議后,我們只需要輸入關鍵字的前幾個字或拼音,就可以把相關的熱門關鍵字都顯示出來。剩下的關鍵字部分就可以通過選擇來完成。例如,輸入“Ajax”四個字母,搜索建議會立即給出“ajax技術、ajax基礎教程”等選擇項。這種無刷新的方式,和我們傳統的瀏覽、輸入、提交、刷新的方式是完全不同的。

      2.Google Maps(地圖)

      同樣地,Google地圖也提供了非常方便的地圖縮放、拖曳等功能,如圖1-2所示,它的無刷新數據更新方式大大改善了用戶體驗。要提醒大家注意的是,我們每次拖曳或者縮放操作帶來的數據更新,都是從遠程服務器上獲取的。這種效果,對于傳統的Web應用來說是不可思議的。

      1.1.2 Ajax相關基礎知識

      要想通過客戶端編程以創建Ajax頁面,需要先了解JavaScript、Dom以及XMLHttpRequest對象(它處理那些從客戶端發送到服務器的請求)的相關知識。本書使用的是Asp.Net AJAX框架,可以適當的簡化在.Net環境下ajax的編程。Asp.Net AJAX的目的就是盡量避免編寫冗余的的代碼以及將客戶端開發人員的經驗與Asp.Net2.0(3.5)開發人員的經驗結合起來;另外將OOP的可以提高效率的優點帶到JavaScript中。

      雖然Asp.NetAJAX為需要創建Ajax應用程序的客戶端腳本的開發人員提供了一大堆的好處,但它卻不只是編寫JavaScript以對服務器端發出異步調用那么簡單。由于Asp.Net AJAX是由Asp.Net開發團隊創建的,因此它的突出特點就是與Asp.Net 2.0集成。

      就像Asp.Net本身那樣,你不需要掌握Ajax技術就可以得到一些Ajax的功能,因為設計Asp.Net Ajax就是為了幫助你完成這些工作。就像Asp.Net可以幫你管理HTTP的功能那樣,Asp.Net AJAX也可以管理Ajax的功能,比如回發、狀態管理以及使Asp.Net正常運轉所需要的那些客戶端腳本等。

      1.1.3 Asp.NetAJAX 的包

      Asp.Net AJAX的主頁(http://ajax.asp.net)上提供了很多不同的包,它們所關注的焦點各有不同。

      n????????Asp.Net AJAX擴展(Asp.Net AJAX Extensions)

      也稱為“Asp.Net AJAX Core”,這是Asp.Net AJAX的所有包中最重要的一個。它完全由微軟維護,包含了Asp.Net AJAX的基礎結構。

      n????????Asp.Net AJAX控件集(Asp.Net AJAX Control Toolkit)

      這個包中包含了大量的服務器組件,它們可以讓你不費吹灰之力就得到令人吃驚的Ajax功能。為了保證質量,微軟控制著整個項目,不過這個控件集卻是開源的。

      n????????Asp.Net AJAXFutures

      在這個包中,我們可以窺視到一些可能在將會(也可能不會^.^)成為Asp.Net和Asp.NetAJAX一部分的功能。

      n????????微軟Ajax庫

      這個一個純JavaScript的庫。

      微軟提供了Asp.Net AJAX的全部源碼,可以在http://ajax.asp.net/下載。

      1.2 安裝Asp.Net AJAX及控件包

      一.Asp.NetAJAX安裝過之后會集成到IDE中,VS2008可以直接使用。在Asp.Net AJAX的主頁上(http://ajax.asp.net),你可以找到Microsoft Asp.Net 2.0 AJAX Extensions1.0的安裝程序,它是一個名為ASPAJAXExtSetup.msi的安裝包,點擊下載安裝。

      二.安裝完畢后,Visual Studio中就會顯示一個新的用于創建Asp.Net AJAX網站的選項。這是開始學習Asp.Net AJAX技術的最好途徑,因為它將所有需要的文件都放到了適當的目錄中了。如圖1-3所示:

      1.3 Asp.Net AJAX的組成原理

      Ajax實際上是JavaScript、CSS、DOM、XmlHttpRequest四種技術的集合體,其中,XmlHttpRequest是Ajax技術的核心對象,可以說,正是通過它實現了以異步方式獲取服務器數據;DOM是文檔對象模型,通過Dom,我們可以方便地定位一個Html/Xml文檔任意部分并執行相關操作。

      Ajax的基本原理為:XmlHttpRequst從服務器(數據服務器或Web服務器)獲取數據到客戶端的內存中,然后JavaScript根據實際需要對這些資源進行處理,并通過CSS和DOM實現界面布局呈現給瀏覽器,如下圖所示:

      1.4 Asp.Net AJAX頁面的生命周期

      圖1-7說明了ASP.Net AJAX的基本結構。使用AJAX的網頁可以持續地跟服務器交換數據,而標準的網頁則需要由兩個步驟(一個是請求,另一個是響應)來完成這個工作。Asp.Net AJAX對通信的雙方都有幫助。客戶端腳本庫(比如由ScriptManager控件動態讀入的那一些,你很快就會看到相關的內容了)不僅能夠幫助瀏覽器與Web服務器之間進行通信,而且還能使客戶端編程更加簡單。Asp.Net AJAX服務器端程序集不僅接收和處理XMLHttpRequest調用,而且還實現了一些方便使用的服務器端控件。因此,程序員不必花大力氣就可以讓客戶端與服務器端交換數據了。

      在第一次請求某個使用了Asp.Net AJAX的頁面時(圖1-7的一步和第二步),Asp.Net AJAX客戶端框架(圖1-7客戶端組件中最下面的那一層)就會從服務器發送到瀏覽器上。此后從該AJAX應用程序的同一個頁面向服務器發送的請求就可以做成能夠返回文本或Xml的Http請求了(圖1-7中的第三步和第四步)。Asp.Net頁面可以使用整頁回發或異步請求這兩種方式來完成不同的任務。

      項目一:建立沒有AJAX的簡單的Asp.Net頁面

      首先建立一個沒有使用AJAX功能的簡單頁面,該頁面只需要一個標簽控件和一個服務器端按鈕控件。頁面圖1-8所示:

      點擊按鈕頁面上的按鈕后會顯示當前計算機日期和時間

      按鈕的代碼如下:

      this.Label1.Text=DateTime.Now.ToString();

      在單擊按鈕之前,頁面的代碼如程序清單1-1所示。

      程序清單1-1 沒有使用AJAX頁面的輸出

      </p><p>先不使用Ajax~ ~</p><p>

      Label

      Ajax之一 簡介篇

      這段代碼沒有什么可以解釋的,它有幾個ViewState和傳送回Default.apsx頁面的普通窗體。終端用戶單擊頁面上的按鈕時,會執行服務器回傳的完整過程,重新處理整個頁面,并返回給客戶的瀏覽器。

      項目二:建立沒有AJAX的簡單的Asp.Net頁面

      1.在項目一的基礎上,需要添加兩個服務器控件:一個是標簽控件Label2,一個是按鈕控件Button2。除此之外,還需要添加兩個Asp.Net AJAX控件。

      從Visual Studio 2005的工具箱的AJAX Extensio選項卡上,把一個ScriptManager服務器控件添加到頁面的頂部;另外添加一個UpdatePanel控件,在UpdatePanel中包含第二個標簽控件和按鈕控件。

      UpdatePanel控件是一個模板服務器控件,允許在其中包含任意多項(與其他Asp.Net 模板服務器控件一樣)。

      建立好的頁面如圖1-9所示:

      按鈕二的單擊事件代碼為:

      Label2.Text=DateTime.Now.ToString();

      1.??????在運行程序后,查看頁面源碼,會看到元素會被下面的代碼替換掉(那些URL在系統中可能會有所不同)。

      Asp.Net AJAX生成了一些用來初始化Ajax框架某些部分的JavaScript代碼。

      ScriptManager控件必須放在任何一個要使用Asp.Net AJAX的頁面上。

      2.??????運行效果:如果單擊Button1,進行整個頁面的會送,就會在響應中得到這些代碼,后退按鈕會變綠;如果單擊Button2,則會部分刷新頁面,后退按鈕不會刷新,仍然為灰色。

      @????????本章總結

      1.??????本章介紹了Asp.Net AJAX,解釋了它與Ajax以及Asp.Net 2.0之間的關系。

      2.??????指導如何安裝相關Ajax軟件和添加類庫集。

      3.??????編寫了一個使用Ajax的web應用程序,并學習了兩個關鍵服務器控件ScriptManager控件和UpdatePanel控件。

      .NET Ajax

      版權聲明:本文內容由網絡用戶投稿,版權歸原作者所有,本站不擁有其著作權,亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容,請聯系我們jiasou666@gmail.com 處理,核實后本網站將在24小時內刪除侵權內容。

      版權聲明:本文內容由網絡用戶投稿,版權歸原作者所有,本站不擁有其著作權,亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容,請聯系我們jiasou666@gmail.com 處理,核實后本網站將在24小時內刪除侵權內容。

      上一篇:Excel中添加抬頭的操作方法步驟(excel中抬頭怎么設置?)
      下一篇:什么時候可以有xlookup呀?(Xlookup)
      相關文章
      成a人片亚洲日本久久| 亚洲ts人妖网站| 亚洲狠狠婷婷综合久久蜜芽| 亚洲欧洲日韩国产| 久久精品亚洲一区二区| 久久精品亚洲综合一品| 久久久久亚洲AV片无码| 国产成人无码综合亚洲日韩| 亚洲综合伊人久久大杳蕉| 国产AV无码专区亚洲AV漫画| 伊人久久大香线蕉亚洲五月天| 久久久久亚洲AV成人网人人网站 | 国产亚洲福利精品一区二区| 亚洲AV女人18毛片水真多| 鲁死你资源站亚洲av| 国产精品亚洲а∨无码播放麻豆 | 韩国亚洲伊人久久综合影院| 在线视频亚洲一区| 亚洲成a人片在线观看国产| 亚洲国产成人乱码精品女人久久久不卡 | 亚洲色偷精品一区二区三区 | 国产亚洲美女精品久久久久狼| 亚洲一区二区三区香蕉| 国产亚洲av片在线观看播放| 亚洲AV无码乱码国产麻豆穿越| 亚洲自偷自拍另类12p| 亚洲毛片基地日韩毛片基地| 亚洲AV无码一区二区三区人 | 亚洲精品精华液一区二区| 在线91精品亚洲网站精品成人| 亚洲精品偷拍视频免费观看 | 亚洲日韩中文无码久久| 国产精品亚洲A∨天堂不卡| 亚洲AV永久无码精品水牛影视| 久久精品国产亚洲AV麻豆网站| 亚洲无限乱码一二三四区| 亚洲AV成人一区二区三区在线看| 亚洲欧美日韩中文二区| 日产国产精品亚洲系列| 亚洲中文字幕无码永久在线| 亚洲国产二区三区久久|