Jquery Ajax訪問WCF服務和跨域訪問WCF

文章分享一篇關于利用了jquery的ajax 來訪問wcf 伺服器,同時支持GET、POST、PUT、DELETE等常用的訪問方法,後面一個實例介紹了跨域訪問WCF有需要了解的同學可以看看。
代碼如下

using jquery ajax call wcf service get/post/put/delete
http://www.codeproject.com/Articles/254714/Implement-CRUD-operations-using-RESTful-WCF-Servic
Using POST Method
Retrieve a representation of the addressed member of the collection, in the example below, create a new entry in the collection.
Collapse | Copy Code
$.ajax({
type: "POST",
url: "Services/EFService.svc/Members/",
data: "{Email:'test@test.com', ScreenName:'TestUser'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) { // Play with response returned in JSON format },
error: function (msg) {
alert(msg);
}
}); Using PUT Method
Update the entire collection with another collection, in the example below, update the addressed member of the collection.
Collapse | Copy Code
$.ajax({
type: "PUT",
url: "Services/EFService.svc/Members/",
data: "{Email:'test@test.com', ScreenName:'TestUser'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) { // Play with response returned in JSON format },
error: function (msg) {
alert(msg);
}
});Using DELETE Method
Delete the entire collection or a specific collection, in the example below, delete Member with id=1.
Collapse | Copy Code
$.ajax({
type: "DELETE",
url: "Services/EFService.svc/Members(1)",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) { // Play with response returned in JSON format },
error: function (msg) {
alert(msg);
}
});

jQuery ajax跨域調用WCF服務

以下是契約層接口:

代碼如下

namespace Valor.ValorCom.Contracts
{
[ServiceContract(Name = "NAVService", Namespace = "www.valorcomm.com")]
public interface INAVService
{
/// <summary>
/// 添加訂單
/// </summary>
/// <param name="orderId">訂單號</param>
/// <returns></returns>
[WebInvoke(Method = "GET", BodyStyle = WebMessageBodyStyle.WrappedRequest, ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json)]
string AddOrderForNAV(int orderId);
}
}

第一點要注意的:指定服務可以通過GET方式調用,設置請求和回應的格式都是JSON.

以下是服務類:

代碼如下
namespace Valor.ValorCom.Services
{
[AspNetCompatibilityRequirements(
RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
[JavascriptCallbackBehavior(UrlParameterName = "jsoncallback")]
public class NAVService : INAVService
{
public NAVService()
{
}
/// <summary>
/// 添加訂單
/// </summary>
/// <param name="orderId">訂單號</param>
/// <returns></returns>
public string AddOrderForNAV(int orderId)
{
string result = "";
if (Common.TurnNav())
{
//添加訂單相關代碼
}
else
{
result = "未開啓與NAV系統同步訂單的接口";
}
return result;
}
}
}

第二點要注意的,一定要加上[JavascriptCallbackBehavior(UrlParameterName = "jsoncallback")],爲javascript回調使用,UrlParameterName 設置用于跨域腳本訪問的 URL 查詢字符串參數名稱。[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 用于asp.net管道兼容,這樣的話此服務可以通過jquery ajax跨域調用,asp.net程序也可以通過生成此服務的代理來調用. 以下是配置文件信息

代碼如下
<?xml version="1.0"?>
<configuration>
<system.web>
<compilation debug="true"/>
</system.web>
<appSettings>
</appSettings>
<system.serviceModel>
<behaviors>
<endpointBehaviors>
<behavior name="webBehavior">
<!--這裏必須設置-->
<!--<webHttp />-->
<enableWebScript />
</behavior>
</endpointBehaviors>
<serviceBehaviors>
<behavior name="navMetadataBehavior">
<serviceMetadata httpGetEnabled="true" httpGetUrl="http://wcf.9valor.com/NAVService.svc/metadata"/>
</behavior>
</serviceBehaviors>
</behaviors>
<services>
<service behaviorConfiguration="navMetadataBehavior" name="Valor.ValorCom.Services.NAVService">
<endpoint binding="webHttpBinding" address="http://127.0.0.1:90/NAVService/web" behaviorConfiguration="webBehavior" bindingConfiguration="webBinding" contract="Valor.ValorCom.Contracts.INAVService" />
<endpoint address="http://127.0.0.1:90/NAVService" binding="basicHttpBinding" contract="Valor.ValorCom.Contracts.INAVService"></endpoint>
</service>
</services>
<bindings>
<webHttpBinding>
<binding name="webBinding" crossDomainScriptAccessEnabled="true">
</binding>
</webHttpBinding>
</bindings>
<serviceHostingEnvironment multipleSiteBindingsEnabled="true" aspNetCompatibilityEnabled="true">
<baseAddressPrefixFilters>
<add prefix="string"/>
</baseAddressPrefixFilters>
</serviceHostingEnvironment>
</system.serviceModel>
<startup>
<supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.0"/>
</startup>
</configuration>

第三點注意:

代碼如下
<service behaviorConfiguration="navMetadataBehavior" name="Valor.ValorCom.Services.NAVService">
<endpoint binding="webHttpBinding" address="http://www.111cn.net/n96/ NAVService/web" behaviorConfiguration="webBehavior" bindingConfiguration="webBinding" contract="Valor.ValorCom.Contracts.INAVService" />
<endpoint address="http://127.0.0.1:90/NAVService" binding="basicHttpBinding" contract="Valor.ValorCom.Contracts.INAVService"></endpoint>
</service>

這裏配置了兩上終結點,第一個終結點的配置給jquery ajax以web的形式調用該服務,指定該終結點的綁定爲webHttpBinding,我們看下behaviorConfiguration的配置,

behaviorConfiguration="webBehavior",如下圖配置,<enableWebScript /> 配置指定允許web腳本訪問。

代碼如下
<endpointBehaviors>
<behavior name="webBehavior">
<!--這裏必須設置-->
<!--<webHttp />-->
<enableWebScript />
</behavior>
</endpointBehaviors>

接下來我們再看下bindingConfiguration的配置,bindingConfiguration="webBinding",詳細配置如下圖,crossDomainScriptAccessEnabled指定腳本可以跨域訪問.

代碼如下
<webHttpBinding>
<binding name="webBinding" crossDomainScriptAccessEnabled="true">
</binding>
</webHttpBinding>

第二個終結點的配置提供給asp.net通過服務代理的方式調用.

最後就是客戶端調用(注:GET方式在各浏覽器下都正常,POST方式只有在IE下能通過,其它浏覽器因爲安全原因拒絕跨域POST提交)

代碼如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnExcute").click(function () {
var url = $("#txtServiceUrl").val();
url += "&orderId="+$("#txtOrderId").val();
$.ajax({
type: "get",
dataType: "json",
url: url,
success: function (returndata) {
alert(returndata);
}
});
});
});
</script>
</head>
<body>
<h2>
修改單個産品
</h2>
<p>
Wcf Service Url:<input type="text" style="width: 700px;" id="txtServiceUrl" name="txtServiceUrl"
value="http://127.0.0.1:90/AspNavService/web/AddOrderForNAV?jsoncallback=?" />
</p>
<p>
Order Id:<input type="text" id="txtOrderId" name="txtOrderId" value="11665369" />
<br />
<input type="button" id="btnExcute" name="btnExcute" value="修改" />
</p>
</body>
</html>

更多相關文章
  • 一篇朋友很久前寫的asp.net中WebResponse 跨域訪問示例,下面我轉過來與大家一起學習學習,希望文章對大家會有幫助.前兩天,一個朋友讓我幫他寫這樣一個程序:在asp.net裏面訪問asp的頁面,把數據提交
  • 關于跨域問題一直是我們比較糾結的地方,下面我來總結一下關于ajax跨域訪問及JQuery的跨域的原理與解決辦法,希望此方法對各位同學有所幫助.JS的跨域問題,我想很多程序員的腦海裏面還認爲JS是不能跨域的,其實這是一
  • JSONP(JSON with Padding)是JSON的一種"使用模式",可用于解決主流浏覽器的跨域數據訪問的問題.現在我們來用JSONP解決Ajax跨域訪問問題.前幾天,工作上有一新需求,需要前端web頁面異步調用後台的Webservice方法返回信息.實現方法有多種,本例 ...
  • 本文章總結多種關于Iframe跨域訪問不能寫cookie問題的解決辦法,其實我最喜歡的是利用程序來解決,前面的設置站點信任是不可取的哦.假設A嵌套了B解決方法:第一種很簡單:將系統B設置爲可信站點.第二種:IE設置隱
  • 現在浏覽器多但是很多時候標准不一樣兼容性也不好,下面我來介紹解決ff和IE9對icon font字體的跨域訪問不兼容問題,這裏介紹的是apache與nginx的方法.apache解決辦法可以將字體文件放到同域的伺服器上或修改伺服器配置.把如下代碼加到你的伺服器配置文件中去,我用的是apache2,這 ...
  • 這可能是由于試圖以跨域方式訪問服務而又沒有正確的跨域策略,或策略不適用于 SOAP 服務.您可能需要與該服務的所有者聯系,以發布跨域策略文件並確保該文件允許發送 SOAP 相關的 HTTP 標頭.出現此錯誤也可能是由
  • ajax跨域之cors我以前有介紹過,因爲安全限制JavaScript或Cookie只能訪問同域下的內容而不能訪問其它域下的內容了,但我們可以通過像jsonp或CORS來實現了,下面看幾個測試例子.由于安全限制(同源
  • JSON這種輕量級的數據交換格式,易于人閱讀和編寫,同時也易于機器解析和生成(網路傳輸速度快),所以在移動開發中應用特別廣範,以前我們講過PHP JSON數據的創建和解析程序代碼,現在我們來講講AJAX 跨域請求 - JSONP獲取JSON數據.相關文章:PHP JSON數據的創建和解析程序代碼JS ...
一周排行
  • windows上安裝zabbix監控教程
    zabbix是一個基于WEB界面的提供分布式系統監視以及網路監視功能的企業級的開源解決方案
  • tplink路由器WiFi防破解辦法與判斷及防護措施
    現在我們聽到最多的就是蹭網了,蹭網就是利用一些工具對我們的wifi密碼進行破解從而免費上網 ...
  • 在python下列表(list).字典(dict)是兩個非常重要的字符類型了,我們可以用它來做數組一樣的操作,下面來看看(list).(dict)排序實現方法.Python3 中的排序,在 Sorting HOW T ...
  • 空調爲什麽室內機有水珠KFR-23W呢,這個問題我們來給大家介紹一下原因與解決方法吧.現象描述:KFR-23W/SLA爲什麽室內機有水珠原因分析:室內機有水珠可能是室內濕度太大或排水管堵塞的原因解決方法:如果是因爲室
  • 本文我們來講講在CentOS環境下如何安裝配置ss-manyuser,本教程還講了Python如何升級,需要的同學可以參考一下.關于安裝配置ss-manyuser的步驟,我們整理如下.一.安裝所需組件yum inst ...
  • 上傳圖片預覽效果就是在file中加一個onchange事件,當用戶改變input file中的值了我們就會自動把file中的指值獲取並給定義好的div來顯示圖片,原理很簡單下面我來給大家介紹上傳圖片預覽效果與一些兼容
  • 我們一起來看一個封裝個StringBuffer,用array join的方式拼接字符串文章,如果希望算定義字符串連接的朋友可以和小編來看看下文1 (function(window) { var core_ArrPro ...
  • jquery a遍曆節點-parent()方法.parent([selector])方法返回的是每一個匹配的元素的父元素的集合.這裏selector是可選參數,是用于過濾父元素的選擇器表達式.HTML代碼: < ...
  • 在phpmyadmin中密碼設置分爲三種模式,分別爲:cookie授權模式 .config授權模式.http授權模式,下面我來介紹這三種模式的配置方法.phpmyadmin大家可以官方下載,然後再在目錄中修改conf
  • CentOS6.3安裝配置Oracle11g R2數據庫教程
    裝配置Oracle11g R2數據庫的方法是比較簡單的,在這裏小編來爲各位介紹安裝配置Or