Work with Web Services in AJAX

Introduction : Ajax (Asynchronous JavaScript and XML) is a new web development technique use for the interactive website. AJAX helps us develop web applications and retrieve a small amount of data from a web server. AJAX consist of different types of technology.

JavaScript
XML
Asynchronous Call to the server

WebService : Web Services can convert your applications into Web-applications.Web Services are published, found, and used through the Web.Web services communicate using open protocols.

The basic Web services platform is XML + HTTP
XML provides a language which can be used between different platforms and programming languages and still express complex messages and functions
The HTTP protocol is the most used Internet protocol

Web services platform elements:

SOAP (Simple Object Access Protocol)
UDDI (Universal Description, Discovery and Integration)
WSDL (Web Services Description Language)

Web services are a set of tools that can be used in a number of ways.

Remote Procedure call(RPC)
Service-Oriented Architecture(SOA)
Representational State Transfer(RST)

Step 1 : Open Visual Studio 2010.

Go to File->New->WebSite
Select ASP.NET Empty WebSite

Step 2 : Go to Solution Explorer and right-click.

Select Add->New Item
Select WebForm
Default.aspx page open

Step 3 : Go to Solution Explorer and right-click.

Select Add->New Item
Select WebService file
WebService.asmx option open

WebService :

Step 4 : Now go to the web.config option and define the ScriptHandler property.

ScriptHandler :

<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0" />
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx" type="System.Web.Script.Services.ScriptHandlerFactory" validate="false"/>
</httpHandlers>
</system.web>
</configuration>

Step 5 : Now go to the Default.aspx page and drag ScriptManager control from Toolbox.

Go to design option and click in Script Manager control
Select property option
Define Services

Step 6 : Create new button to call the JavaSciprt function and a label to display the returned value.

<div style="background-color: #99CCFF">
<asp:Button ID ="button1" runat="server" Text="mcnsever" onclick="button1_Click"></asp:Button>
<asp:Label ID="lblOutput" runat="server" Text="Label"></asp:Label>

Step 7 : Define the JavaScript code to call the Web Service.

Code :

Step 8 : Now we define the follwing code for the Scriptmanager Control and WcfService Path.

Code :

<title> me ajax application </title>
<script language="javascript" type="text/javascript">
function CallDateTime() {
WebService.OurServerOutput(OnSucceeded);
}
function OnSucceeded(result) {
var lblOutput = document.getElementById("lblOutput");
lblOutput.innerHTML = result;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path = "~/WebService.asmx" />
</Services>
</asp:ScriptManager>
<div style="background-color: #99CCFF">
<asp:Button ID ="button1" runat="server" Text="mcnsever" onclick="button1_Click"></asp:Button>
<asp:Label ID="lblOutput" runat="server" Text="Label"></asp:Label>
</div
</form>
</body>

Step 9 : Now we define the namespace call for the [webservice.asmx]file.

Namespace :

[System.Web.Script.Services.ScriptService]

Step 10 : The complete code for calling the webservice in AJAX.

WebService code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Configuration;
/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
public WebService () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public string OurServerOutput() {
return "The Server Date and Time is : " + DateTime.Now.ToString();
}

Step 11 : Now run the Web application by press f5.

Step 12 : Now double click in mcnserver button and see the following ouput.