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.
