Rss Feed Like Us on facebook Google Plus
Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

May 10, 2014

Call WebService using JQuery and HTML : Asp.Net

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>
Read More

© 2011-2016 Techimpulsion All Rights Reserved.


The content is copyrighted to Tech Impulsion and may not be reproduced on other websites.