Ajax & jQuery to Call Web Service Methods
AJAX has changed the way we developed web sites in the past by giving them responsiveness similar to Desktop applications. In straight words
In this post I will show you how you can call ASP.NET web service using JQuery and how you can wait for the response from the asynchronous call and then proceed further for other functionality.
If we are going to call asp.net webservices from javascript then for some security vulnerabilities in ASP.NET service ,following two things are checked:
- Only POST method can be used to call a web service method. You cannot use HTTP GET.
- The HTTP content-type header should be set to the value "application/json". For those of you who are not familiar with JSON may be wondering what is json and where it came from. So don’t worry I have some basic introduction for you in this tutorial as we will use it in few minutes using JQuery AJAX. In modern AJAX based web applications, when web services are called from client applications, they normally return XML formatted response, which can be parsed and use in JavaScript, but it complicates things for developers. They need a simple data structure which can be used more easily than XML. This is where JavaScript Object Notation (JSON) comes to help us with the following major features. Will discuss more on JSON in my next posts.
Now lets see the below code for calling the service. I am not providing the actual service url and webmethod name.
<html>
<head>
<title>
AJAX JQuery Test
</title>
<script src="path to jquery file" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btnSubmit").click(function() {
$.ajax({
type: "POST",
url: "path to web service/web method name",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg)
{
alert("Response Recieved and Value is "+msg.d);
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="btnSubmit" type="button" value="Get Service Respnse" />
<br />
<br />
</form>
</body>
</html>
Nice tutorial
ReplyDeleteHello, this weekend is good for me, because this
ReplyDeletepoint in time i am reading this fantastic educational
post here at my residence.
my web page - Washington SEO Services