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
EXAMPLE
WEB SERVICE
- 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
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>
