This post guides on how you can call an asmx webservice via JQuery. For those who are not familiar with JQuery, its a consise javascript library. To make it simple its a lenghty java script file which contains predefined functions, which users can leverage to develop rich client side applications. You may download the latest from www.jquery.com
<!DOCTYPE HTMLPUBLIC“-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<!–Step1: Add reference to the jquery script file.–>
<scriptsrc=”JS/jquery-1.8.3.min.js”type=”text/javascript”></script>
<!–Step 2: Show acitivity indicator. This would help the users know that some activity is going on in the background.–>
<scripttype=”text/javascript”language=”javascript”>
$(document).ready(
function () {
$(“#activityIndicator”).bind(“ajaxSend”, function () {
$(this).show();}).bind(“ajaxStop”, function () {
$(this).hide();}).bind(“ajaxError”, function () {
$(this).hide();
});
});
</script>
<!–Step 3: Make a webservice call. Most of the below script is self explanatory .–>
<scripttype=”text/javascript”language=”javascript”>
//URL path to the webservice
var webServiceURL = ‘http://ServerName/WebService.asmx/WebMethod’;
function CallWebSerivce() {
//Get the parameter to the service from the user input
var parma1value = document.getElementById(‘<%= Ctrl1.ClientID %>’).value;
//Format parmaters as follows ‘param1=paramvalue, param2=paramvalue’
var parameters = ‘param1=’ + parma1value;
//Do not remove: ‘cors’ is equal to true if a browser can create an XMLHttpRequest object and if that XMLHttpRequest object has a withCredentials property.To enable cross-domain requests in environments that do not support cors yet but do allow cross-domain XHR requests
jQuery.support.cors =true;
//Make an ajax request
$.ajax({
type:“POST”,
url: webServiceURL,
data: parameters,
dataType:“xml”,
crossDomain:true,
success: OnSuccess,//method upon success
error: OnError//method upon error/failure
});
//ajax
//1. GET the node value from webservice xml response – $(data).find(“nodeName1”).text()
//2. Find() function will get all the nodes with the provided name. If you have child nodes with the same name. All of the values are returned as a concatinated string
//Perform success operations
function OnSuccess(data, status) {
document.getElementById(‘<%= Ctrl2.ClientID %>’).value = $(data).find(“nodeName1”).text();
document.getElementById(‘<%= Ctrl3.ClientID %>’).value = $(data).find(“nodeName2”).text();
document.getElementById(‘<%= Ctrl4.ClientID %>’).value = $(data).find(“nodeName3”).text();
}
//Perform error operations
function OnError(request, status, error) {
alert(‘Error calling webservice. Please enter meta data manually!’);
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<!– TextBox which takes user input as a parameter to the webservice –>
<asp:textboxid=”Ctrl1″ runat=”server”/>
</td>
<td>
<!– TextBox which displays value from the webservice –>
<asp:textboxid=”Ctr2″ runat=”server”/>
</td>
</tr>
<tr>
<td>
<!– TextBox which displays value from the webservice –>
<asp:textboxid=”Ctrl3″runat=”server” />
</td>
<td>
<!– TextBox which displays value from the webservice –>
<asp:textboxid=”Ctrl4″runat=”server”/>
</td>
</tr>
<tr>
<td>
<!– Activity Indicator container: Hidden by default –>
<div id=”activityIndicator”style=”display: none;”>
<img id=”imgActivityIndicator”src=”Images/ajax-loader.gif” alt=”Loading”/>
</div>
</td>
<td>
<!– CallWebService() function called ‘onclick’ of a button –>
<input type=”button”name=”BtnFetchData” title=”Fetch Data” value=”Fetch
Data” onclick=”CallWebSerivce();” />
</td>
</tr>
</table>
</body>
</html>
Useful links:
1. You may generate ajax loader icons from Ajax Load Info
2. JQuery script files: www.jquery.com