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.

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.

Web services platform elements:

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

Step 1 : Open Visual Studio 2010.

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

2.gif

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

WebService :

3.gif

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.

Clipboard02.gif

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 :

<script language="javascript" type="text/javascript">
 function CallDateTime() {
WebService.OurServerOutput(OnSucceeded);
| }
function OnSucceeded(result){
var lblOutput = document.getElementById("lblOutput");
lblOutput.innerHTML = result;
}
</script>

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.

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

7.gif