title: calling a webservice from a html page
body: <p>Hi Please can you help me? I have a number of webpages that I need to know how many times they are loaded. I have created a web service to enter a record into a database when it is triggered.</p>
  
  <pre><code>&lt;WebMethod(Description:="Counts when a page is loaded")&gt; _
  &lt;ScriptMethod(ResponseFormat:=ResponseFormat.Json)&gt;
  Public Sub CountOnPageLoad(ByVal websiteName As String, websitePage As String)
  
      Dim wp As New WebpageMonitoringRepository
      wp.countPageLoad(websiteName, websitePage)
  
  End Sub
  </code></pre>
  
  <p>This web service works fine. </p>
  
  <p>I have then created a test HTML in the same VS2012 project that will call the webservice.</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;script src="Scripts/jquery-1.9.1.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      var data = "{'websiteName':'Test','websitePage':'Test'}"
  
      $.ajax({
          type: "POST",
          url: "http://webservicesuite/WebpageMonitoringService.asmx/CountOnPageLoad",
          data: data,
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (result) {  },
          error: function (result) {  }
      });
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This also works fine and is populating the DB.</p>
  
  <p>However when I put this on my webpage on another server I get Access-Control-Allow-Origin and Access-Control-Allow-Headers error. I have messed about for days now</p>
  
  <p>I have put </p>
  
  <pre><code>    &lt;httpProtocol&gt;
    &lt;customHeaders&gt;
      &lt;!-- Adding the following custom HttpHeader will help prevent CORS from stopping the Request--&gt;
      &lt;add name="Access-Control-Allow-Origin" value="*" /&gt;
      &lt;add name="Access-Control-Allow-Headers" value="Content-Type" /&gt;
    &lt;/customHeaders&gt;
  &lt;/httpProtocol&gt;
  </code></pre>
  
  <p>and </p>
  
  <pre><code>    &lt;webServices&gt;
    &lt;protocols&gt;
      &lt;add name="HttpGet"/&gt;
      &lt;add name="HttpPost"/&gt;
    &lt;/protocols&gt;
  &lt;/webServices&gt;
  </code></pre>
  
  <p>into my web.config file. I have tried it with jsonp and I still cannot get it to work.</p>
  
  <p>I have now changed my jquery to javascript</p>
  
  <pre><code>    &lt;script language="text/javascript"&gt;
  
  xmlhttp=new XMLHttpRequest();
  xmlhttp.open("POST","http://webservicesuite.*********.uk/WebpageMonitoringService.asmx/CountOnPageLoad",true);
  xmlhttp.send("websiteName=Henry&amp;websitePage=Ford");
  &lt;/script&gt;
  </code></pre>
  
  <p>would someone please be able to help me call a webservice from a webpage from a different domain.</p>
  
  <p>thanks Paul</p>