Consuming JSON and XML Webservices from an HTML Page using jQuery
page 2 of 4
by Rajesh Toleti
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 32289/ 62

PART1 (XML Webservices)

I am going to use a simple webservice(This is included in 'Download Code' section, called Service1.asmx), which will emit the below XML code when it is invoked.

I am not going explain about building that webservice as it is out of scope for this article.

However it is very simple and easily understandable.

Listing 1

<ArrayOfCountryDetails>
<CountryDetails>
<Name>USA</Name>
<Capital>Washington</Capital>
</CountryDetails>
<CountryDetails>
<Name>UK</Name>
<Capital>London</Capital>
</CountryDetails>
<CountryDetails>
<Name>India</Name>
<Capital>New Delhi</Capital>
</CountryDetails>
</ArrayOfCountryDetails>

 

As you can see this XML file contains 3 countries and their capitals. We are going to invoke this webservice from our JQuery code and write the response in a simple table format.

 

Listing 2

        <script src="JS/jquery-1.4.2.min.js" language="javascript"></script>
        <script type="text/javascript">
        $(document).ready(function() {
                     $.ajax({
 
                    type: "POST",       
                   url: "service1.asmx/XMLCountry",       
                   success: function(XMLResponse) { 
                                 var content =
"<table cellspacing=0 border=1><tr><td><strong>Country</strong></td> <td>" +
                     "<strong>Capital</strong></td></tr>";
                     $(XMLResponse).find('ArrayOfCountryDetails').each(function(){
        
                       $(this).find('CountryDetails').each(function(){
                        var name=$(this).find('Name').text();
                        var capital=$(this).find('Capital').text();
                        content=content+"<tr><td>"+name+"</td> <td> "+capital+"</td></tr> " 
                                                                               });
             });
 
 
            content = content + " </table> ";
 
            $("#XMLContent").html(content);           
                                                 },
        error: function(msg) {
            alert('Error occurred');
                              }
                         });
                          })
    </script>

Place the JQUERY reference in HEAD section of the HTML page.

The first line under '<script type="text/javascript">' is the starting point for a JQUERY

i.e  "  $(document).ready(function() { "

This line is very important as it enables the code below it to execute after DOM of the page loaded. It executes before the contents of the web page loaded. You can visualize this as counterpart to traditional <Body ONLOAD="SomeFunction">. We use the built-in ajax event handler to invoke the webservice ie ' $.ajax({'

In JQUERY lingo, we call it as event handler instead of a method or function. The elements inside the event handler are called Settings. Settings are basically key/value pairs.

 

The first Setting is 'type'. The value we have to give is 'POST' .The post is the default setting for any Asp.net webservice. You can use 'GET', if you enable your webservice to accept 'GET' requests.

NOTE: The values are not case sensitive.

  The second setting is URL. The value we provide is the URL to the webservice. In our example 'Service1.asmx' is the Webservice name.' XMLCountry' is the method name. This method does not take any arguments.

  The third setting is 'success'. The value for this key will be a function unlike the above two settings. The function has a parameter, in our example we are calling it as 'XMLResponse'. This can be any name. This parameter contains the XML string, which was emitted by Webmethod 'Service1.asmx/XMLCountry'.

You can use that XML as you like. In our example we will display the values in HTML table

 So we will iterate through the XML string and capture the values of Country name, capital.

"ArrayOfCountryDetails" is the Root of the XML document. 'CountryDetails' is the child which has 'name', 'capital' as sub children.

The variable 'Content' is a simple html string. We build a HTML Table and insert the Country name, capital  as shown in the Listing2.

 We place a Division in HTML page like the below

           <div id="XMLContent"></div>

          We will place HTML content in that division in this way

            $("#XMLContent").html(content);

      If the code runs successfully, you should see a table with 3 countries and their capitals.

  The final setting is 'error'. This is an optional setting. If you want capture any errors occurred during the execution, you can define function as seen in the example. In our example, we are throwing a simple alert.

 


View Entire Article

User Comments

Title: Data cant shown in Google Chrome   
Name: Khoo
Date: 2012-08-02 6:32:43 AM
Comment:
Great explanation! It helps me a lot! Thanks!
It works fine in IE.
However, the table with no data shown in Google Chrome.
Any idea?
Title: paging   
Name: vinay
Date: 2011-04-19 7:29:48 AM
Comment:
good post but i have one more thing that is how can i do paging for the table created using json data






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2021 ASPAlliance.com  |  Page Processed at 2021-12-05 11:50:59 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search