title: Calling JSON Web Service using JQuery
body: <p>I am calling an ASP.net application that has an exposed JSON web service interface. If I access the web service using Fiddler, everything works correctly and I get my desired result. I am trying to do the same thing using JQuery and I am running into issues. I will try to provide as much information as possible but not too much as to cloud the issue.</p>
  
  <p>In Fiddler, I am using Request builder and sending a POST with the following information:</p>
  
  <pre><code>http://www.XXXXXXXXXX.com/TASService.svc/Logon
  </code></pre>
  
  <p>If I use Fiddler the request is sent as follows:</p>
  
  <pre><code>POST http://www.XXXXXXXXXX.com/TASService.svc/Logon HTTP/1.1
  content-type: application/json
  Host: www.XXXXXXXXXX.com
  Content-Length: 50
  
  {"Email":"XXXXXXXXXX@hotmail.com","Password":"#password1"}
  </code></pre>
  
  <p>As a result I get:</p>
  
  <pre><code>HTTP/1.1 200 OK
  Date: Thu, 29 Dec 2011 21:36:09 GMT
  Server: Microsoft-IIS/6.0
  MicrosoftOfficeWebServer: 5.0_Pub
  X-Powered-By: ASP.NET
  X-AspNet-Version: 4.0.30319
  Content-Length: 38
  Cache-Control: private
  Content-Type: application/json; charset=utf-8
  
  {"ContactID":52215,"Status":"Success"}
  </code></pre>
  
  <p>This is a good response (successful logon)</p>
  
  <p>My HTML/JQuery is defined as follows:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;jQuery Test JSON&lt;/title&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
   $.ajax({
      type: "POST",
      url: "http://www.XXXXXXXXXX.com/TASService.svc/Logon",
      data: "{'Email':'XXXXXXXXXX@hotmail.com', 'Password':'#password1'}",
      contentType: "application/json; charset=utf-8",
      dataType: "jsonp",
      success: function(msg) {
        $('#msgid').html(msg.d);
      },
      error: function (errormessage) {
      $('#msgid').html("oops got an error!");
      }
    });
  });
  &lt;/script&gt;
  JSON Test Web Page
  &lt;div id="msgid"&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now when I call run the page in FireFox I get the following (FireBug): </p>
  
  <pre><code>"NetworkError: 405 Method Not Allowed - http://www.XXXXXXXXXX.com/TASService.svc/Logon?callback=jQuery171018036323126084708_1325195152450&amp;{%27Email%27:%27XXXXXXXXXX@hotmail.com%27,%20%27Password%27:%27#password1%27}&amp;_=1325195152469"
  </code></pre>
  
  <p>When I view what was sent (Fiddler RAW), I get the following:</p>
  
  <pre><code>GET http://www.XXXXXXXXXX.com/TASService.svc/Logon?callback=jQuery171026545743770048436_1325195246881&amp;{%27Email%27:%27XXXXXXXXXX@hotmail.com%27,%20%27Password%27:%27 HTTP/1.1
  Host: www.XXXXXXXXXX.com
  User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0.1) Gecko/20100101 Firefox/8.0.1
  Accept: */*
  Accept-Language: en-us,en;q=0.5
  Accept-Encoding: gzip, deflate
  Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
  Connection: keep-alive
  Pragma: no-cache
  Cache-Control: no-cache
  </code></pre>
  
  <p>What I notice right away is that it is sending a GET rather than a POST, although I specified a POST on the ajax request. I believe this is why I am getting the 405 error. However, am not sure why it is doing a GET rather than a POST.</p>
  
  <p>Any assistance on this will be very appreciated since time is running short on my project.</p>