Introduction to how jQuery implements ajax to call WCF services

This article mainly introduces jQuery's method of implementing ajax to call WCF services. It analyzes the related techniques of jQuery's ajax front-end calling and background interactive calling of WCF services in the form of a complete example. It also comes with a complete example for readers to download. Friends who need it You can refer to the following

The example of this article describes how jQuery implements ajax to call WCF services. I share it with you for your reference. The details are as follows:

Regarding AJAX calling WCF services, there are two methods: cross-domain and non-cross-domain. Today we will first introduce the non-cross-domain calling method. DEMO was written in VS2008.

After testing and research, it was found that AJAX must meet the following conditions when calling WCF services

1. The communication method of wcf must use webHttpBinding
2. Must be set< ;endpointBehaviors>The value of the node
3. The implementation of the service must add the mark

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

4. The following mark must be added in front of the method

[WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)]

5. The parameter name passed in the ajax method must be the same as The parameter and method names provided in the wcf service are consistent

The following is the code written by me, the colors marked are the places that need attention

Server-side configuration file code

<system.serviceModel> 
  <services> 
   <service name="WcfServiceDemoOne.Service1" behaviorConfiguration="WcfServiceDemoOne.Service1Behavior"> 
    <!-- Service Endpoints --> 
  <endpoint address="" binding="webHttpBinding" contract="WcfServiceDemoOne.IService1" behaviorConfiguration="HttpBehavior"></endpoint> 
    <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/> 
    <host> 
     <baseAddresses> 
      <add baseAddress="http://localhost:12079/Service1.svc"/> 
     </baseAddresses> 
    </host> 
   </service> 
  </services> 
  <behaviors> 
   <serviceBehaviors> 
    <behavior name="WcfServiceDemoOne.Service1Behavior"> 
     <!-- 为避免泄漏元数据信息，请在部署前将以下值设置为 false 并删除上面的元数据终结点--> 
     <serviceMetadata httpGetEnabled="true"/> 
     <!-- 要接收故障异常详细信息以进行调试，请将以下值设置为 true。在部署前设置为 false 以避免泄漏异常信息--> 
     <serviceDebug includeExceptionDetailInFaults="false"/> 
    </behavior> 
   </serviceBehaviors> 
  <endpointBehaviors> 
  <behavior name="HttpBehavior"> 
   <webHttp/> 
  </behavior> 
  </endpointBehaviors> 
  </behaviors> 
</system.serviceModel>

Server-side code

[ServiceContract] 
 public interface IService1 
 { 
  [OperationContract] 
  string GetData(int value); 
  [OperationContract] 
  City GetDataUsingDataContract(City composite); 
   [OperationContract] 
  List<City> GetList(); 
   [OperationContract] 
  List<City> GetListData(List<City> list); 
 } 
 // 使用下面示例中说明的数据约定将复合类型添加到服务操作。 
 [DataContract] 
 public class City 
 { 
  int seq = 0; 
  string cityID; 
  string ctiyName; 
   [DataMember] 
  public string CityID 
  { 
   get 
   { 
    return cityID; 
   } 
   set 
   { 
    cityID=value; 
   } 
  } 
  [DataMember] 
  public string CityName 
  { 
   get { return ctiyName; } 
   set { ctiyName = value; } 
  } 
  [DataMember] 
  public int Seq 
  { 
   get 
   { return seq; } 
   set 
   { seq = value; } 
  } 
}

Implementation code

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 
 public class Service1 : IService1 
 { 
  [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.WrappedRequest, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)] 
  public string GetData(int value) 
  { 
   return string.Format("You entered: {0}", value); 
  } 
  #region IService1 成员 
  [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)] 
  public City GetDataUsingDataContract(City composite) 
  { 
   City c = new City(); 
   c.CityID = composite.CityID; 
   c.CityName = composite.CityName; 
   c.Seq = composite.Seq; 
   return c; 
  } 
  [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)] 
  public List GetList() 
  { 
   List list = new List(); 
   City cc = new City(); 
   cc.CityID = "1"; 
   cc.CityName="北京"; 
   cc.Seq = 3; 
   list.Add(cc); 
   City cc1 = new City(); 
   cc1.CityID = "2"; 
   cc1.CityName = "上海"; 
   cc1.Seq = 4; 
   list.Add(cc1); 
   return list; 
  } 
  [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)] 
  public List GetListData(List list) 
  { 
   return list; 
  } 
  #endregion 
}

Client calling code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WcfServiceDemoOne.WebForm1" %> 
<!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></title> 
 <script src="jquery-1.7.1.min.js" type="text/javascript"></script> 
 <script type="text/javascript"> 
 //参数为整数的方法 
  function fn1() 
  { 
   $.ajax({ 
   url: "http://localhost:12079/Service1.svc/GetData", 
    type: "POST", 
    contentType: "text/json", 
    data: &#39;{"value":2}&#39;, 
    dataType: "json", 
    success: function(returnValue) { 
     alert(returnValue); 
    }, 
    error: function() { 
     alert(&#39;error&#39;); 
    } 
   }); 
  } 
//参数为实体类的方法 
  function fn2() { 
   $.ajax({ 
   url: "http://localhost:12079/Service1.svc/GetDataUsingDataContract", 
    type: "POST", 
    contentType: "application/json", 
    data: &#39;{"CityID":1,"CityName":"北京","Seq":"3"}&#39;, 
    dataType: "json", 
    success: function(returnValue) { 
    alert(returnValue.CityID + &#39; &#39; + returnValue.CityName + "--" + returnValue.Seq); 
    }, 
    error: function() { 
     alert(&#39;error&#39;); 
    } 
   }); 
  } 
//返回值为类集合的方法 
  function fn3() { 
   $.ajax({ 
    url: "http://localhost:12079/Service1.svc/GetList", 
    type: "POST", 
    contentType: "application/json", 
    dataType: "json", 
    success: function(returnValue) { 
    for (var i = 0; i < returnValue.length; i++) { 
     alert(returnValue[i].CityID + &#39; &#39; + returnValue[i].CityName+&#39;---&#39;+returnValue[i].Seq); 
     } 
    }, 
    error: function() { 
     alert(&#39;error&#39;); 
    } 
   }); 
  } 
  function fn4() { 
   $.ajax({ 
   url: "http://localhost:12079/Service1.svc/GetListData", 
    type: "POST", 
    contentType: "application/json", 
    data: &#39;[{"CityID":1,"CityName":"北京","Seq":"3"},{"CityID":3,"CityName":"上海","Seq":"3"}]&#39;, 
    dataType: "json", 
    success: function(returnValue) { 
    for (var i = 0; i < returnValue.length; i++) { 
     alert(returnValue[i].CityID + &#39; &#39; + returnValue[i].CityName + &#39;---&#39; + returnValue[i].Seq); 
    } 
    }, 
    error: function() { 
     alert(&#39;error&#39;); 
    } 
   }); 
  } 
 </script> 
</head> 
<body> 
 <form id="form1" runat="server"> 
 <p> 
  <input id="Button1" type="button" value="调用1" onclick="fn1();" /></p> 
  <input id="Button2" type="button" value="调用2" onclick="fn2();" /> 
  <br /> 
 <input id="Button3" type="button" value="调用3" onclick="fn3();" /></form> 
 <br /> 
 <input id="Button4" type="button" value="调用4" onclick="fn4();"/> 
</body> 
</html>

The above is the entire content of this article. I hope it will be helpful to everyone’s learning. For more related content, please pay attention to PHP Chinese net!

Related recommendations:

Implementation of jQuery multi-level accordion menu

jquery$.ajax() method

The above is the detailed content of Introduction to how jQuery implements ajax to call WCF services. For more information, please follow other related articles on the PHP Chinese website!