主頁 > 知識(shí)庫 > ASP.NET中使用Ajax的方法

ASP.NET中使用Ajax的方法

熱門標(biāo)簽:巫師3為什么地圖標(biāo)注的財(cái)寶沒有 世紀(jì)佳緣地圖標(biāo)注怎么去掉 外呼系統(tǒng)費(fèi)用一年 外呼系統(tǒng)代理品牌 寧波自動(dòng)外呼系統(tǒng)代理 辦理400電話證件 手機(jī)地圖標(biāo)注如何刪除 怎么給超市做地圖標(biāo)注入駐店 十堰正規(guī)電銷機(jī)器人系統(tǒng)

$.ajax向普通頁面發(fā)送get請(qǐng)求
這是最簡(jiǎn)單的一種方式了,先簡(jiǎn)單了解jQuery ajax的語法,最常用的調(diào)用方式是這樣:$.ajax({settings}); 有幾個(gè)常用的setting,全部參數(shù)及其解釋可以去jQuery官方API文檔查詢

1. type:請(qǐng)求方式 get/post
2. url:請(qǐng)求的Uri
3. async:請(qǐng)求是否為異步
4. headers:自定義的header參數(shù)
5. data:發(fā)往服務(wù)器的參數(shù)
6. dataType:參數(shù)格式,常見的有string、json、xml等
7. contents:決定怎樣解析response的一個(gè)”字符串/正則表達(dá)式” map
8. contentType:發(fā)送到服務(wù)器的額數(shù)據(jù)的內(nèi)容編碼類型,它的默認(rèn)值是"application/x-www-form-urlencoded; charset=UTF-8""。
9. success:請(qǐng)求成功后調(diào)用的句柄
10.error:請(qǐng)求失敗后調(diào)用的句柄

沒使用過jQuery的ajax話這樣看有些云里霧里的感覺,來看一個(gè)簡(jiǎn)單例子

首先使用Visual Studio新建一個(gè)WebApplication,把jQuery.js引入project,然后添加兩個(gè)頁面,Default.aspx作為測(cè)試用

Default.aspx

復(fù)制代碼 代碼如下:

%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %>
!DOCTYPE html >
html>
head runat="server">
    title>Ajax/title>
    script src="jQuery.js" type="text/javascript">/script>
    style type="text/css">
        html, body, form
        {
            width: 100%;
            height: 100%;
            padding: 0px;
            margin: 0px;
        }

        #container
        {
            margin: 100px;
            height: 300px;
            width: 500px;
            background-color: #eee;
            border: dached 1px #0e0;
        }
    /style>
/head>
body>
    form id="form1" runat="server">
    div id="container">
        input type="button" value="Test Ajax" onclick="testGet()" />
        br />
    /div>
    script type="text/javascript">
        function setContainer(text) {
            document.getElementById("container").innerHTML += ('br/>' + text);
        }

        function testGet() {
            $.ajax({
                type: 'get',
                url: 'NormalPage.aspx',
                async: true,
                success: function (result) {
                    alert(result);
                },
                error: function () {
                    setContainer('ERROR!');
                }
            });
        }
    /script>
    /form>
/body>
/html>

NormalPage.aspx作為請(qǐng)求頁面,先不做任何處理。在Default.aspx頁面中的JavaScript中可以看到testGet函數(shù)就利用jQuery的ajax向Normal.aspx發(fā)送了了一個(gè)get請(qǐng)求,沒寫的參數(shù)使用jQuery默認(rèn)參數(shù),這個(gè)調(diào)用沒使用任何參數(shù),簡(jiǎn)單向Normal.aspx頁面發(fā)送請(qǐng)求,請(qǐng)求成功則alert全部response(即success方法參數(shù):result,jQuery會(huì)把responseText傳入success方法第一個(gè)參數(shù)),請(qǐng)求失敗則向DIV中添加一行錯(cuò)誤提示文本。如果一切正常,可以看到頁面彈出對(duì)話框,對(duì)話框內(nèi)內(nèi)容即是Normal.aspx頁面內(nèi)容

一個(gè)簡(jiǎn)單的get請(qǐng)求完成了,這樣的結(jié)果一般沒有多大用處,也不是ajax意圖所在,使用Ajax主要是想使用JavaScript可以異步向服務(wù)器發(fā)送特定請(qǐng)求,獲取服務(wù)器相關(guān)數(shù)據(jù),比如向服務(wù)器詢問天氣,然后獲得天氣數(shù)據(jù),更新頁面,而不是獲取整個(gè)頁面,換句話說,使用Ajax本身就是為了擺脫更新整個(gè)頁面來更新頁面數(shù)據(jù)這種模式,僅僅需要服務(wù)器給我們數(shù)據(jù)即可,這就需要調(diào)用服務(wù)器端的特定方法。

$.ajax GET請(qǐng)求調(diào)用服務(wù)器特定方法

我們這時(shí)候需要修改NormalPage.aspx,為其添加幾個(gè)方法供Default.aspx測(cè)試調(diào)用

復(fù)制代碼 代碼如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Web
{
    public partial class NormalPage : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string action = Request.QueryString["action"];
            Response.Clear(); //清除所有之前生成的Response內(nèi)容
            if (!string.IsNullOrEmpty(action))
            {
                switch (action)
                {
                    case "getTime":
                        Response.Write(GetTime());
                        break;
                    case "getDate":
                        Response.Write(GetDate());
                        break;
                }
            }
            Response.End(); //停止Response后續(xù)寫入動(dòng)作,保證Response內(nèi)只有我們寫入內(nèi)容
        }


        private string GetDate()
        {
            return DateTime.Now.ToShortDateString();
        }

        private string GetTime()
        {
            return DateTime.Now.ToShortTimeString();
        }
    }
}

然后為Default.aspx添加一個(gè)新的方法,并修改button的onclick方法為新寫的函數(shù)

復(fù)制代碼 代碼如下:

function testGet2() {
            $.ajax({
                type: 'get',
                url: 'NormalPage.aspx',
                async: true,
                data:{action:'getTime'},
                success: function (result) {
                    setContainer(result);
                },
                error: function () {
                    setContainer('ERROR!');
                }
            });
        }

testGet2函數(shù)是在testGet函數(shù)的基礎(chǔ)上做了些許修改,首先對(duì)success方法做了更改,把得到的response寫到頁面;然后對(duì)請(qǐng)求添加了data參數(shù),請(qǐng)求向服務(wù)器發(fā)送了一個(gè)action:getTime的鍵值對(duì),在get請(qǐng)求中jQuery會(huì)把此參數(shù)轉(zhuǎn)為url的參數(shù),上面寫法和這種寫法效果一樣

復(fù)制代碼 代碼如下:

function testGet3() {
            $.ajax({
                type: 'get',
                url: 'NormalPage.aspx?action=getTime',
                async: true,
                success: function (result) {
                    setContainer(result);
                },
                error: function () {
                    setContainer('ERROR!');
                }
            });
        }

看一下執(zhí)行效果,這是Chrome的監(jiān)視結(jié)果

如果調(diào)試我們發(fā)現(xiàn)這個(gè)請(qǐng)求調(diào)用的服務(wù)器頁面NormalPage.aspx的GETime方法,并且response中只包含對(duì)有用的數(shù)據(jù),如果把請(qǐng)求中參數(shù)的值改為getDate,那么就會(huì)調(diào)用對(duì)應(yīng)GetDate方法。

$.ajax POST與json
這樣向一個(gè)頁面發(fā)送請(qǐng)求然后在Load事件處理程序中根據(jù)參數(shù)調(diào)用不同方法,清除Response,寫入Response,終止Response,而且傳入的參數(shù)局限性太大,好業(yè)余的趕腳,看看專業(yè)些解決方法。為project添加一個(gè)General Handler類型文件,關(guān)于HttpHandler相關(guān)內(nèi)容本文不做詳細(xì)解釋,只需知道它可以非常輕量級(jí)的處理HTTP請(qǐng)求,不用走繁瑣的頁面生命周期處理各種非必需數(shù)據(jù)。

Handler.ashx.cs

復(fù)制代碼 代碼如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;

namespace Web
{
    /// summary>
    /// Summary description for Handler
    /// /summary>
    public class Handler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            Student stu = new Student();
            int Id = Convert.ToInt32(context.Request.Form["ID"]);
            if (Id == 1)
            {
                stu.Name = "Byron";
            }
            else
            {
                stu.Name = "Frank";
            }
           string stuJsonString= JsonConvert.SerializeObject(stu);
           context.Response.Write(stuJsonString);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

關(guān)于這個(gè)類語法本文不做詳細(xì)說明,每次發(fā)起HTTP請(qǐng)求ProcessRequest方法都會(huì)被調(diào)用到,Post類型請(qǐng)求參數(shù)和一再Request對(duì)象的Form中取得,每次根據(jù)參數(shù)ID值返回對(duì)應(yīng)json對(duì)象字符串,為了展示json格式數(shù)據(jù)交互,需要為項(xiàng)目引入json.net這一開源類庫處理對(duì)象序列化反序列化問題,然后創(chuàng)建一個(gè)Student類文件

Student.cs

復(fù)制代碼 代碼如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Web
{
    public class Student
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }
}

看看頁面如何處理

復(fù)制代碼 代碼如下:

function testPost() {
            $.ajax({
                type: 'post',
                url: 'Handler.ashx',
                async: true,
                data: { ID: '1' },
                success: function (result) {
                    setContainer(result);
                    var stu =eval ('('+result+')');
                    setContainer(stu.ID);
                    setContainer(stu.Name);
                },
                error: function () {
                    setContainer('ERROR!');
                }
            });
        }

結(jié)果是這個(gè)樣子的

上面代碼向Handler.ashx發(fā)送一Post請(qǐng)求,比且?guī)в袇?shù){ID:'1'},可以看到結(jié)果,如果用調(diào)試工具可以發(fā)現(xiàn),得到的result是一個(gè)json格式的字符串,也就是往Response寫的對(duì)象序列化后的結(jié)果。這樣就實(shí)現(xiàn)了比較專業(yè)些的方式調(diào)用Ajax,但是有一個(gè)問題依舊存在,HttpHandler會(huì)自動(dòng)調(diào)用ProcessRequest方法,但是也只能調(diào)用該方法,如果想調(diào)用不同方法只能像普通頁面那樣傳遞一個(gè)參數(shù)表明調(diào)用哪個(gè)方法,或者寫不同的Handler文件。

WebService與ScriptManager
微軟向來很貼心,看看微軟怎么處理上面的困惑,那就是利用WebService,WebService配合SCriptManager有客戶端調(diào)用的能力,在項(xiàng)目中添加一個(gè)Webservice文件

WebService.asmx

復(fù)制代碼 代碼如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace Web
{
    /// summary>
    /// Summary description for WebService
    /// /summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    [System.Web.Script.Services.ScriptService]
    public class WebService : System.Web.Services.WebService
    {

        [WebMethod]
        public Student GetStudent(int  ID)
        {
            if (ID == 1)
            {
                return new Student() { ID = 1, Name = "Byron" };
            }
            else
            {
                return new Student() { ID = 2, Name = "Frank" };
            }
        }

       
        [WebMethod]
        public string GetDateTime(bool isLong)
        {
            if (isLong)
            {
                return DateTime.Now.ToLongDateString();
            }
            else
            {
                return DateTime.Now.ToShortDateString();
            }
        }    }
}

代碼中加黃的code默認(rèn)是被注釋掉的,要想讓客戶端調(diào)用需要把注釋去掉,Service中定義了兩個(gè)方法,寫個(gè)測(cè)試方法讓客戶端調(diào)用第一個(gè)方法根據(jù)參數(shù)返回對(duì)應(yīng)對(duì)象,首先需要在頁面from內(nèi)加上ScriptManager,引用剛才寫的WebService文件

Default.aspx

復(fù)制代碼 代碼如下:

form id="form1" runat="server">
    asp:ScriptManager ID="clientService" runat="server">
        Services>
            asp:ServiceReference Path="~/WebService.asmx" />
        /Services>
    /asp:ScriptManager>
    div id="container">
        input type="button" value="Test Ajax" onclick="testPost2()" />
        br />
    /div>
...

然后添加JavaScript測(cè)試代碼

復(fù)制代碼 代碼如下:

function testPost2() {
            Web.WebService.GetStudent(1, function (result) {
                setContainer(result.ID);
                setContainer(result.Name);
            }, function () {
                setContainer('ERROR!');
            });
        }

測(cè)試代碼中需要顯示書寫WebService定義方法完整路徑,WebService命名空間.WebService類名.方法名,而出入的參數(shù)列表前幾個(gè)是調(diào)用方法的參數(shù)列表,因?yàn)镚etStudent只有一個(gè)參數(shù),所以只寫一個(gè),如果有兩個(gè)參數(shù)就順序?qū)憙蓚€(gè),另外兩個(gè)參數(shù)可以很明顯看出來是響應(yīng)成功/失敗處理程序??纯磮?zhí)行結(jié)果:

觀察仔細(xì)會(huì)發(fā)現(xiàn)使用ScriptManager和WebService組合有福利,在WebService中傳回Student對(duì)象的時(shí)候并沒有序列化成字符串,而是直接返回,看上面圖發(fā)現(xiàn)對(duì)象已經(jīng)自動(dòng)轉(zhuǎn)換為一json對(duì)象,result結(jié)果可以直接操作,果真非常貼心。而上一個(gè)例子中我們得到的response是一個(gè)json字符串,在客戶端需要用eval使其轉(zhuǎn)換為json對(duì)象。

ScriptManager+WebSefvice調(diào)用ajax帶來了很大的便利性,但同時(shí)犧牲了很多靈活性,我們沒法像jQuery那樣指定很多設(shè)置有沒有兩全其美的辦法呢

$.ajax+WebService

jQuery調(diào)用Handler幾乎完美了,但是不能處理多個(gè)方法,上面例子我們可以發(fā)現(xiàn)WebService可以實(shí)現(xiàn)這一功能,那么能不能jQUery調(diào)用WebService的不同方法呢?答案是肯定的,試一試用jQuery調(diào)用剛才WebService定義的第二個(gè)方法。寫一個(gè)測(cè)試函數(shù)

復(fù)制代碼 代碼如下:

function testPost3() {
            $.ajax({
                type: 'post',
                url: 'WebService.asmx/GetDateTime',
                async: true,
                data: { isLong: true },
                success: function (result) {
                    setContainer($(result).find('string').text());
                },
                error: function () {
                    setContainer('ERROR!');
                }
            });
        }

調(diào)用方式?jīng)]有多大變化,簡(jiǎn)單依舊,只要把URL改為WebService路徑+需要調(diào)用的方法名,然后把參數(shù)放到data里就可以了。我們看看結(jié)果:

通過上圖可以看到,jQuery調(diào)用WebService默認(rèn)會(huì)返回一個(gè)XML文檔,而需要的數(shù)據(jù)在 string>節(jié)點(diǎn)中,只需要使用jQuery解析xml的語法就可以輕松得到數(shù)據(jù)。如果希望返回一個(gè)json對(duì)象怎么辦?那就得和調(diào)用Handler一樣使用json.net序列化,然后前端使用eval轉(zhuǎn)換了,也不會(huì)過于復(fù)雜。我在項(xiàng)目中最常使用這個(gè)模式,這樣既保持了jQuery的靈活性又可以在一個(gè)Service中書寫多個(gè)方法供調(diào)用,還不用走復(fù)雜的頁面生命周期

json.net和本文示例源代碼

json.net是一個(gè)開源的.net平臺(tái)處理json的庫,可以序列化Dictionay嵌套等復(fù)雜對(duì)象,關(guān)于其簡(jiǎn)單使用有時(shí)間會(huì)總結(jié)一下,可以自codeplex上得到其源碼和官方說明。本文的源代碼可以點(diǎn)擊這里獲得。

您可能感興趣的文章:
  • asp.net+ajax的Post請(qǐng)求實(shí)例
  • asp.net+ajaxfileupload.js 實(shí)現(xiàn)文件異步上傳代碼分享
  • asp.net使用AJAX實(shí)現(xiàn)無刷新分頁
  • ASP.NET中MVC使用AJAX調(diào)用JsonResult方法并返回自定義錯(cuò)誤信息
  • ASP.NET MVC中的AJAX應(yīng)用
  • asp.net+ajax+sqlserver自動(dòng)補(bǔ)全功能實(shí)現(xiàn)解析
  • jquery.Ajax()方法調(diào)用Asp.Net后臺(tái)的方法解析
  • Ajax+asp.net智能匹配檢索(含圖含完整代碼)
  • ASP.NET中實(shí)現(xiàn)jQuery Validation-Engine的Ajax驗(yàn)證
  • ASP.NET中Ajax怎么使用

標(biāo)簽:嘉興 天門 牡丹江 景德鎮(zhèn) 泰州 山西 通遼

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《ASP.NET中使用Ajax的方法》,本文關(guān)鍵詞  ASP.NET,中,使用,Ajax,的,方法,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《ASP.NET中使用Ajax的方法》相關(guān)的同類信息!
  • 本頁收集關(guān)于ASP.NET中使用Ajax的方法的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章