XMLHttpRequest Example with Webservice asp.net

AJAX is a group of interrelated web development techniques used on the client-side to create asynchronous web applications. If you want to retrieve information from server side and you do not want to fully post the entire page to the server side, you need to use ajax in your web page.

This post show example how to use simple XMLHttpRequest Object in your web page to get the information from server side.

The Javascript AJAX 

<script type="text/javascript">
        function createXHR() {
            if (typeof XMLHttpRequest != "undefined") {
                return new XMLHttpRequest();
            } else if (typeof ActiveXObject != "undefined") {
                if (typeof arguments.callee.activeXString != "string") {
                    var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                     "MSXML2.XMLHttp"];
                    for (var i = 0, len = versions.length; i < len; i++) {
                        try {
                            var xhr = new ActiveXObject(versions[i]);
                            arguments.callee.activeXString = versions[i];
                            return xhr;
                        } catch (ex) {
                            //skip
                        }
                    }
                }
                return new ActiveXObject(arguments.callee.activeXString);
            } else {
                throw new Error("No XHR object available.");
            }
        }

        function submitForm() {

            var xhr = createXHR();
            xhr.onreadystatechange = function (event) {
                if (xhr.readyState == 4) {
                    try {
                        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                            alert(xhr.responseText);
                        } else {
                            alert("Request was unsuccessful: " + xhr.status);
                        }
                    } catch (ex) {
                        //assume handled by ontimeout
                    }
                }
            };
            xhr.open("POST", "http://localhost:3323/AjaxWebService.asmx/HelloWorld", true);
            xhr.timeout = 5000; //set timeout for 5 second
            xhr.ontimeout = function () {
                alert("Request did not return in 5 second.");
            };
            xhr.send(null);
        }
    </script>

The Webservice code behind( AjaxWebService.asmx)

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;

namespace BlogExample
{
    /// <summary>
    /// Summary description for AjaxWebService
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 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 AjaxWebService : System.Web.Services.WebService
    {

        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }
    }
}

Call Script

<asp:Button ID="Button1" runat="server" Text="Get Request AJAX" OnClientClick="submitForm();return false;" />

The Output

By Mohd Zulkamal
NOTE : – If You have Found this post Helpful, I will appreciate if you can Share it on Facebook, Twitter and Other Social Media Sites. Thanks =)