title: jQuery $.ajax call to WCF service returns 400 Bad Request
body: <p>(Update at end)</p>
  
  <p>I'm working on an idea using unfamiliar technology.  I've written a few WCF services, but I've never done any advanced configuration.  This is my first dive into jQuery.  The premise is I create a WCF service to get branch information, to be retrieved by jQuery.</p>
  
  <p>My first search yielded this page: <a href="http://www.codeproject.com/KB/aspnet/WCF_JQUERY_ASMX.aspx#2" rel="nofollow noreferrer">http://www.codeproject.com/KB/aspnet/WCF_JQUERY_ASMX.aspx#2</a> which I'm using as the base of my code.  I initially started off as a cross-site setup, which I got rid of to see if I could just get the thing working.  I've searched stack overflow and none of the posts resolve my 400 Bad Request issue.</p>
  
  <p>Code from my web.config:</p>
  
  <pre><code>&lt;system.serviceModel&gt;
  &lt;behaviors&gt;
    &lt;serviceBehaviors&gt;
      &lt;behavior name="GeoDataBehavior"&gt;
        &lt;serviceMetadata httpGetEnabled="true" /&gt;
        &lt;serviceDebug includeExceptionDetailInFaults="true" /&gt;
      &lt;/behavior&gt;
      &lt;behavior name=""&gt;
        &lt;serviceMetadata httpGetEnabled="true" /&gt;
      &lt;/behavior&gt;
    &lt;/serviceBehaviors&gt;
    &lt;endpointBehaviors&gt;
      &lt;behavior name="GDEPBehavior"&gt;
        &lt;webHttp /&gt;
      &lt;/behavior&gt;
    &lt;/endpointBehaviors&gt;
  &lt;/behaviors&gt;
  &lt;bindings&gt;
    &lt;webHttpBinding&gt;
      &lt;binding name="GDBinding" crossDomainScriptAccessEnabled="true"/&gt;
    &lt;/webHttpBinding&gt;
  &lt;/bindings&gt;
  &lt;services&gt;
    &lt;service behaviorConfiguration="GeoDataBehavior" name="GeoDataService"&gt;
      &lt;endpoint address="" 
                binding="webHttpBinding" contract="IGeoDataService"
                 behaviorConfiguration="GDEPBehavior"/&gt;
      &lt;endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/&gt;
    &lt;/service&gt;
  &lt;/services&gt;
  </code></pre>
  
  <p></p>
  
  <p>Code from my interface:</p>
  
  <pre><code>[ServiceContract]
  public interface IGeoDataService
  {
      [OperationContract]
      [WebInvoke(Method = "POST",
          BodyStyle = WebMessageBodyStyle.Wrapped,
          ResponseFormat = WebMessageFormat.Json)]
      List&lt;BranchData&gt; GetBranches();
  }
  
  
  // Use a data contract as illustrated in the sample below to add composite types to service operations.
  [DataContract]
  public class BranchData
  {
      [DataMember]
      public string BranchNumber { get; set; }
  
      [DataMember]
      public string BranchName { get; set; }
  
      [DataMember]
      public string StreetAddress { get; set; }
  
      [DataMember]
      public string City { get; set; }
  
      [DataMember]
      public string Zip { get; set; }
  
      [DataMember]
      public string State { get; set; }
  
      [DataMember]
      public string Phone { get; set; }
  
      [DataMember]
      public string County { get; set; }
  }
  </code></pre>
  
  <p>jQuery script:</p>
  
  <pre><code> &lt;script type="text/javascript" language="javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.1.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" language="javascript"&gt;
      /* help from http://www.codeproject.com/KB/aspnet/WCF_JQUERY_ASMX.aspx
      */
      var varType;
      var varUrl;
      var varData;
      var varContentType;
      var varDataType;
      var varProcessData;
  
      function CallService() {
          // Thank you Bing: http://blueonionsoftware.com/blog.aspx?p=03aff202-4198-4606-b9d6-686fd13697ee
          jQuery.support.cors = true;
  
  
          $.ajax({
              type: varType,
              url: varUrl,
              data: null,
              crossDomain: true,
              contentType: varContentType,
              dataType: varDataType,
              processdata: varProcessData,
              success: function (msg) {
                  ServiceSucceeded(msg);
              },
              error: ServiceFailed
          });
  
          /*
          $.getJSON(varUrl, null, function (msg) {
              ServiceSucceeded(msg);
          });
          */
      }
  
      function GetBranchDataJson() {
          varType = "POST";
          varUrl = "GeoDataService.svc/GetBranches";
          varData = "";
          varContentType = "application/json; charset=utf-8";
          varDataType = "json";
          varProcessData = true;
          CallService();
      }
  
      function ServiceSucceeded(result) {
          var ddlResult = document.getElementById("ddlResult");
          for (var j = ddlResult.options.length - 1; j &gt;= 0; j--) { ddlResult.remove(j); }
  
          for (var i = 0; i &lt; result.length; i++) {
              var opt = document.createElement("option");
              opt.text = result[i].BranchName;
              ddlResult.options.add(opt);
          }
      }
  
      function ServiceFailed(jqXHR, errorType, errorThrown) {
          alert('error!\n' + jqXHR + '\n' + errorType + '\n' + errorThrown);
      }
  
  &lt;/script&gt;
  &lt;input name="WTF" type="button" onclick="GetBranchDataJson()" /&gt;
  </code></pre>
  
  <p>You'll note I'm using jQuery 1.6.1, not 1.3 from the tutorial.  The tutorial runs fine on my box and does everything as expected.  Unfortunately, my code does not.  I appreciate any help y'all can provide.</p>
  
  <p>Oh, and here's a copy of the request from Fiddler:</p>
  
  <pre><code>POST http://localhost:16062/GeoDataService.svc/GetBranches HTTP/1.1
  Accept: application/json, text/javascript, */*; q=0.01
  Content-Type: application/json; charset=utf-8
  Referer: http://localhost:16062/Default.aspx
  Accept-Language: en-us
  Accept-Encoding: gzip, deflate
  User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
  Host: localhost:16062
  Content-Length: 0
  Connection: Keep-Alive
  Pragma: no-cache
  </code></pre>
  
  <p><b>Update:</b> Ok, I passed "{}" as the Data query (apparently this is the right way to pass nothing to a method that does not take parameters), and I now get Unsupported Media Type.  And the trace exception is: System.ServiceModel.ProtocolException: Content Type application/json; charset=utf-8 was sent to a service expecting text/xml; charset=utf-8.  </p>