This article is all about Calling a WebService (asmx) in HTML Page using jquery. to call a webservice first thing to know about a webservice
- Web services are application components
- Web services communicate using open protocols
- Web services are self-contained and self-describing
- Web services can be discovered using UDDI
- Web services can be used by other applications
- HTTP and XML is the basis for Web services
Webservices transfers data to application in XML, JSON and Text Format as well as JSON object.
One important distinction is what I mean by a JSON object and JSON format. A JSON object is an object that can be used by javascript
var o = {data: 'value'};
alert (o.data); // this works as o is an object
JSON format is simply a literal string that can be turned into a JSON object if we parse it
var f = "{data: 'value'}";
alert (f.data); // this won't work as f is just a string and string doesn't have a data property
EXAMPLE
WEB SERVICE
[WebMethod]
public string SayHello(string firstName, string lastName)
{
return "Hello " + firstName + " " + lastName;
}
[WebMethod]
public string SayHelloJson(string firstName, string lastName)
{
var data = new { Greeting = "Hello", Name = firstName + " " + lastName };
// We are using an anonymous object above, but we could use a typed one too (SayHello class is defined below)
// SayHello data = new SayHello { Greeting = "Hello", Name = firstName + " " + lastName };
System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
return js.Serialize(data);
}
[WebMethod]
public SayHello SayHelloObject(string firstName, string lastName)
{
SayHello o = new SayHello();
o.Greeting = "Hello";
o.Name = firstName + " " + lastName;
return o;
}
"SayHello" returns a string
"SayHelloJson" returns a string that is an object in JSON format
"SayHelloObject" returns an object. The SayHello class is here
public class SayHello
{
public string Greeting { get; set; }
public string Name { get; set; }
}
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div><br />Example A</div>
<div id="searchresultsA"></div>
<div><br />Example B</div>
<div id="searchresultsB"></div>
<div><br />Example C</div>
<div id="searchresultsC"></div>
<div><br />Example D</div>
<div id="searchresultsD"></div>
<div><br />Example E</div>
<div id="searchresultsE"></div>
<script type="text/javascript">
// Example A - call a function that returns a string.
// Params are sent as form-encoded, data that comes back is text
$(document).ready(function () {
$.ajax({
type: "POST",
url: "MyWebService.asmx/SayHello",
data: "firstName=Aidy&lastName=F",
dataType: "text",
success: function (data) {
$("#searchresultsA").html(data);
}
});
// Example B - call a function that returns a string.
// Params are sent in JSON format, data that comes back is JSON
$.ajax({
type: "POST",
url: "MyWebService.asmx/SayHello",
data: "{firstName:'Aidy', lastName:'F'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#searchresultsB").html(data.d);
}
});
// Example C - call a function that returns a string.
// Params are sent as a JSON object, data that comes back is text
$.ajax({
type: "POST",
url: "MyWebService.asmx/SayHello",
data: { firstName: 'Aidy', lastName: 'F' },
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
dataType: "text",
success: function (data) {
$("#searchresultsC").html(data);
}
});
// Example D - call a function that returns a string that is an object in JSON format.
// Params are sent in JSON format, data that comes back is a string that represents an object in JSON format
$.ajax({
type: "POST",
url: "MyWebService.asmx/SayHelloJson",
data: "{ firstName: 'Aidy', lastName: 'F' }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var myData = JSON.parse(data.d);
$("#searchresultsD").html(myData.Greeting + " " + myData.Name);
}
});
// Example E - call a function that returns an object. .net will serialise the object as JSON for us.
// Params are sent in JSON format, data that comes back is a JSON object
$.ajax({
type: "POST",
url: "MyWebService.asmx/SayHelloObject",
data: "{ firstName: 'Aidy', lastName: 'F' }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var myData = data.d;
$("#searchresultsE").html(myData.Greeting + " " + myData.Name);
}
});
});
</script>
</form>
</body>
</html>
