<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>Simple AJAX Example – POST Request Processing Done by ASPX</title>

    <script type="text/javascript">

    var xmlhttp;

 

    try {

        // Code for IE7+, Firefox, Chrome, Opera, Safari

        xmlhttp = new XMLHttpRequest();

    }

    catch (try_older_microsoft) {

        try {

            // Code for IE6, IE5

            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

        }

        catch (other) {

            xmlhttp = false;

            alert("Your browser doesn't support AJAX!");

        }

    }

 

    function getInfo()

    {

        var userName = document.getElementById("txtName").value;

        var age = document.getElementById("txtAge").value;

        var major = document.getElementById("txtMajor").value;

        var params = "name=" + userName + "&age=" + age + "&major=" + major;

 

        // Open a new asynchronous request, set the callback function, and send the request.

        xmlhttp.open("POST", "AJAX_PostProcess.aspx", true);

        xmlhttp.onreadystatechange = onComplete;

 

        // set the HTTP request headers for the information being sent using POST

        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        xmlhttp.setRequestHeader("Content-length", params.length);

        xmlhttp.send(params);

    }

 

    // Callback function used to update the page when the server completes a response

    // to an asynchronous request.

    function onComplete()

    {  

        //Response is READY and Status is OK

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

            document.getElementById("content_area").innerHTML = xmlhttp.responseText;

        }

       

    }

   

    </script>

</head>

<body>

    <h1>Simple AJAX Example -&nbsp; Sending Data using the POST Method to an ASPX page.</h1>

    <div id="content_area"></div>

    <table>

        <tr>

            <td>Name:</td>

            <td><input type="text" id="txtName" /></td>

        </tr>

        <tr>

            <td>Age: </td>

            <td><input type="text" id="txtAge" /></td>

        </tr>

        <tr>

            <td>Major: </td>

            <td><input type="text" id="txtMajor" /></td>

        </tr>

    </table>

   

    <br />

    <input type="button" value="Send" onclick="getInfo();" />

 

</body>

</html>