I'm trying to figure out how to make a regular html page (with javascript) get data from a WebService which I created in Visual Studio using Asp.Net. My final project is going to have the WebService hosted in one domain and the results will need to be received by the html page in another domain.
I'm having a really hard time figuring out how to set up the webservice such that my page can talk to it.
I've been trying to follow:
http://www.html5rocks.com/en/tutorials/cors/#toc-adding-cors-support-to-the-server
and the video here: http://www.asp.net/web-forms/videos/how-do-i/how-do-i-create-and-call-a-simple-web-service-in-aspnet
but I can't seem to work out the kinks. When I try to load the page using Firefox nothing is returned. I'm almost positive that the problem has to do with the URL I'm trying to use, but I don't know enough to figure out what it should be.
What is the best way to get the return value from the function HelloWorld2 using javascript?
Thanks in advance.
WebService
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
namespace StoneSoupMockup
{
/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://SomeDumbUniqueID.org/", Description="This is a sample service for Stone Soup.", Name="MyService")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class Service1 : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
[WebMethod]
public string HelloWorld2(string something)
{
return "Hello " + something;
}
}
}
I added access control headers to the httpProtocol in the web.config of my web services project like this
<system.webServer>
<modules runAllManagedModulesForAllRequests="true"/>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*"/>
<add name="Access-Control-Allow-Headers" value="Content-Type" />
</customHeaders>
</httpProtocol>
</system.webServer>
JavaScript:
//WebServices.js
function myAjax() {
var xmlHttp = new XMLHttpRequest();
//I'm really not sure about this URL. This is what Visual Studio has for the
//URL when I test my app
var url="http://localhost:62033/Service1.asmx/HelloWorld2";
//var parameters = "first=barack&last=obama";
var parameters = "something=timmy"
xmlHttp.open("POST", url, true);
//Black magic paragraph
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", parameters.length);
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById('ajaxDump').innerHTML+=xmlHttp.responseText+"<br />";
}
}
xmlHttp.send(parameters);
}
HTML Code:
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="WebServices.js" type='text/javascript'></script>
</head>
<body>
<div id="resultdiv"></div>
<script type='text/javascript'>
myAjax();
</script>
</body>
</html>
