In this article we are going to discuss about creating Web Service remote calls using AJAX.

Initialize the below steps,

Step1:Create standard ASP.NET Web service project and then add a reference
to the system.web.extensions assembly.

step2:Import System.Web.Script.Services namespace.
(using System.Web.Script.Services;)

The key difference between standard ASP.NET webservice and AJAX
Web service is [ScriptService] attribute.

namespace Ajax.WebServices
{
[WebService(Namespace = "http://Sample.asmx/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class Service : System.Web.Services.WebService, IService
{
…
}
}

The ScriptService attribute indicates the service is designed to accept
calls from JavaScript-based client proxies.

When flagged with the ScriptService attribute, an ASP.NET Web service supports
two types of calls: classic calls via SOAP packets and client calls using
JSON messages.

The ScriptMethod Attribute

Public methods of the Web service class decorated with the WebMethod attribute
are automatically added to the JavaScript proxy class and can subsequently be
called from the client page. Any methods in the proxy class are invoked using
the HTTP POST verb and return their values as JSON objects. You can change these
default settings on a per-method basis by using an optional attribute—ScriptMethod.

[WebMethod]
[ScriptMethod]
public Date Get()
{
…
}

Next,we need to create client side web service calls using xmlhttpobject,

<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
<Services>
<asp:ServiceReference Path=”~/WebServices/Service.asmx” />
</Services>
</asp:ScriptManager>

Next,in code behind we are adding the web service,

ServiceReference service = new ServiceReference();
service.Path = “~/WebServices/Service.asmx”;
ScriptManager1.Services.Add(service);

so,now we created ajax web service,

Next to enable Web service calls from within ASP.NET AJAX applications,
you need to add the following script to the application’s web.config file
and register a special HTTP handler for .asmx requests:

<httpHandlers>
<remove verb=”*” path=”*.asmx” />
<add verb=”*” path=”*.asmx”
type=”System.Web.Script.Services.ScriptHandlerFactory” />
…
</httpHandlers>

Now,we can see the JavaScript proxy class generated from the public interface
of an AJAX Web service.

The Proxy Class

To understand the structure of a JavaScript proxy class, we’ll consider what the ASP.NET AJAX run generates the mentioned service.asmx Web service. The full name of the Web service class is Ajax.WebServices.Service, and therefore it is the name of the JavaScript proxy as well. Here’s the first excerpt from the script injected in the client page for the  Web service:

Type.registerNamespace(‘Ajax.WebServices’);
Ajax.WebServices.Service = function()
{
Ajax.WebServices.Service.initializeBase(this);
this._out = 0;
this._userContext = null;
this._succeeded = null;
this._failed = null;
}
Ajax.WebServices.Service.prototype =
{
Get : function(succeededCallback, failedCallback, userContext)
{
return this._invoke(Ajax.WebServices.Service.get_path(),
‘Get’, false, {}, succeededCallback,
failedCallback, userContext);
},
GetFormat : function(Format, succeededCallback,
failedCallback, userContext)
{
return this._invoke(Ajax.WebServices.Service.get_path(),
‘GetAsFormat’, false, {format:Format},
succeededCallback, failedCallback, userContext);
}
}
Ajax.WebServices.Service.registerClass(
Ajax.WebServices.Service’,
Sys.Net.WebServiceProxy);
Ajax.WebServices.Service._staticInstance =
new Ajax.WebServices.Service();

Calling Web Service:

Declare a button,

<input type=”button” value=”Get Time” onclick=”getTime()” />

<script language=”javascript” type=”text/javascript”>
function pageLoad()
{
IAjax.WebServices.Service.set_defaultFailedCallback(
methodFailed);
}
function getTime()
{
Ajax.WebServices.Service.GetTimeFormat(
“ddd, dd MMMM yyyy [hh:mm:ss]“, methodComplete);
}
function methodComplete(results, context, methodName)
{
$get(“Label1″).innerHTML = results;
}
function methodFailed(results, context, methodName)
{
$get(“Label1″).innerHTML = String.format(
“Execution of method ‘{0}’ failed because of the
following:\r\n’{1}’”,
methodName, results.get_message());
}
</script>

Now,we successfully executed web service remote method using AJAX.

Happy Coding,