Prev Next

ASP AJAX

AJAX (Asynchronous JavaScript and XML) in ASP is used to create dynamic and interactive web pages without reloading the entire page. It allows for asynchronous communication between the client and the server.

Key Topics

AJAX GET Request

Example

<!-- HTML -->
<html>
<body>
    <div id="result"></div>
    <button onclick="loadData()">Load Data</button>

    <script>
        function loadData() {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "data.asp", true);
            xhr.onload = function () {
                if (xhr.status === 200) {
                    document.getElementById("result").innerHTML = xhr.responseText;
                }
            };
            xhr.send();
        }
    </script>
</body>
</html>

<!-- data.asp -->
<%
    Response.Write("Hello, this is data from the server.")
%>

Explanation: This example demonstrates using an AJAX GET request to fetch data from the server and update the page dynamically without a reload.

AJAX POST Request

Example

<!-- HTML -->
<html>
<body>
    <input type="text" id="name" placeholder="Enter name">
    <button onclick="sendData()">Submit</button>
    <div id="response"></div>

    <script>
        function sendData() {
            var xhr = new XMLHttpRequest();
            var name = document.getElementById("name").value;
            xhr.open("POST", "process.asp", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.onload = function () {
                if (xhr.status === 200) {
                    document.getElementById("response").innerHTML = xhr.responseText;
                }
            };
            xhr.send("name=" + name);
        }
    </script>
</body>
</html>

<!-- process.asp -->
<%
    Dim name
    name = Request.Form("name")
    Response.Write("Hello, " & name & "!")
%>

Explanation: This example demonstrates using an AJAX POST request to send data to the server and display a response dynamically.

Key Takeaways

  • AJAX enables dynamic content updates without full-page reloads.
  • Use GET for fetching data and POST for sending data securely to the server.
  • Combining ASP and AJAX enhances interactivity and responsiveness in web applications.
Prev Next