Ajax學(xué)習(xí)筆記---3種Ajax的實(shí)現(xiàn)方法【推薦】

更新時(shí)間：2016年05月05日 16:27:50 投稿：jingxian

下面小編就為大家?guī)?lái)一篇Ajax學(xué)習(xí)筆記---3種Ajax的實(shí)現(xiàn)方法【推薦】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考

Ajax: Asynchronous JavaScript and Xml , 異步j(luò)s腳本和xml , 常用來(lái)實(shí)現(xiàn)頁(yè)面局部的異步刷新, 對(duì)提高用戶(hù)體驗(yàn)有很大幫助. Xml在多語(yǔ)言時(shí)較有優(yōu)勢(shì), 但Ajax技術(shù)實(shí)際上較多采用Json對(duì)象而不是Xml來(lái)處理數(shù)據(jù).

(一) Ajax歷史....了解性知識(shí)

Ajax歸屬于Web前端開(kāi)發(fā)技術(shù), 與javascript有著異常緊密的聯(lián)系. Ajax就是一種實(shí)現(xiàn)異步通信無(wú)刷新的技術(shù), 而這種技術(shù)可以有很多種實(shí)現(xiàn)方式. 瀏覽器的鼻祖網(wǎng)景(NetScape)公司最早發(fā)明了LiveScript腳本語(yǔ)言, 用來(lái)豐富網(wǎng)頁(yè)元素的表現(xiàn)形式, 使網(wǎng)頁(yè)能夠呈現(xiàn)出動(dòng)態(tài)效果. 隨后的歷次改版升級(jí)后就誕生了JavaScript語(yǔ)言, 與此同期微軟(Microsoft)公司也看到互聯(lián)網(wǎng)的前景, 開(kāi)始涉足并發(fā)力于互聯(lián)網(wǎng)行業(yè), 推出了JScript語(yǔ)言, 可惜沒(méi)有JavaScript成熟, 發(fā)展遲滯. 最終微軟公司對(duì)互聯(lián)網(wǎng)的決心促成了MS對(duì)NS的漫長(zhǎng)曲折的收購(gòu)歷程.

這里提一下, 動(dòng)態(tài)HTML語(yǔ)言(Dynamic Hyper Text Markup Language)就是將javascript放在Dom樹(shù)的元素節(jié)點(diǎn)中, 為元素提供動(dòng)態(tài)展示行為.

(二)Web前端開(kāi)發(fā)的兩個(gè)思路： a. JavaScript + XHR + CSS b. Flash ---> 瀏覽器插件 ---> Flex(Adobe); Silverlight4.0(MS)

1. Ajax: 以MS的XHR(XMLHttpRequest)為核心 ---> Ajax

2. flash: MicroMedia ---> 被Adobe收購(gòu) ---> flex (涵蓋了ActionScript和Rich Internet Application等技術(shù)的組合)

3. SilverLight: 微軟為了抗衡flex而推出的SilverLight

備注:

為了能夠在后臺(tái)異步與服務(wù)器進(jìn)行通訊, 微軟在IE中添加了兩個(gè)組件: 負(fù)責(zé)與服務(wù)器通訊的組件(XMLHTTPRequest)和XML的處理組件. 采用XML作為數(shù)據(jù)交換的載體, 在多語(yǔ)言處理時(shí)具有優(yōu)勢(shì), 但xml的處理成本較高, 實(shí)際上Ajax中通常采用Json對(duì)象在客戶(hù)端瀏覽器和服務(wù)器之間傳遞數(shù)據(jù).

網(wǎng)頁(yè)的生成過(guò)程其實(shí)是由服務(wù)器上的一組程序來(lái)完成的, 這樣為了在客戶(hù)端的JS語(yǔ)言和服務(wù)器端的C#語(yǔ)言傳遞數(shù)據(jù), .Net提供了Json序列化和反序列化器, 來(lái)提供服務(wù)器端C#對(duì)象和Json對(duì)象之間的轉(zhuǎn)換. 而在瀏覽器端可以使用eval()函數(shù)獲取服務(wù)器傳遞過(guò)來(lái)的Json串轉(zhuǎn)化為Json對(duì)象.

(三)Ajax解決什么問(wèn)題

我們都知道, 在客戶(hù)端向服務(wù)器請(qǐng)求一個(gè)頁(yè)面時(shí), 服務(wù)器首先動(dòng)態(tài)的計(jì)算并生成出頁(yè)面, 然后再發(fā)給客戶(hù)端. 客戶(hù)端瀏覽器順序編譯并呈現(xiàn)頁(yè)面.

在沒(méi)有Ajax時(shí): 假如說(shuō)頁(yè)面有個(gè)用戶(hù)驗(yàn)證控件, 那么在客戶(hù)端瀏覽器呈現(xiàn)用戶(hù)驗(yàn)證控件時(shí), 會(huì)等待服務(wù)器的驗(yàn)證結(jié)果, 收到結(jié)果后才能繼續(xù)呈現(xiàn)頁(yè)面元素. 而這個(gè)驗(yàn)證過(guò)程通常要進(jìn)行讀取數(shù)據(jù)庫(kù)等操作, 這就是所謂的同步方式. 而這種方式, 會(huì)造成網(wǎng)頁(yè)呈現(xiàn)的假死狀態(tài).

在使用Ajax后: 同樣是驗(yàn)證控件, 客戶(hù)端提交了驗(yàn)證請(qǐng)求后, 便繼續(xù)順序呈現(xiàn)其他元素. 當(dāng)取得驗(yàn)證結(jié)果后, 由javascript在客戶(hù)端修改內(nèi)存中的DOM對(duì)象后并呈獻(xiàn)給用戶(hù)(注意: 這里修改的只是內(nèi)存中的DOM對(duì)象, 而客戶(hù)端接收的頁(yè)面文件并沒(méi)有修改). 這樣, 使用異步的方式, 就不會(huì)出現(xiàn)假死狀態(tài), 同時(shí)客戶(hù)端也節(jié)省了等待服務(wù)器返回結(jié)果時(shí)的時(shí)間開(kāi)銷(xiāo).

(四)Ajax的實(shí)現(xiàn)(3中Ajax的實(shí)現(xiàn), 需要說(shuō)明的是: Ajax能夠?qū)崿F(xiàn)的效果, 通過(guò)WebService都能實(shí)現(xiàn).)

1. Js中的Ajax異步調(diào)用: a.new b.onreadystatechange(處理responseText) c.open(get方式和post方式) d.send (同步調(diào)用: 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() {
//創(chuàng)建XMLHttpRequest通信對(duì)象
var xhr;
if (window.ActiveXObject) { //標(biāo)準(zhǔn)情況下, 只能有兩個(gè)ActiveXObject對(duì)象處理通信過(guò)程
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"); //用來(lái)顯示處理結(jié)果
//使用onreadystatechange事件處理結(jié)果
xhr.onreadystatechange =function() {
if (xhr.readyState ==4) { // readyState表示服務(wù)器響應(yīng)狀態(tài). 4: 響應(yīng)接收完畢
if (xhr.status ==200) { // status 表示 http 請(qǐng)求的狀態(tài)
var json = xhr.responseText; //從請(qǐng)求中回應(yīng)中獲得json串
var obj = eval("("+ json +")"); // 借助 eval 將 json 串轉(zhuǎn)化為對(duì)象, 在客戶(hù)端瀏覽器必須解析為js對(duì)象
elem.innerHTML ="<span>"+ obj.name +"</span>";
}
}
}

//通過(guò)open設(shè)置請(qǐng)求方式
xhr.open("get", "json.ashx", true); //默認(rèn)為ture, false表示同步方式

//發(fā)送請(qǐng)求
xhr.send(null);

/* 同步方式, false表示不適用異步方式
xhr.open("get", "json.ashx", false);
xhr.send(null);
//處理結(jié)果
alert(xhr.responseText);
*/
}
</script>

<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { //ready函數(shù), 腳本加載完即執(zhí)行, 也可以用$(...$("#btn").click...)();加載
$("#btn").click(function showData() { //按鈕上添加onclick事件, 事件處理方法為showData()
$("#show").load("jquery.ashx"); //從jquery.ashx中獲取數(shù)據(jù)元素(innerHTML的內(nèi)容), 并顯示在div中
});
});
</script>

</body>
</html>

然后還需要在項(xiàng)目中, 添加類(lèi)似于json.ashx一般處理程序, 用于提供相關(guān)數(shù)據(jù)(如: 表格日歷的繪制, 去數(shù)據(jù)庫(kù)驗(yàn)證等操作)

//json.ashx

<%@ WebHandler Language="C#" Class="Json"%>

using System;
using System.Web;

publicclass Json : IHttpHandler {

publicvoid ProcessRequest (HttpContext context) {
context.Response.ContentType ="text/plain";

//對(duì)于靜態(tài)內(nèi)容, 需要禁用瀏覽器的緩存, 否則老是舊結(jié)果
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);

string name ="Mike";

string jsonFormat ="{{ \"name\": \"{0}\" }}"; //{{、}}是為了避免和Json中的{沖突而采用的特殊轉(zhuǎn)義符

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類(lèi)庫(kù)(AjaxPro2.dll) b.webconfig中添加配置文件 c.在App_Code中創(chuàng)建類(lèi)庫(kù)文件(cs文件)提供Ajax服務(wù), 并在頁(yè)面對(duì)應(yīng)的后臺(tái)cs文件中注冊(cè)Ajax(Page_Load事件中) d.在App_Code中的類(lèi)庫(kù)文件(cs文件中)編寫(xiě)帶有Ajax標(biāo)簽的處理方法 e.在前臺(tái)的aspx文件中使用腳本處理結(jié)果(修改內(nèi)存中的DOM對(duì)象)并顯示在頁(yè)面上

//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 the
login page you may have to enable your own authorization configuration
here.
-->
<!--
<authorization>
<deny users="?"/>
</authorization>
-->
</system.web>
</location>

//c.在App_Code中創(chuàng)建類(lèi)庫(kù)文件(cs文件)提供Ajax服務(wù), 并在頁(yè)面對(duì)應(yīng)的后臺(tái)cs文件中注冊(cè)Ajax(Page_Load事件中)

//default.aspx.cs文件

protectedvoid Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(CalendarServices)); //AjaxPro會(huì)根據(jù)注冊(cè)的類(lèi)型自動(dòng)生成腳本
}

//d.在App_Code中的類(lèi)庫(kù)文件(cs文件中)編寫(xiě)帶有Ajax標(biāo)簽的處理方法

//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); //用來(lái)測(cè)試異步
returntrue; //這里為簡(jiǎn)單, 直接返回true
}
}

//e.在前臺(tái)的aspx文件中使用腳本處理結(jié)果(修改內(nèi)存中的DOM對(duì)象)并顯示在頁(yè)面上

//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 />
標(biāo)題:<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#中類(lèi)庫(kù)的使用, 其中function(result)是異步的結(jié)果處理方法
CalendarServices.save(date, title, detail, function(result) {
if (result.error !=null) { //服務(wù)器上出現(xiàn)異常
alert(result.error.Message);
}
if (result.value) { //服務(wù)器cs文件中的方法返回永真
alert("服務(wù)器返回true! ");
}
});
});
});
</script>
</div>
</form>
</body>
</html>

2.2. 以前使用的老板Ajax(維護(hù)老項(xiàng)目可能用到, 其實(shí)與第2種很類(lèi)似): a.引用Ajax框架類(lèi)庫(kù) b. webconfig中添加配置 c.在App_Code中添加Ajax服務(wù)類(lèi), 并在CS文件中注冊(cè)Ajax(Page_Load事件中) d.在App_Code中的CS文件中帶Ajax標(biāo)簽的處理方法 e.按鈕綁定觸發(fā)JS的方法 f.JS處理方法

//a. 引用Ajax框架的類(lèi)庫(kù)Ajax.dll

//b. webconfig添加配置

<httpHandlers>
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/>
</httpHandlers>

//c. 在CS文件中注冊(cè)Ajax(Page_Load事件中)

Ajax.Utility.RegisterTypeForAjax(typeof(SysBase_UserEdit)); //SysBase_UserEdit是頁(yè)面文件名稱(chēng)

//d. 在App_Code中的CS文件中帶Ajax標(biāo)簽的處理方法

[Ajax.AjaxMethod]
public DataSet getRoleData(int Roleid)
{
DataSet ds =new DataSet();
ds = r.SelectRoleData(string.Format(" and id={0}", Roleid));

return ds;
}

//e. 按鈕綁定觸發(fā)JS的方法

this.DDLRole.Attributes.Add("onpropertychange", "onCommandInputPropertyChange();"); //在Page_Load事件中基于Attribute為按鈕綁定方法, 在aspx文件中手動(dòng)添加也可以

//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頁(yè)面的名稱(chēng) 
    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包起來(lái) d.在table元素結(jié)尾處的ContenTemplate和UpdatePanel之間放置trigger元素, 注冊(cè)Ajax觸發(fā)按鈕 e.引用類(lèi)庫(kù)Ajax2 f.VS2005需要配置webConfig

//d. 在table元素結(jié)尾處的ContenTemplate和UpdatePanel之間放置trigger元素, 注冊(cè)Ajax觸發(fā)按鈕(btn_Search, btn_Delete均為按鈕)

<Triggers>
<asp:AsyncPostBackTrigger ControlID="AspNetPager1"/>
<asp:AsyncPostBackTrigger ControlID="btn_Search"/>
<asp:AsyncPostBackTrigger ControlID="btn_Delete"/>
</Triggers>

//f. VS2005需要配置webConfig

<httpHandlers>
<!-- 調(diào)用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>

============================分割線============================

關(guān)于第一種: Js中的Ajax異步調(diào)用, 補(bǔ)充點(diǎn)東東, 不單獨(dú)開(kāi)篇了

關(guān)于參數(shù)傳遞 :

1.
get方式傳參, 參數(shù)保存在URL中, 例如:

xhr.open("get", "json.ashx?name=xxx", true);
xhr.send(null);

在服務(wù)端(json.ashx后臺(tái)代碼), 可以用HttpContext類(lèi)型的參數(shù)對(duì)象context來(lái)獲取, 獲取方式context.Request.QueryString["name"]....等等(自己在調(diào)試狀態(tài)下看)

2.
post方式傳參, 參數(shù)保存在請(qǐng)求包的包體(Body)中, 例如:

xhr.open("post","json.ashx",true);
xhr.send("xxx");

或者
xhr.send("name=xxx");

相應(yīng)的服務(wù)器端(json.ashx后臺(tái)代碼), 針對(duì)2中"非鍵值對(duì)"、"鍵值對(duì)"有兩種獲取方法:

非鍵值對(duì): 用context.Request.InputStream獲取, 如:

System.IO.Stream stream = context.Request.InputStream;
System.IO.StreamReader sr = new System.IO.StreamReader(stream);
string strParam = sr.ReadToEnd();

其中涉及編碼轉(zhuǎn)換的, 自己在調(diào)整下.

鍵值對(duì): 用context.Request.Form["name"]...獲取

以上這篇Ajax學(xué)習(xí)筆記---3種Ajax的實(shí)現(xiàn)方法【推薦】就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: