Geeks With Blogs

Thanigainathan Siranjeevi Sharing my learning

Today I was trying to call ASP.Net web service from JQuery. I thought it was easy first. But when tried implementing them I felt the difficulty. I don't had this problem while calling Ajax enabled WCF service from JQuery. Hence I did a small Bing and found out some useful tips to share. I referred links below.

The above links are very helpful. In addition to that you may need the following prerequisites.

  1. Visual Studio 2008
  2. Jquery 1.3.2
  3. Jquery-1.3.2-vsdoc.js

I will list the steps I have followed. Create a New application and name as you want. In my case I named it AjaxDemo.

Once the project is created you can copy the Jquery 1.3.2 and Jquery-1.3.2-vsdoc file into the project folder. Add a new WebService named WebService1.asmx.


Now import two namespaces for enabling the WebService to be accessed from JavaScript.

using System.Web.Script.Serialization;

using System.Web.Script.Services;

The class Webservice1 has to be marked as ScriptService .This is very important.


public class WebService1 : System.Web.Services.WebService


Next the method needs to be marked as WebMethod as usual and ScriptMethod for enabling client access.


[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]

public string HelloWorld()



Since I am using the JSON as the data type I am marking the Response format as JSON. The data that has to be sent from server has to be serialized as JSON. I have give a sample below.

JavaScriptSerializer js = new JavaScriptSerializer();// Use this when formatting the data as JSON

return js.Serialize("Hello World");

That's all needed on server side. Next we will look at JQUERY client invokation.

<html xmlns="" >




<script src="jquery-1.3.2.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

$.ajax({ type: "GET",

contenttype: "application/json; charset=utf-8",

data: "{null}",

url: "WebService1.asmx/HelloWorld",


success: function(res) {



error: function(err) {







<form id="myForm">

<input id="Text1" type="text" />




As you can see from above $.ajax is used to call the WebService. The data send should be as "{null}". This is very important otherwise it wont work.

Here I have assigned the result to only a text box. The same scenario can be applied for complex situations. I will discuss about the complex things later.




Posted on Friday, October 30, 2009 8:37 AM | Back to top

Comments on this post: Calling webservice from JQuery

# re: Calling webservice from JQuery
Requesting Gravatar...
Thanks for the enlightening piece about how to call web service using client-side jquery!
Left by WebDesignExpert.Me on Nov 03, 2009 7:03 AM

# re: Calling webservice from JQuery
Requesting Gravatar...
You should rather use the js proxy for the webservice. I blogged about it at
Left by Thorsteinsson on Nov 10, 2009 1:02 PM

# re: Calling webservice from JQuery
Requesting Gravatar...
Nice tutorial, thanks for saring. I have also written one, but covered only jquery client part, in details..
Left by ranacseruet on Jan 04, 2010 12:16 AM

# re: Calling webservice from JQuery
Requesting Gravatar...
please attach the js file also
Left by Archana on Jan 08, 2011 1:00 AM

# re: Calling webservice from JQuery
Requesting Gravatar...
Hi ,

Javascript is given in the tutorial itself.

Do you mean jquery.js files ?
That can be donwloaded from website or microsoft cdn.

Left by Thanigainathan on Jan 08, 2011 7:32 AM

Your comment:
 (will show your gravatar)

Copyright © thanigai | Powered by: