Ajax與Wcf交互-JSON
Ajax與Wcf交互-JSON
在WCF的序列化中有DataContractJsonSerializer的格式化器,這就使得WCF相比傳統的Xml Web Serice多了一種輸入輸出的編碼格式:JSON.本文將介紹如何使用JSON實現Ajax與WCF之間的數據交互.
在WCF的序列化中有DataContractJsonSerializer的格式化器,這就使得WCF相比傳統的Xml Web Serice多了一種輸入輸出的編碼格式:JSON.本文將介紹如何使用JSON實現Ajax與WCF之間的數據交互.
JSON的全稱是JavaScript Object Notation,是專門用于適應Ajax和Restful而出現的取代xml的編碼格式.相比xml而言,它更適合javascript,
第一步: 在VS2008中創建一個.Net framework 3.5的網站項目,命名為AjaxWcfJson,不用多說,不會創建的可以參考上一篇文章Ajax與WCF交互-WCF之美,
第二步: 在網站項目中添加一個啟用了Ajax的WCF服務: WcfJsonService.svc,將其中代碼更改為如下:
[DataContract] public class Person 
{ 
[DataMember] 
public string Name { get; set; } 
[DataMember] public string Address { get; set;} 
} [ServiceContract(Namespace = "")] [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] public class WcfJsonService { static List<Person> list = new List<Person>(); // 添加 [WebGet] 屬性以使用 HTTP GET [OperationContract] [WebInvoke(RequestFormat = WebMessageFormat.Json)] public bool CreatePerson(Person p) { // 在此處添加操作實現 foreach (Person person in list) { if (p.Name ==person.Name) { return false; 
} } list.Add(p); Trace.WriteLine("-----------------------------------------"); foreach (Person person in list) { Trace.WriteLine("Name:" + person.Name + ",Address:" + person.Address); } Trace.WriteLine("-----------------------------------------"); return true; } [OperationContract] [WebInvoke(ResponseFormat=WebMessageFormat.Json)] public Person GetPerson(string name) { foreach(Person p in list) { if(p.Name == name) { return p; } } return new Person(); } // 在此處添加更多操作并使用 [OperationContract] 標記它們 } 其中的Person是一個數據契約,而WcfJsonService是服務契約,關注一下WcfJsonService中的兩個服務操作,他們的方法內容無從緊要,關鍵是在聲明中的WebInvoke上
第三步: 在Default.aspx中添加ScriptManager,并設定<asp:ScriptReference Path="~/WcfJsonService.svc/js" />,使其能夠訪問WCF服務,然后在頁面中增加如下的頁面元素:
<div> <h2> ajax調用wcf示例2-json</h2> <p> 名字:<input id="txtName" type="text" /> </p> <p> 地址:<input id="txtAddress" type="text" /> </p> <p> <input id="Button1" type="button" value="提交" onclick="createPerson()" /></p> <p> 名字:<input id="txtName2" type="text" /> </p> <p> <input id="Button2" type="button" value="提交" onclick="getPerson()" /></p> </div> 在<head></head>中增加如下的腳本
<script type="text/javascript"> function createPerson() { var name = $get("txtName").value; var address = $get("txtAddress").value; var p = { Name:''+name+'', Address:''+address+'' } WcfJsonService.CreatePerson(p,onSuccess); } function onSuccess(res) { alert(res); } function getPerson() { var name = $get("txtName2").value; WcfJsonService.GetPerson(name,onSuccess2); } function onSuccess2(res) { alert("Name:"+res.Name+",Address:"+res.Address); } </script> 第四步:將Default.aspx設置為項目起始頁,然后F5調試,瀏覽default.aspx,進行測試,現在上面的兩個文本框中輸入信息,點擊提交,出現以下效果,說明運行正常:
此時,察看IDE中的輸出窗口,有如下的輸出:
在網頁中第一個提交按鈕下面的文本框中輸入剛才輸入到名字,點擊提交,出現如下的效果說明能運行正常
整個程序實現起來比較簡單，沒有太多問題，下面對幾個比較重要的地方做一下說明：
WebInvokeAttribute:
對服務操作(OperationContract)添加WebInvoke之后表明該操作可用于Web編程模型。通過指定它的RequestFormat和ResponseFormat屬性可以更改服務請求和響應的編碼格式。如
在上面的示例中，第一個方法是將請求參數的編碼格式設置為了JSON，此時在default.aspx頁面中傳遞的javascript對象p，就能在WCF服務端解析成為服務端數據契約Person的實例
對象。而在第二個方法中，請求的編碼是普通編碼，而響應的編碼通過ResponseFormat=WebMessageFormat.Json被指定為了JSON，服務端返回的數據契約對
象Person對象返回到javascript的時候，javascript也能將其解析為對象，從而加以處理或者顯示。
Ajax與WCF之間的JSON操作遠遠不止這么簡單，其他地方還有很多需要注意的，本文先簡單的做下鋪墊，很看好這種開發模式。特別是它
這種也適合extjs和jquery的編程模型。
程序示例代碼： /Files/jillzhang/AjaxWcfJson.rar
出處：http://jillzhang.cnblogs.com/
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。
浙公網安備 33010602011771號