快捷導(dǎo)航

探討jQuery的ajax使用場(chǎng)景(c#)

更新時(shí)間：2013年12月03日 10:02:53 作者：

這篇文章主要是對(duì)jQuery的ajax使用場(chǎng)景進(jìn)行了探討。需要的朋友可以過來參考下，希望對(duì)大家有所幫助

一：jQuery.ajax語(yǔ)法基礎(chǔ)

jQuery.ajax([options])

概述：通過 HTTP 請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)。

jQuery 底層 AJAX 實(shí)現(xiàn)。簡(jiǎn)單易用的高層實(shí)現(xiàn)見 $.get, $.post 等。$.ajax() 返回其創(chuàng)建的 XMLHttpRequest 對(duì)象。使用這個(gè)方法可以獲得更多的靈活性。

數(shù)據(jù)類型
$.ajax()函數(shù)依賴服務(wù)器提供的信息來處理返回的數(shù)據(jù)。通過dataType選項(xiàng)還可以指定其他不同數(shù)據(jù)處理方式。其中，text和xml類型返回的數(shù)據(jù)不會(huì)經(jīng)過處理。如果指定為html類型，任何內(nèi)嵌的JavaScript都會(huì)在HTML作為一個(gè)字符串返回之前執(zhí)行。如果指定為json類型，則會(huì)把獲取到的數(shù)據(jù)作為一個(gè)JavaScript對(duì)象來解析，并且把構(gòu)建好的對(duì)象作為結(jié)果返回。發(fā)送數(shù)據(jù)到服務(wù)器，默認(rèn)情況下，Ajax請(qǐng)求使用GET方法。如果要使用POST方法，可以設(shè)定type參數(shù)值。這個(gè)選項(xiàng)也會(huì)影響data選項(xiàng)中的內(nèi)容如何發(fā)送到服務(wù)器。

使用場(chǎng)景一：
描述:保存數(shù)據(jù)到服務(wù)器，成功時(shí)顯示信息。jQuery 代碼:
$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

使用場(chǎng)景二：
描述:裝入一個(gè) HTML 網(wǎng)頁(yè)最新版本。jQuery 代碼:
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});

load(url, [data], [callback])
概述：載入遠(yuǎn)程 HTML 文件代碼并插入至 DOM 中。
默認(rèn)使用 GET 方式 - 傳遞附加參數(shù)時(shí)自動(dòng)轉(zhuǎn)換為 POST 方式。

使用場(chǎng)景一：
描述:加載 feeds.html 文件內(nèi)容。jQuery 代碼:
$("#feeds").load("feeds.html");

jQuery.get(url, [data], [callback], [type])和jQuery.post(url, [data], [callback], [type])

概述：通過遠(yuǎn)程 HTTP GET或POST 請(qǐng)求載入信息。
這是一個(gè)簡(jiǎn)單的 GET或POST 請(qǐng)求功能以取代復(fù)雜 $.ajax 。請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù)。如果需要在出錯(cuò)時(shí)執(zhí)行函數(shù)，請(qǐng)使用 $.ajax。
描述:顯示 test.aspx 返回值(HTML 或 XML，取決于返回值)，添加一組請(qǐng)求參數(shù)。jQuery 代碼:
$.get("test.aspx", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
$.post("test.aspx", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});

上面是基本的語(yǔ)法，我們只是先做一個(gè)了解，要是你已經(jīng)熟悉，那么我們將開始一步一步對(duì)上面的方法和使用場(chǎng)景進(jìn)行具體討論。

二：jQuery.ajax伴隨ASP.NET的實(shí)戰(zhàn)練習(xí)

首先創(chuàng)建Default.aspx頁(yè)面，作為請(qǐng)求發(fā)起頁(yè)面，并會(huì)獲得返回值。頁(yè)面的代碼Default.aspx是：

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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JqueryAjax2._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="js\jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $('#showinfo').click(function() {
            var data = { key1: "劉明豐", key2: "林望" };
            $.ajax({
                type: "POST",
                url: "response.aspx",
                data: data,
                dataType: "text",
                success: function(msg) {
                    $("#ajax").append(msg);
                }
            });
            $.ajax({
                url: "test.htm",
                cache: false,
                success: function(html) {
                    $("#resulthtml").append(html);
                }
            });
            $("#load").load("test.htm");
            $.get("response.aspx", data, success1, "text");
            $.get("TextJson.txt", success3, "json");
            $.post("response.aspx", data, success2, "text");
            function success1(message) {
                $("#get").append(message);
            }
            function success2(message) {
                $("#post").append(message);
            }
            function success3(siteData) {
                var result = "<li>334一號(hào)床:" + siteData.key1 + "</li>";
                result += "<li>334二號(hào)床:" + siteData.key2 + "</li>";
                result += "<li>334三號(hào)床: " + siteData.key3 + "</li>";
                result += "<li>334四號(hào)床: " + siteData.key4 + "</li>";
                $("#result").html(result);
            }
        });
    });
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
<input type="button" id="showinfo" value="show info"></input> 
     <ul id="ajax">ajax:</ul>
     <ul id="resulthtml">resulthtml:</ul>
     <ul id="load">load:</ul>     
     <ul id="get">get:</ul>
     <ul id="post">post:</ul>
     <ul id="result"></ul>

</body>
</html>

Default.aspx.cs里面有沒寫任何代碼，默認(rèn)即可。
請(qǐng)求的接受者這里面有三種角色：response.aspx頁(yè)面、test.htm靜態(tài)頁(yè)面和TextJson.txt。

response.aspx頁(yè)面：主要是在服務(wù)器端獲得客戶端提交的數(shù)據(jù)，并返回?cái)?shù)據(jù)給客戶端。
test.htm靜態(tài)頁(yè)面：主要是給客戶端局部裝入一個(gè)HTML網(wǎng)頁(yè)最新版本。
TextJson.txt：是作為數(shù)據(jù)儲(chǔ)存在文件中，讓客戶端來異步訪問的。

response.aspx頁(yè)面代碼，response.aspx是：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="response.aspx.cs" Inherits="JqueryAjax2.response" %>

沒有任何html代碼，因?yàn)橹饕窃诜?wù)器端獲得客戶端提交的數(shù)據(jù)，并返回?cái)?shù)據(jù)給客戶端，不需要顯示html內(nèi)容，所以可以不含html標(biāo)記。
response.aspx.cs頁(yè)面代碼：

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Runtime.Serialization.Json;
using System.Runtime.Serialization;

namespace JqueryAjax2
{
    public partial class response : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string str = Request["key1"];
            Response.Write("success" + str);
        }
    }
}

在代碼中可以看到服務(wù)器端獲得客戶端提交的數(shù)據(jù)，并返回?cái)?shù)據(jù)給客戶端的方式。

test.htm靜態(tài)頁(yè)面的代碼是：

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

<!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></title>
</head>
<body>
test.html
</body>
</html>

當(dāng)靜態(tài)頁(yè)面被請(qǐng)求后，會(huì)作為html的格式返回客戶端，使用 $("#resulthtml").append(html);這樣的方法來顯示test.htm靜態(tài)頁(yè)面的內(nèi)容。

TextJson.txt里面保存著一段文本，是json格式的：

{ "key1": "劉明豐", "key2": "林望", "key3": "陳文杰", "key4": "耿殿佳" }

在被訪問后返回的是json格式的數(shù)據(jù)，在客戶端獲得json后會(huì)自動(dòng)轉(zhuǎn)換成對(duì)象。

好了，jQuery的異步使用場(chǎng)景基本滿足我們的需求，自己試試看吧。

您可能感興趣的文章: