Tag Archives: XmlHttpRequest

Traditional Ajax With Asp .Net And Modern PageMethods Approach

Traditional Ajax Method With Asp.Net

Basicaly, we use XMLHttpRequest client side class to use ajax functionality. The use of bare XMLHttpRequest is a traditional way to accomplish asynchronous process.

This XMLHttpRequest class implementation is written in JScript or VbScript client script and usually it is being used by Asp Classic but Asp .Net can use it and so other open source code language.
To make an async process using XMLHttpRequest we can use client side development only.

Although the traditional way is not die and still a good option rather than not to use the asynx process but when we are using Asp .Net to do ajax it is recomended to use a modern approaches.
This modern approach is using Asp.Net Ajax Extension. It includes both server and client side development. I use PageMethods in this post to be specific. In fact, a lot of option of using Asp.Net Ajax.
However we need to know how to implement or code with XMLHttpRequest and so we can compare it with modern (Asp.Net Ajax) method.

XMLHttpRequest Example

I use Asp.Net file to show you how to use traditional ajax.

.aspx file:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
         
        function httprequest() {
            
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var response = xmlhttp.responseText;
                    document.getElementById("response").innerHTML = response;

                }
            }
            xmlhttp.open("GET", "somehtml.htm", true);
            document.getElementById("response").innerHTML = "Loading..";
            window.setTimeout("xmlhttp.send()", 1000);
        }
    </script>
</head>
<body onload="httprequest()">
    <form id="form1" runat="server">
    <div id="response"></div>
    </form>
</body>
</html>

Continue reading