Ajax: Asynchronous JavaScript and Xml , 非同步js指令碼和xml , 常用來實現頁面局部的非同步重新整理, 對提高使用者體驗有很大協助. Xml在多語言時較有優勢, 但Ajax技術實際上較多採用Json對象而不是Xml來處理資料.
(一) Ajax曆史....瞭解性知識
Ajax歸屬於Web前端開發技術, 與javascript有著異常緊密的聯絡. Ajax就是一種實現非同步通訊無重新整理的技術, 而這種技術可以有很多種實現方式. 瀏覽器的鼻祖網景(NetScape)公司最早發明了LiveScript指令碼語言, 用來豐富網頁元素的表現形式, 使網頁能夠呈現出動態效果. 隨後的曆次改版升級後就誕生了JavaScript語言, 與此同期微軟(Microsoft)公司也看到互連網的前景, 開始涉足並發力於互連網行業, 推出了JScript語言, 可惜沒有JavaScript成熟, 發展遲滯. 最終微軟公司對互連網的決心促成了MS對NS的漫長曲折的收購曆程.
這裡提一下, 動態HTML語言(Dynamic Hyper Text Markup Language)就是將javascript放在Dom樹的元素節點中, 為元素提供動態展示行為.
(二)Web前端開發的兩個思路： a. JavaScript + XHR + CSS b. Flash ---> 瀏覽器外掛程式 ---> Flex(Adobe); Silverlight4.0(MS)
1. Ajax: 以MS的XHR(XMLHttpRequest)為核心 ---> Ajax
2. flash: MicroMedia ---> 被Adobe收購 ---> flex (涵蓋了ActionScript和Rich Internet Application等技術的組合)
3. SilverLight: 微軟為了抗衡flex而推出的SilverLight
備忘:
為了能夠在後台非同步與伺服器進行通訊, 微軟在IE中添加了兩個組件: 負責與伺服器通訊的組件(XMLHTTPRequest)和XML的處理組件. 採用XML作為資料交換的載體, 在多語言處理時具有優勢, 但xml的處理成本較高, 實際上Ajax中通常採用Json對象在用戶端瀏覽器和伺服器之間傳遞資料.
網頁的產生過程其實是由伺服器上的一組程式來完成的, 這樣為了在用戶端的JS語言和伺服器端的C#語言傳遞資料, .Net提供了Json序列化和還原序列化器, 來提供伺服器端C#對象和Json對象之間的轉換. 而在瀏覽器端可以使用eval()函數擷取伺服器傳遞過來的Json串轉化為Json對象.
(三)Ajax解決什麼問題
我們都知道, 在用戶端向伺服器請求一個頁面時, 伺服器首先動態計算並產生出頁面, 然後再發給用戶端. 用戶端瀏覽器順序編譯並呈現頁面.
在沒有Ajax時: 假如說頁面有個使用者驗證控制項, 那麼在用戶端瀏覽器呈現使用者驗證控制項時, 會等待伺服器的驗證結果, 收到結果後才能繼續呈現頁面元素. 而這個驗證過程通常要進行讀取資料庫等操作, 這就是所謂的同步方式. 而這種方式, 會造成網頁呈現的假死狀態.
在使用Ajax後: 同樣是驗證控制項, 用戶端提交了驗證請求後, 便繼續順序呈現其他元素. 當取得驗證結果後, 由javascript在用戶端修改記憶體中的DOM對象後並呈獻給使用者(注意: 這裡修改的只是記憶體中的DOM對象, 而用戶端接收的分頁檔並沒有修改). 這樣, 使用非同步方式, 就不會出現假死狀態, 同時用戶端也節省了等待伺服器返回結果時的時間開銷.
(四)Ajax的實現(3中Ajax的實現, 需要說明的是: Ajax能夠實現的效果, 通過WebService都能實現.)
1. Js中的Ajax非同步呼叫: a.new b.onreadystatechange(處理responseText) c.open(get方式和post方式) d.send (同步調用: a.new b.open(get方式和post方式) c.send d.responseText)
//ajax.html
<!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><title>Ajax of Javascript & jQuery</title></head><body><a href="javascript:getData();">Javascript-Ajax: Click me</a><br /><br /><br /><input id="btn" type="button" value="jQuery-Ajax: Clike me"/><hr /><div id="show"></div><script type="text/javascript">function getData() {//建立XMLHttpRequest通訊對象var xhr;if (window.ActiveXObject) { //標準情況下, 只能有兩個ActiveXObject對象處理通訊過程xhr =new ActiveXObject("Microsoft.XMLHTTP");}elseif (window.XMLHttpRequest) {xhr =new XMLHttpRequest();}else {thrownew Error("Ajax is not supported by this browser");}var elem = document.getElementById("show"); //用來顯示處理結果//使用onreadystatechange事件處理結果xhr.onreadystatechange =function() {if (xhr.readyState ==4) { // readyState表示伺服器響應狀態. 4: 響應接收完畢if (xhr.status ==200) { // status 表示 http 請求的狀態var json = xhr.responseText; //從請求中回應中獲得json串var obj = eval("("+ json +")"); // 藉助 eval 將 json 串轉化為對象, 在用戶端瀏覽器必須解析為js對象elem.innerHTML ="<span>"+ obj.name +"</span>";}}}//通過open佈建要求方式xhr.open("get", "json.ashx", true); //預設為ture, false表示同步方式//發送請求xhr.send(null);/* 同步方式, false表示不適用非同步方式xhr.open("get", "json.ashx", false);xhr.send(null);//處理結果alert(xhr.responseText);*/}</script><script src="jquery-1.4.2.js" type="text/javascript"></script><script type="text/javascript">$(function() { //ready函數, 指令碼載入完即執行, 也可以用$(...$("#btn").click...)();載入$("#btn").click(function showData() { //按鈕上添加onclick事件, 事件處理方法為showData()$("#show").load("jquery.ashx"); //從jquery.ashx中擷取資料元素(innerHTML的內容), 並顯示在div中});});</script></body></html>
然後還需要在項目中, 添加類似於json.ashx一般處理常式, 用於提供相關資料(如: 表格日曆的繪製, 去資料庫驗證等操作)
//json.ashx
<%@ WebHandler Language="C#" Class="Json"%>using System;using System.Web;publicclass Json : IHttpHandler {publicvoid ProcessRequest (HttpContext context) {context.Response.ContentType ="text/plain";//對於靜態內容, 需要禁用瀏覽器的緩衝, 否則老是舊結果context.Response.Cache.SetCacheability(HttpCacheability.NoCache);string name ="Mike";string jsonFormat ="{{ \"name\": \"{0}\" }}"; //{{、}}是為了避免和Json中的{衝突而採用的特殊轉義符string json =string.Format(jsonFormat, name);context.Response.Output.Write(json);}publicbool IsReusable {get {returnfalse;}}}
//jquery.ashx
<%@ WebHandler Language="C#" Class="jquery"%>using System;using System.Web;publicclass jquery : IHttpHandler {publicvoid ProcessRequest (HttpContext context) {context.Response.ContentType ="text/plain";context.Response.Cache.SetCacheability(HttpCacheability.NoCache);DateTime now = DateTime.Now;string jqueryFormat ="<span>{0}</span>";string jquery =string.Format(jqueryFormat, now);context.Response.Write(jquery);}publicbool IsReusable {get {returnfalse;}}}
2.1 使用AjaxPro2:
a.添加AjaxPro2類庫(AjaxPro2.dll) b.webconfig中添加設定檔 c.在App_Code中建立類庫檔案(cs檔案)提供Ajax服務, 並在頁面對應的後台cs檔案中註冊Ajax(Page_Load事件中) d.在App_Code中的類庫檔案(cs檔案中)編寫帶有Ajax標籤的處理方法 e.在前台的aspx檔案中使用指令碼處理結果(修改記憶體中的DOM對象)並顯示在頁面上
//b.webconfig中添加設定檔
<location path="ajaxpro"><system.web><httpHandlers><add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/></httpHandlers><!--If you need to have Ajax.NET Professional methods running on thelogin page you may have to enable your own authorization configurationhere.--><!--<authorization><deny users="?"/></authorization>--></system.web></location>
//c.在App_Code中建立類庫檔案(cs檔案)提供Ajax服務, 並在頁面對應的後台cs檔案中註冊Ajax(Page_Load事件中)
//default.aspx.cs檔案
protectedvoid Page_Load(object sender, EventArgs e){AjaxPro.Utility.RegisterTypeForAjax(typeof(CalendarServices)); //AjaxPro會根據註冊的類型自動產生指令碼}
//d.在App_Code中的類庫檔案(cs檔案中)編寫帶有Ajax標籤的處理方法
//CalendarServices.cs
using System;using System.Collections.Generic;using System.Linq;using System.Web;publicclass CalendarServices{[AjaxPro.AjaxMethod]publicbool save(string date, string tile, string detail){System.Threading.Thread.Sleep(5000); //用來測試非同步returntrue; //這裡為簡單, 直接返回true}}
//e.在前台的aspx檔案中使用指令碼處理結果(修改記憶體中的DOM對象)並顯示在頁面上
//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></title></head><body><form id="form1" runat="server"><div>日期:<input id="date" type="text"/><br />標題:<input id="title" type="text"/><br />詳情:<textarea id="detail" cols="80" rows="5"></textarea><hr /><input id="btn" type="button" value="確定"/></div><div><script src="jquery-1.4.2.js" type="text/javascript"></script><script type="text/javascript">$(function() {$("#btn").click(function() {var date = $("#date").val();var title = $("#title").val();var detail = $("#detail").val();//由AjaxPro產生的js代理, 很像C#中類庫的使用, 其中function(result)是非同步結果處理方法CalendarServices.save(date, title, detail, function(result) {if (result.error !=null) { //伺服器上出現異常alert(result.error.Message);}if (result.value) { //伺服器cs檔案中的方法返回永真alert("伺服器返回true! ");}});});});</script></div></form></body></html>
2.2. 以前使用的老闆Ajax(維護老項目可能用到, 其實與第2種很類似): a.引用Ajax架構類庫 b. webconfig中添加配置 c.在App_Code中添加Ajax服務類, 並在CS檔案中註冊Ajax(Page_Load事件中) d.在App_Code中的CS檔案中帶Ajax標籤的處理方法 e.按鈕綁定觸發JS的方法 f.JS處理方法
//a. 引用Ajax架構的類庫Ajax.dll
//b. webconfig添加配置
<httpHandlers><add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/></httpHandlers>
//c. 在CS檔案中註冊Ajax(Page_Load事件中)
Ajax.Utility.RegisterTypeForAjax(typeof(SysBase_UserEdit)); //SysBase_UserEdit是分頁檔名稱
//d. 在App_Code中的CS檔案中帶Ajax標籤的處理方法
[Ajax.AjaxMethod]public DataSet getRoleData(int Roleid){DataSet ds =new DataSet();ds = r.SelectRoleData(string.Format(" and id={0}", Roleid));return ds;}
//e. 按鈕綁定觸發JS的方法
this.DDLRole.Attributes.Add("onpropertychange", "onCommandInputPropertyChange();"); //在Page_Load事件中基於Attribute為按鈕Binder 方法, 在aspx檔案中手動添加也可以
//f. JS處理方法
<script> function onCommandInputPropertyChange(){ if (event.propertyName == "value"){ var cmdInput = event.srcElement; if (cmdInput.value != 0){ //alert(cmdInput.value); BindRoleName(cmdInput.value); } } } //綁定角色名稱 function BindRoleName(RoleID){ //SysBase_UserEdit是aspx頁面的名稱 SysBase_UserEdit.getRoleData(RoleID,get_AllName); } function get_AllName(response){ var AllName = document.getElementById("DDLAjax"); AllName.length = 0; if (response.value != null){ var ds = response.value; if(ds != null && typeof(ds) == "object"){ var name = ds.Tables[0].Rows[0].rolename; var id = ds.Tables[0].Rows[0].id; AllName.options.add(new Option(name,id)); } } } </script>
3. VS2008整合的Ajax:
a.VS2005的話需要安裝外掛程式(Microsoft ASP.NET 2.0 AJAX Extensions) b.緊挨著Form元素放置ScriptManager控制項 c.在要重新整理的table元素首位處, 使用UpdatePanel和ContentTemplate包起來 d.在table元素結尾處的ContenTemplate和UpdatePanel之間放置trigger元素, 註冊Ajax觸發按鈕 e.引用類庫Ajax2 f.VS2005需要配置webConfig
//d. 在table元素結尾處的ContenTemplate和UpdatePanel之間放置trigger元素, 註冊Ajax觸發按鈕(btn_Search, btn_Delete均為按鈕)
<Triggers><asp:AsyncPostBackTrigger ControlID="AspNetPager1"/><asp:AsyncPostBackTrigger ControlID="btn_Search"/><asp:AsyncPostBackTrigger ControlID="btn_Delete"/></Triggers>
//f. VS2005需要配置webConfig
<httpHandlers><!-- 調用AjaxPro.2--><add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/><remove verb="*" path="*.asmx"/><add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/></httpHandlers>
============================分割線============================
關於第一種: Js中的Ajax非同步呼叫, 補充點東東, 不單獨開篇了
關於參數傳遞 :
1.
get方式傳參, 參數儲存在URL中, 例如:
xhr.open("get", "json.ashx?name=xxx", true);
xhr.send(null);
在服務端(json.ashx後台代碼), 可以用HttpContext類型的參數對象context來擷取, 擷取方式context.Request.QueryString["name"]....等等(自己在調試狀態下看)
2.
post方式傳參, 參數儲存在請求包的包體(Body)中, 例如:
xhr.open("post","json.ashx",true);
xhr.send("xxx");
或者
xhr.send("name=xxx");
相應的伺服器端(json.ashx後台代碼), 針對2中"非索引值對"、"索引值對"有兩種擷取方法:
非索引值對: 用context.Request.InputStream擷取, 如:
System.IO.Stream stream = context.Request.InputStream;
System.IO.StreamReader sr = new System.IO.StreamReader(stream);
string strParam = sr.ReadToEnd();
其中涉及編碼轉換的, 自己在調整下.
索引值對: 用context.Request.Form["name"]...擷取
以上這篇Ajax學習筆記---3種Ajax的實現方法【推薦】就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援雲棲社區。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
