DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery調用RESTful WCF示例代碼(GET方法/POST方法)
jQuery調用RESTful WCF示例代碼(GET方法/POST方法)
編輯:JQuery特效代碼     

不廢話了,直奔主題吧

wcf端:

近幾年比較流行restful,為了能讓ajax調用,同時也為了支持restful風格的uri,在創建一個Ajax-enabled Wcf Service後,必須手動修改svc文件,指定Factory,即:

<%@ ServiceHost Language="C#" Debug="true" Service="ajaxSample.HelloWorld" CodeBehind="HelloWorld.svc.cs" Factory="System.ServiceModel.Activation.WebServiceHostFactory" %>

注:如果不添加Factory,則wcf將無法用類似http://localhost/helloWorld.svc/Hello/person/name 的restful方式直接訪問。

同時還要去掉web.config中的<enableWebScript />即類似:

<system.serviceModel>
    <behaviors>
      <endpointBehaviors>
        <behavior name="ajaxSample.HelloWorldAspNetAjaxBehavior">
          <!--<enableWebScript />-->
        </behavior>
      </endpointBehaviors>
    </behaviors>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true"
      multipleSiteBindingsEnabled="true" />
    <services>
      <service name="ajaxSample.HelloWorld">
        <endpoint address="" behaviorConfiguration="ajaxSample.HelloWorldAspNetAjaxBehavior"
          binding="webHttpBinding" contract="ajaxSample.HelloWorld" />
      </service>
    </services>
  </system.serviceModel>

好了,開始寫代碼,鑒於wcf調用時有GET/POST二種方式,下面把幾種常用的情況都寫一個示例方法:
. 代碼如下:
using System.Collections.Generic;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;

namespace ajaxSample
{
    [ServiceContract(Namespace = "http://yjmyzz.cnblogs.com/")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class HelloWorld
    {

        /// <summary>
        /// 只能Post的Restful方法
        /// </summary>
        /// <param name="person"></param>
        /// <param name="welcome"></param>
        /// <returns></returns>
        [OperationContract]
        [WebInvoke(Method = "POST", UriTemplate = "PostRestfulTest/{person}/{welcome}", ResponseFormat = WebMessageFormat.Json)]
        public List<string> PostRestfulTest(string person,string welcome)
        {
            List<string> result = new List<string>();

            result.Add("PostRestfulTest -> from server:");
            result.Add(person);
            result.Add(welcome);
            return result;
        }

        /// <summary>
        /// 只能Get的Restful方法
        /// </summary>
        /// <param name="person"></param>
        /// <param name="welcome"></param>
        /// <returns></returns>
        [OperationContract]
        [WebInvoke(Method = "GET", UriTemplate = "GETRestfulTest/{person}/{welcome}", ResponseFormat = WebMessageFormat.Json)]
        public List<string> GETRestfulTest(string person, string welcome)
        {
            List<string> result = new List<string>();

            result.Add("GETRestfulTest -> from server:");
            result.Add(person);
            result.Add(welcome);
            return result;
        }

        /// <summary>
        /// 即可Get與Post的Restful方法
        /// </summary>
        /// <param name="person"></param>
        /// <param name="welcome"></param>
        /// <returns></returns>
        [OperationContract]
        [WebInvoke(Method = "*", UriTemplate = "RestfulTest/{person}/{welcome}", ResponseFormat = WebMessageFormat.Json)]
        public List<string> RestfulTest(string person, string welcome)
        {
            List<string> result = new List<string>();

            result.Add("RestfulTest -> from server:");
            result.Add(person);
            result.Add(welcome);
            return result;
        }

 
        /// <summary>
        /// 只能Post的常規方法(注:Post方式,BodyStyle必須設置成WrappedRequest或Wrapped)
        /// </summary>
        /// <param name="person"></param>
        /// <param name="welcome"></param>
        /// <returns></returns>
        [OperationContract]
        [WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json, BodyStyle=WebMessageBodyStyle.WrappedRequest)]
        public List<string> PostTest(string person, string welcome)
        {
            List<string> result = new List<string>();

            result.Add("PostRestfulTest -> from server:");
            result.Add(person);
            result.Add(welcome);
            return result;
        }

        /// <summary>
        /// 只能Get的常規方法
        /// </summary>
        /// <param name="person"></param>
        /// <param name="welcome"></param>
        /// <returns></returns>
        [OperationContract]
        [WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json)]
        public List<string> GETTest(string person, string welcome)
        {
            List<string> result = new List<string>();

            result.Add("GETTest -> from server:");
            result.Add(person);
            result.Add(welcome);
            return result;
        }

         

         
    }
}

jQuery調用代碼:
. 代碼如下:
<script type="text/javascript">
    $().ready(function () {

 
        $.post("HelloWorld.svc/PostRestfulTest/111/222", function (data) {
            alert("PostRestfulTest調用成功,返回值為:" + data);
        })

        $.get("HelloWorld.svc/GETRestfulTest/333/444", function (data) {
            alert("GETRestfulTest調用成功,返回值為:" + data);
        })

        $.get("HelloWorld.svc/RestfulTest/555/666", function (data) {
            alert("RestfulTest GET方式調用成功,返回值為:" + data);
        })

 
        $.post("HelloWorld.svc/RestfulTest/777/888", function (data) {
            alert("RestfulTest POST方式調用成功,返回值為:" + data);
        })

 
        $.get("HelloWorld.svc/GETTest", { person: "aaa", welcome: "bbb" }, function (data) {
            alert("GETTest 調用成功,返回值為:" + data);
        });

 
        $.ajax({
            url: "HelloWorld.svc/PostTest",
            type: "POST",
            contentType: "application/json",
            data: '{"person":"ccc","welcome":"ddd"}',
            dataType: "html",
            success: function (data) { alert("PostTest調用成功,返回值為:" + data); }
        });
    })
</script>

有時候,WCF暴露的方法中可能需要一些敏感信息做為參數(比如用戶名/用戶ID之類),這時如果直接用js來調用wcf,可能會把這部分信息洩漏在客戶端,這種場景下,我們也經常用一個服務端的ashx來做中轉

TestService.svc
. 代碼如下:
using System.ServiceModel;

namespace ashx_jQuery
{
     [ServiceContract]
    public class TestService 
    {
         /// <summary>
         /// 獲取當前用戶指定月份的工資
         /// </summary>
         /// <param name="userId"></param>
         /// <param name="month"></param>
         /// <returns></returns>
         [OperationContract]
        public double GetSalary(int userId,int month)
        {
            if (month == 1)//只是演示而已
            {
                return 5000;
            }
            else
            {
                return 1000;
            }
        }
    }
}

AjaxProcess.ashx
. 代碼如下:
using System.Web;

namespace ashx_jQuery
{
    /// <summary>
    /// Summary description for AjaxProcess
    /// </summary>
    public class AjaxProcess : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string month = context.Request["month"];

            TestService wcf = new TestService();
            double salary = wcf.GetSalary(GetUserId(), int.Parse(month));
            context.Response.Write("{salary:" + salary + "}");
        }

 
        /// <summary>
        /// 獲取當前的用戶ID
        /// </summary>
        /// <returns></returns>
        private int GetUserId() 
        {
            return 1;
        }

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

jQuery調用:
. 代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="ashx_jQuery._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>jQuery ashx Sample</title>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $().ready(function () {
            $("#btnTest").click(function () {
                $.post(
                    "AjaxProcess.ashx",
                    { month:1 },
                    function (e) {
                        var d = eval("(" + e + ")");
                        alert(d.salary);
                    }, "html");
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input type="button" value="GetSalary" id="btnTest"/>
    </form>
</body>
</html>

示例代碼:點擊下載 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved