AJAX (Asynchronous JavaScript and XML) is a technique used in web development to send and receive data from a server asynchronously, without reloading the web page. This makes applications faster and more interactive. When used with ASP (Classic ASP), AJAX can be implemented to build dynamic web pages that respond to user actions instantly.
In this tutorial, we’ll cover the basics of AJAX, the types of requests it supports, and how to use it with classic ASP using examples.
What is AJAX?
AJAX is not a programming language or a library; it is a combination of technologies:
- HTML/CSS for presentation
- JavaScript to interact with the DOM and handle events
- XMLHttpRequest or fetch API to send requests
- ASP (or other server-side languages) to process and respond to those requests
- JSON/XML/Plain text to format the response
Types of AJAX Requests
There are two primary types of AJAX requests:
- GET Request
- Data is sent through the URL
- Best for simple queries or fetching data
- Cached by browsers and has a size limit
- POST Request
- Data is sent through the request body
- Suitable for sending large or secure data
- Not cached, more secure than GET
AJAX with ASP: Step-by-Step Examples
Let’s build a simple AJAX-based application using classic ASP. We will create both GET and POST examples.
Example 1: GET Request with AJAX and ASP
HTML + JavaScript
htmlCopyEdit<!DOCTYPE html>
<html>
<head>
<title>AJAX GET with ASP</title>
</head>
<body>
<h3>Enter your name:</h3>
<input type="text" id="username">
<button onclick="sendRequest()">Submit</button>
<p id="response"></p>
<script>
function sendRequest() {
var name = document.getElementById("username").value;
var xhr = new XMLHttpRequest();
xhr.open("GET", "greet.asp?name=" + encodeURIComponent(name), true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("response").innerHTML = xhr.responseText;
}
};
xhr.send();
}
</script>
</body>
</html>
ASP Backend (greet.asp)
aspCopyEdit<%
Dim name
name = Request.QueryString("name")
If name <> "" Then
Response.Write("Hello, " & Server.HTMLEncode(name) & "! Welcome to AJAX with ASP.")
Else
Response.Write("Please enter your name.")
End If
%>
Example 2: POST Request with AJAX and ASP
HTML + JavaScript
htmlCopyEdit<!DOCTYPE html>
<html>
<head>
<title>AJAX POST with ASP</title>
</head>
<body>
<h3>Login</h3>
Username: <input type="text" id="user"><br>
Password: <input type="password" id="pass"><br>
<button onclick="login()">Login</button>
<p id="result"></p>
<script>
function login() {
var xhr = new XMLHttpRequest();
var user = document.getElementById("user").value;
var pass = document.getElementById("pass").value;
var data = "username=" + encodeURIComponent(user) + "&password=" + encodeURIComponent(pass);
xhr.open("POST", "login.asp", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("result").innerHTML = xhr.responseText;
}
};
xhr.send(data);
}
</script>
</body>
</html>
ASP Backend (login.asp)
aspCopyEdit<%
Dim username, password
username = Request.Form("username")
password = Request.Form("password")
If username = "admin" And password = "1234" Then
Response.Write("Login successful!")
Else
Response.Write("Invalid credentials.")
End If
%>
Conclusion
AJAX is a powerful technique that enhances user experience by enabling real-time communication between the client and server. When paired with classic ASP, AJAX can be used for form submissions, dynamic content loading, user validations, and more—all without reloading the web page.
While classic ASP is older, combining it with AJAX can still make legacy applications more responsive and user-friendly. Understanding the difference between GET and POST requests helps in choosing the right method based on your application’s needs.