Ajax常用在網頁單獨某一區塊的內容更新，不需要整頁網頁重新整理就可以得到區塊內容的更新，而常用與Web-Server做資料交換的格式有純文字、Parameter(key=value)、XML或是json等，而json為最常使用的格式之一，它不像XML格式，需要開始Tag與結束Tag，只需要利用Key,Value的方式來進行資料的設定，比XML更為簡單、內容大小更為精簡，詳細內容及方法可以參考
http://www.json.org/。
asp.net(使用c sharp)使用jQuery實作Ajax與伺服器溝通。
建立Web服務器asmx
利用Web服務器的函數(方法)來處理Ajax的需求及回應
要使用Ajax呼叫Web服務，需要把System.WebScript.Services.SrciptService這行的mark拿掉才可以。
再來建立相對應的函數(方法)，Ajax呼叫的網頁會是getData.asmx/函數(方法)
如需要共用Session內容，則需在WebMethod加上enableSession:true才可
另一個範例，使用request來取得Ajax傳來的POST及GET二種方法的資料，而使用Response來回傳處理過後json格式資料。
- 回傳json格式需設定檔頭header的contentType為application/jsp，否則會被設定為xml格式
- 取得post資料使用the.Context.Request.Form[key名稱]
取得Get資料則使用the.Context.Response.QueryString[key名稱]
- 利用Dictionary來設定及存放要回應的資料
- 使用JavaScriptSerializer來序列化dictionary內容，會自動產生json格式，不使用return而需使用Response.Write內容才可。
原始碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;
namespace JQueryJson
{
/// <summary>
/// getData 的摘要描述
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允許使用 ASP.NET AJAX 從指令碼呼叫此 Web 服務，請取消註解下一行。
[System.Web.Script.Services.ScriptService]
public class getData : System.Web.Services.WebService
{
[WebMethod(enableSession: true)]
public void HelloWorld()
{
//設定輸出格式為json格式
this.Context.Response.ContentType = "application/json";
//post
String data = this.Context.Request.Form["ret"];
//get
String data1 = this.Context.Request.QueryString["val"];
Dictionary<String, Object> dic = new Dictionary<string, object>();
dic["data"] = "Post取得的值為:"+data;
dic["data1"] = "Get取得的值為:"+data1;
//新版的可以用
//System.Runtime.Serialization.Json.DataContractJsonSerializer
JavaScriptSerializer serializer = new JavaScriptSerializer();
//輸出json格式
this.Context.Response.Write(serializer.Serialize(dic));
}
//以下Session的使用
[WebMethod(enableSession: true)]
public string removeSession()
{
Session.Remove("test");
return "移除Session : 測試Session裡的值為: " +Session["test"];
}
[WebMethod(enableSession: true)]
public string showSession()
{
String data = (String)Session["test"];
if (data == null)
data = "Session內無值";
return "Session['test']值為:"+data;
}
[WebMethod(enableSession:true)]
public string setSession()
{
Session["test"] = "helloworld";
return "設定Session成功!";
}
}
}
|
asp.net網頁內容
建立四個按鈕及一個顯示資料的區塊
撰寫jQuery Ajax動作
Session相關的範例因為回傳的資料型態預設為xml，所以需要利用jQuery來解析XML，而url的參數則設定成getData.asmx/方法(函數)
另一範例則是傳送了get及post內容給Web服務，取出後再組合成json格式回傳到網頁端，因為回傳格式為json，所以可以直接使用response.keyName來取得Value
程式碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="JQueryJson._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>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function () {
//設定Session
$("#bt1").click(function () {
$.ajax({
type: "post",
url: "getData.asmx/setSession",
success: function (response) {
$("#data").html($(response).find("string").text());
}
});
}
);
//顯示Session內容
$("#bt2").click(function () {
$.ajax({
type: "post",
url: "getData.asmx/showSession",
success: function (response) {
$("#data").html($(response).find("string").text());
}
});
}
);
//移除Session內容
$("#bt3").click(function () {
$.ajax({
type: "post",
url: "getData.asmx/removeSession",
success: function (response) {
$("#data").html($(response).find("string").text());
}
});
}
);
//傳送值及接數json回傳
$("#bt4").click(function () {
$.ajax({
type: "post",
url: "getData.asmx/HelloWorld?val=哈囉",
data:"ret=資料內容",
success: function (response) {
$("#data").html(response.data + "<br/>"+response.data1 );
}
});
}
);
});
</script>
</head>
<body>
<input type="button" id="bt1" value="設定Session" />
<input type="button" id="bt2" value="顯示Session結果" />
<input type="button" id="bt3" value="移除Session" />
<input type="button" id="bt4" value="傳送值及回傳json" />
<div id="data">
123
</div>
</body>
</html>
|
實際操作
設定Session
回傳格式為預設的xml格式，利用jQuery解析後取出string的值，顯示於div內
因為前一個動作有設定Session，所以可以取得Session[“test”]的值
把剛才設定的Session移除remove掉
再顯示一次Session的內容，資料為空
傳送GET及POST資料，再回傳json格式，顯示於div上
參數部份為GET傳送之內容
Post部份為POST傳送之內容
程式碼下載
沒有留言:
張貼留言