实现jquery.ajax及原生的XMLHttpRequest跨域调用WCF服务的方法

简介:

关于ajax跨域调用WCF服务的方法很多,经过我反复的代码测试,认为如下方法是最为简便的,当然也不能说别人的方法是错误的,下面就来上代码,WCF服务定义还是延用上次的,如:

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
namespace  WcfService1
{
     [ServiceContract]
     public  interface  IAddService
     {
 
         [OperationContract]
         [WebInvoke(Method= "GET" ,RequestFormat=WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json,BodyStyle=WebMessageBodyStyle.WrappedRequest)]
         int  Add2( int  a, int  b);
     }
}
 
 
namespace  WcfService1
{
     [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
     //[JavascriptCallbackBehavior(UrlParameterName="jsoncallback")] //不指定的时采用默认的callback回调参数
     public  class  AddService : IAddService
     {
         public  int  Add2( int  a,  int  b)
         {
             return  a + b;
         }
 
     }
}

创建一个WCF服务文件,文件内容:

1
<%@ ServiceHost Language="C#" Debug="true" Service="WcfService1.AddService" %>

上面实现的是支持GET方法请求调用,下面就是配置WEB.CONFIG,使其支持跨域调用,注意我将standardEndpoints注释掉了,当然如果不注释也不会有什么影响,关键是bindings节点中的属性:crossDomainScriptAccessEnabled="true",如下:

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
< system.serviceModel >
   <!--<standardEndpoints>
     <webHttpEndpoint>
       <standardEndpoint crossDomainScriptAccessEnabled="true" />
     </webHttpEndpoint>
   </standardEndpoints>-->
   < serviceHostingEnvironment  multipleSiteBindingsEnabled="true" />
   < bindings >
     < webHttpBinding >
       < binding  crossDomainScriptAccessEnabled="true">
       </ binding >
     </ webHttpBinding >
   </ bindings >
   < behaviors >
     < serviceBehaviors >
       < behavior >
         <!-- 为避免泄漏元数据信息,请在部署前将以下值设置为 false 并删除上面的元数据终结点 -->
         < serviceMetadata  httpGetEnabled="true"/>
         <!-- 要接收故障异常详细信息以进行调试,请将以下值设置为 true。在部署前设置为 false 以避免泄漏异常信息 -->
         < serviceDebug  includeExceptionDetailInFaults="true"/>
       </ behavior >
     </ serviceBehaviors >
     < endpointBehaviors >
       < behavior  name="AddServiceBehavior">
         < enableWebScript  />
       </ behavior >
     </ endpointBehaviors >
   </ behaviors >
   < services >
     < service  name="WcfService1.AddService">
       < endpoint  address=""  binding="webHttpBinding" contract="WcfService1.IAddService" behaviorConfiguration="AddServiceBehavior" ></ endpoint >
     </ service >
   </ services >
</ system.serviceModel >

创建Global.asax文件并添加如下的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
protected  void  Application_BeginRequest( object  sender, EventArgs e)
{
     HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
     HttpContext.Current.Response.Cache.SetNoStore();
 
     EnableCrossDmainAjaxCall();
}
 
private  void  EnableCrossDmainAjaxCall()
{
     HttpContext.Current.Response.AddHeader( "Access-Control-Allow-Origin" , "*" );
 
     if  (HttpContext.Current.Request.HttpMethod ==  "OPTIONS" )
     {
         HttpContext.Current.Response.AddHeader( "Access-Control-Allow-Methods" ,
                       "GET, POST" );
         HttpContext.Current.Response.AddHeader( "Access-Control-Allow-Headers" ,
                       "Content-Type, Accept" );
         HttpContext.Current.Response.AddHeader( "Access-Control-Max-Age" ,
                       "1728000" );
         HttpContext.Current.Response.End();
     }
}

下面是实现WEB端跨域调用WCF服务代码

1.采用原生的XMLHttpRequest跨域调用WCF服务:

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
//简单封装
         var  $ =  function  (id) {
             return  document.getElementById(id);
         };
 
         function  getXMLHTTPRequest() {
             var  req =  false ;
             try  {
                 req =  new  XMLHttpRequest();
             catch  (err) {
                 try  {
                     req =  new  ActiveXObject( "Msxml2.XMLHTTP" );
                 catch  (err) {
                     try  {
                         req =  new  ActiveXObject( "Microsoft.XMLHTTP" );
                     catch  (err) {
                         req =  false ;
                     }
                 }
             }
             return  req;
         }
 
//以下为按钮的点击事件,我采用的同步调用,当然也可以采用回调方式,回调方式的话就需要在请求的URL中加入:callback=回调方法,然后再定义一个回调方法即可
         $( "btnGet" ).onclick =  function  () {
             var  querystr =  "a="  + $( "num1" ).value +  "&b="  + $( "num2" ).value;
             var  xmlhttp = getXMLHTTPRequest();
             xmlhttp.open( "GET" "http://localhost:30348/addservice.svc/Add2?"  + querystr,  false );
             xmlhttp.send();
             var  r = eval( "("  + xmlhttp.responseText +  ")" );
             $( "result" ).value = r.d;
         }

 

 

2.通过动态以JS方式请求WCF地址资源实现原始的跨域方法,虽然可以实现跨域调用,但只支持GET方式,如果需要支持POST这个方案就无解:

1
2
3
4
5
6
7
8
9
10
11
12
13
$( "btnGet" ).onclick =  function  () {
     var  querystr =  "a="  + $( "num1" ).value +  "&b="  + $( "num2" ).value;
     var  script =document.getElementById( "crossDomainScript_wcf" ) || document.createElement( "script" );
     script.type =  "text/javascript" ;
     script.id =  "crossDomainScript_wcf" ;
     script.src =  "http://localhost:30348/addservice.svc/Add2?callback=success_callback&"  + querystr;
     document.getElementsByTagName( "head" )[0].appendChild(script);
}
 
//回调方法
function  success_callback(data) {
     $( "result" ).value = data;
}

以下是POST调用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$( "btnGet" ).onclick =  function  () {
     var  xmlhttp = getXMLHTTPRequest();
     xmlhttp.open( "POST" "http://localhost:30348/addservice.svc/Add2" true );
     xmlhttp.setRequestHeader( "Content-Type" "application/json" );
     xmlhttp.onreadystatechange =  function  () {
         alert(xmlhttp.status);
         if  (xmlhttp.readyState == 4) {
             if  (xmlhttp.status == 200) {
                 var  r = eval( "("  + xmlhttp.responseText +  ")" );
                 $( "result" ).value = r.d;
             }
         }
     };
     xmlhttp.send( '{"a":'  + $( "num1" ).value +  ',"b":'  + $( "num2" ).value +  '}' );
}

2.采用jQuery.ajax来调用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var  jq = jQuery.noConflict();
jq( "#btnGet" ).click( function  () {
     jq.ajax( "http://localhost:30348/AddService.svc/Add2" , {
         type:  "get" ,
         dataType:  "jsonp" ,
         data:  'a='  + jq( "#num1" ).val() +  '&b='  + jq( "#num2" ).val(),
         success:  function  (data) {
             jq( "#result" ).val(data);
         },
         error:  function  (x, textStatus, errorThrown) {
             alert( "error:"  + textStatus);
         }
     });
});

其实可按正常方式直接调用,无需采用JSONP,因为WCF服务端已支持跨域调用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var  jq = jQuery.noConflict();
jq( "#btnGet11" ).click( function  () {
     jq.ajax( "http://localhost:30348/AddService.svc/Add2" , {
         type:  "GET" ,
         dataType:  "json" ,
         data:  'a='  + jq( "#num1" ).val() +  '&b='  + jq( "#num2" ).val(),
         success:  function  (data) {
             jq( "#result" ).val(data.d);
         },
         error:  function  (x, textStatus, errorThrown) {
             alert( "error:"  + textStatus);
         }
     });
});

  

当然传参时也可以用JSON的写法(注意POST与GET的JSON写法有所不同,POST时键值必需是严格的JSON字符串,GET时是一个JS对象),再此就不作说明

POST调用:(注意上述JQUERY.AJAX 采用JSONP+GET模式不适用于POST模式,因为经调试,发现采用JSONP模式,终始发起的是GET请求,采用的原理是上面我写的原始跨域调用方法)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var  jq = jQuery.noConflict();
jq( "#btnGet" ).click( function  () {
     jq.ajax( "http://localhost:30348/AddService.svc/Add2" , {
         type:  "POST" ,
         dataType:  "json" ,
         contentType:  "application/json" ,
         data:  '{"a":'  + jq( "#num1" ).val() +  ',"b":'  + jq( "#num2" ).val() +  '}' ,
         success:  function  (data) {
             jq( "#result" ).val(data.d);
         },
         error:  function  (x, textStatus, errorThrown) {
             alert( "error:"  + textStatus);
         }
     });
});

这里针对跨域再特别说明一下,若采用AJAX跨域调用时,会发送两次请求,第一次为OPTIONS,用于服务器进行预检,第二次才会发出真正的请求,这也就是为什么WCF服务的Global.asax需要添加EnableCrossDmainAjaxCall的原因。本人在研究跨域调用WCF时,走了很多弯路,也尝试过很多方法,但最终还是弄明白了,希望大家能从这篇博文中受益,文中不足之处,敬请指出,谢谢!

本文转自 梦在旅途 博客园博客,原文链接:http://www.cnblogs.com/zuowj/p/4820117.html  ,如需转载请自行联系原作者

相关文章
|
6天前
|
JavaScript CDN
jQuery方法小记
jQuery方法小记
21 0
|
6天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
22 0
|
6天前
|
JavaScript Serverless
jquery attr()方法
jquery attr()方法
16 0
|
3天前
|
JavaScript 索引
|
4天前
|
JSON 前端开发 JavaScript
jQuery ajax读取本地json文件 三级联动下拉框
jQuery ajax读取本地json文件 三级联动下拉框
|
6天前
|
JavaScript
jquery获取子元素的一些方法
jquery获取子元素的一些方法
9 0
|
6天前
|
JavaScript 前端开发 API
jquery的一些方法
jquery的一些方法
7 1
|
6天前
|
前端开发 JavaScript PHP
【PHP开发专栏】jQuery与PHP实现Ajax通信
【4月更文挑战第30天】本文介绍了使用jQuery和PHP实现Ajax通信的步骤。首先,讲解了Ajax的基础和jQuery简化Ajax操作的概念。接着,展示了如何使用jQuery的`$.get()`、`$.post()`和`$.ajax()`方法发送GET和POST请求,以及如何控制请求细节。在PHP端,讨论了接收和响应Ajax请求的方法,包括处理数据、设置响应类型和错误处理。结合jQuery与PHP,开发者能实现高效、无缝的异步数据传输,提升Web应用的用户体验。
|
6天前
|
JavaScript
jquery获取子元素的一些方法
jquery获取子元素的一些方法
|
6天前
|
JavaScript
jQuery遍历节点的方法
jQuery遍历节点的方法
10 0