[Jquery] How can jsonp be used in WCF 4 to easily implement cross-origin Ajax requests?

WCF 4 (Based on. NET Framework 4.0) is a cross-origin access to WCF services. Next we will explain how to implement it step by step, and explain some problems and solutions encountered in the implementation process.

1. Open Visual Studio 2010, add a web application or WCF Service application, and add an Ajax-enabled WCF Service to the project.

2. Modify the SVC file as follows:

 

Jsonp. SVC

  [Servicecontract (namespace  =     ""  )]
[Aspnetcompatibilityrequirements (requirementsmode  = Aspnetcompatibilityrequirementsmode. Allowed)]
  //  Urlparametername is the jsonp callback name in the request URL.  
  [Javascriptcallbackbehavior (urlparametername  =     "  Jsoncallback  "  )]
  Public     Class Jsonp
{
[Operationcontract]
[Webget (responseformat  =  Webmessageformat. JSON)]
  Public     String  Jsonphelloworld ()
{
  Return     "  Hello World  "  ;
}

} 

Note the following points:

• The urlparametername parameter is set to the callback name in the URL when jquery cross-origin access is performed.
• Add webget or webpost attribute to the method to be called. If this parameter is not added, an error occurs during the next call.

3. Open the Web. config file and make the following changes:

 

Web. config

  <  Configuration  >  
  <  System. Web  >  
  < Compilation  Debug  = "True"  Targetframework  = "4.0"     />  
  <  Authentication  Mode  = "Forms"     />  
  </  System. Web >  

  <  System. servicemodel  >  
  <  Behaviors  >  

  <  Endpointbehaviors  >  
  <  Behavior  Name = "Debugsite. jsonpaspnetajaxbehavior"  >  
  <  Enablewebscript  />  
  </  Behavior  >  
  </  Endpointbehaviors  >  

  < Servicebehaviors  >  
  <  Behavior  Name  = "Enablemetadatabehaviors"  >  
  <  Servicemetadata  Httpgetenabled  = "True"     />  
  < Servicedebug  Includeexceptiondetailinfaults  = "True"     />  
  </  Behavior  >  
  </  Servicebehaviors  >  
  </  Behaviors  > 


  <  Bindings  >  
  <  Webhttpbinding  >  
  <! --  Crossdomainscriptaccessential abled make the WCF 4 service support the jsonp  -->  
  <  Binding  Name = "Httpjsonpbinding"  Crossdomainscriptaccessential abled  = "True"  > </  Binding  >  
  </  Webhttpbinding  >  
  </  Bindings  >  

  < Servicehostingenvironment  Aspnetcompatibilityenabled  = "True"  Multiplesitebindingsenabled  = "True"     />  

  <  Services  >  
  <  Service  Name  = "Debugsite. jsonp" Behaviorconfiguration  = "Enablemetadatabehaviors"  >  
  <  Endpoint  Address  = ""  Behaviorconfiguration  = "Debugsite. jsonpaspnetajaxbehavior"  Binding  = "Webhttpbinding"  Bindingconfiguration  = "Httpjsonpbinding"  Contract = "Debugsite. jsonp"     />  
  </  Service  >  
  </  Services  >  
  </  System. servicemodel  >  
  </ Configuration  > 

Note the following points:

• In the bindings/webhttpbinding configuration block, crossdomainscriptaccessenabled is the direct support for jsop in wcf4. Set it to true here.
• The includeexceptiondetailinfaults in the servicedebug configuration block is only used to return detailed error information to the client.
• Let's take a look at the details of other WCF configurations.

4. Then, we need to deploy the project to IIS. After deployment, the server is complete. I will not describe the deployment method here. Pay attention to the following points:

• After adding the site, do not forget to assign the IIS process account yourcomputername \ iis_iusrs (iis7 +) or yourcomputername \ iis_wpg (IIS6) read permission to the deployed folder. If the write operation is involved, write permission is required.
• For iis7, anonymous access and forms authentication are allowed in the authentication method, and others are disable.
• If it is deployed on a non-port 80 and remote access fails, enable port support on the firewall.

5. Next, the client is very simple. Download a jquery library or use Google or Microsoft Ajax CDN directly. I use CDN here. Add an HTML page,CodeAs follows.

 

Jsonp_test.html

  <!  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 >  
  <  Title  >  Jsonp_test  </  Title  >  
  <  Script  Type  = "Text/JavaScript"  SRC  = "Http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js" > </  Script  >  
  <  Script  Type  = "Text/JavaScript"  >  
Function getserverhelloworldbyjsop (){
$. Getjson ("http: // jerrywengpc/jsonp. svc/jsonphelloworld? Jsoncallback =? ",
Function (data ){
Alert (data );
});
}
  </  Script  > 
  </  Head  >  
  <  Body  >  
  <  Input  Type  = "Button"  Onclick  = "Getserverhelloworldbyjsop ()"  Value  = "Gettime"    />  
  </  Body  >  
  </  Html  >  
 

$. The first parameter of getjson is the request URL. jsoncallback is the URL parameter We Just configured on the WCF Service Contract. If it is post data, you can enter post data in the second parameter after the URL, for example, {name: "John", time: "2"}. The third parameter is the callback function. This method is similar to rewriting. Therefore, if there is no second parameter, null is not required.

 

Attached test project file:

Download Project

 

 

PS:

in earlier versions, you must use javascriptserializer to serialize data and return the data.