Post
Ask Question

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

2.gif

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

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

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.

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

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


Similar Articles