Chapter 28: AJAX ASP
AJAX + ASP (Active Server Pages / ASP Classic) example, explained as if I’m sitting next to you — a patient teacher who wants you to really understand every part.
We will go extremely slowly, step by step, with complete explanations, reasoning, common mistakes, security notes, and several complete runnable examples.
Before we start – what you need
To run these examples you need:
- Windows computer
- IIS (Internet Information Services) enabled (Control Panel → Programs → Turn Windows features on or off → Internet Information Services)
- Classic ASP support enabled (Inside IIS → World Wide Web Services → Application Development Features → ASP)
- Folder with write permission if you want to test file operations (not needed for basic examples)
Recommended folder structure:
|
0 1 2 3 4 5 6 7 8 9 10 |
C:\inetpub\wwwroot\ajax-asp-demo\ ├── index.html ← our frontend page ├── get-data.asp ← simple GET example ├── post-login.asp ← POST example ├── search.asp ← live search / autocomplete style |
Access via browser: http://localhost/ajax-asp-demo/index.html
Example 1 – Basic GET Request (fetch data from ASP)
File 1: index.html (the frontend – HTML + JavaScript)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AJAX + ASP Classic – GET Example</title> <style> body { font-family: "Segoe UI", Arial, sans-serif; margin: 40px; background: #f8f9fa; line-height: 1.6; color: #333; } h1 { color: #1a3c5e; } button { padding: 12px 28px; font-size: 16px; margin: 10px 15px 10px 0; cursor: pointer; background: #0066cc; color: white; border: none; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.15); } button:hover { background: #0052a3; } #result { margin-top: 30px; padding: 25px; background: white; border: 1px solid #d1d5db; border-radius: 8px; min-height: 140px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); white-space: pre-wrap; } .loading { color: #6b7280; font-style: italic; } .error { color: #dc2626; font-weight: bold; } </style> </head> <body> <h1>AJAX + Classic ASP – GET Example</h1> <p>Click any button — only the result area updates (no full page reload)</p> <button onclick="fetchData('hello')">1. Say Hello</button> <button onclick="fetchData('time')">2. Get Server Time</button> <button onclick="fetchData('random')">3. Random Number (1–100)</button> <div id="result">Click any button above to see result...</div> <script> function fetchData(action) { const resultDiv = document.getElementById('result'); resultDiv.className = 'loading'; resultDiv.innerHTML = 'Loading... Please wait...'; const xhr = new XMLHttpRequest(); // Build URL with query string parameter const url = `get-data.asp?action=${encodeURIComponent(action)}`; xhr.open("GET", url, true); xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { resultDiv.className = ''; resultDiv.innerHTML = ` <strong style="color:#166534">Server Response:</strong><br><br> <pre style="background:#f1f5f9; padding:16px; border-radius:6px; margin:0;"> ${xhr.responseText} </pre> `; } else { resultDiv.className = 'error'; resultDiv.innerHTML = ` Server error: ${xhr.status} ${xhr.statusText}<br> ${xhr.responseText ? '<br>Message:<br>' + xhr.responseText : ''} `; } }; xhr.onerror = function() { resultDiv.className = 'error'; resultDiv.innerHTML = 'Network error – cannot reach the server'; }; xhr.send(); } </script> </body> </html> |
File 2: get-data.asp (the backend – Classic ASP)
<%@ Language=VBScript %>
<%
Option Explicit
Response.Buffer = True
Response.ContentType = "text/plain"
Response.CharSet = "utf-8"
' Prevent caching so we always get fresh data
Response.AddHeader "Cache-Control", "no-cache, no-store, must-revalidate"
Response.AddHeader "Pragma", "no-cache"
Response.AddHeader "Expires", "0"
Dim action
action = Trim(Request.QueryString("action"))
Select Case LCase(action)
Case "hello"
Response.Write "Hello from Classic ASP!" & vbCrLf
Response.Write "This message was sent via AJAX GET request." & vbCrLf
Response.Write "Current server time: " & Now() & vbCrLf
Case "time"
Response.Write "Current server date & time:" & vbCrLf
Response.Write Now() & vbCrLf
Response.Write "Server timezone: " & GetTimeZoneName()
Case "random"
Randomize
Dim num : num = Int((100 * Rnd) + 1)
Response.Write "Random number (1-100): " & num & vbCrLf
Response.Write "Generated at: " & Time() & vbCrLf
Case Else
Response.Status = "400 Bad Request"
Response.Write "Invalid or missing 'action' parameter." & vbCrLf
Response.Write "Valid values: hello, time, random"
End Select
' Small helper function
Function GetTimeZoneName()
GetTimeZoneName = "Server time zone not directly available in Classic ASP"
' In real project you would use registry or external component
End Function
%>
How to run Example 1
- Save both files in the same folder inside IIS (e.g. C:\inetpub\wwwroot\ajax-asp-demo\)
- Make sure Classic ASP is enabled in IIS
- Open browser: http://localhost/ajax-asp-demo/index.html
- Click the buttons → enjoy!
Example 2 – POST Request (Sending Form Data to ASP)
File: index-post.html
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AJAX POST + Classic ASP</title> <style> body { font-family: Arial; margin: 40px; } form { max-width: 500px; } label { display: block; margin: 18px 0 6px; font-weight: bold; } input, textarea { width: 100%; padding: 10px; font-size: 16px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; } button { margin-top: 25px; padding: 12px 35px; background: #059669; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; } #result { margin-top: 40px; padding: 25px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px; min-height: 120px; } </style> </head> <body> <h1>AJAX POST to Classic ASP – Contact Form</h1> <form id="contactForm"> <label for="name">Your Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="message">Your Message:</label> <textarea id="message" name="message" rows="5" required></textarea> <button type="submit">Send Message</button> </form> <div id="result"></div> <script> document.getElementById('contactForm').addEventListener('submit', function(e) { e.preventDefault(); // Prevent normal form submission const resultDiv = document.getElementById('result'); resultDiv.innerHTML = '<strong>Sending your message...</strong>'; const formData = new FormData(this); const xhr = new XMLHttpRequest(); xhr.open('POST', 'post-contact.asp', true); xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { resultDiv.innerHTML = ` <strong style="color:#065f46">Message Received!</strong><br><br> ${xhr.responseText.replace(/\n/g, '<br>')} `; } else { resultDiv.innerHTML = ` <strong style="color:#991b1b">Error ${xhr.status}</strong><br> ${xhr.responseText || 'Server error – please try again'} `; } }; xhr.onerror = function() { resultDiv.innerHTML = '<strong style="color:#991b1b">Network error</strong><br>Cannot connect to server'; }; xhr.send(formData); }); </script> </body> </html> |
File: post-contact.asp
<%@ Language=VBScript %>
<%
Option Explicit
Response.Buffer = True
Response.ContentType = "text/plain"
Response.CharSet = "utf-8"
Dim name, email, message
name = Trim(Request.Form("name"))
email = Trim(Request.Form("email"))
message = Trim(Request.Form("message"))
If Len(name) = 0 Or Len(email) = 0 Or Len(message) = 0 Then
Response.Status = "400 Bad Request"
Response.Write "Error: All fields are required."
Response.End
End If
If InStr(email, "@") = 0 Or InStr(email, ".") = 0 Then
Response.Status = "400 Bad Request"
Response.Write "Error: Invalid email address."
Response.End
End If
' In real application:
' - Save to database
' - Send email
' - Log activity
' Here we just simulate success with a delay
Dim i : For i = 1 To 800000 : Next ' fake 0.5–1 sec processing time
Response.Write "Thank you, " & Server.HTMLEncode(name) & "!" & vbCrLf & vbCrLf
Response.Write "We received your message:" & vbCrLf
Response.Write Server.HTMLEncode(message) & vbCrLf & vbCrLf
Response.Write "Email: " & Server.HTMLEncode(email) & vbCrLf
Response.Write "Received at: " & Now()
%>
Summary – What we covered
- How to send GET requests with query parameters
- How to send POST requests with form data (FormData)
- How to handle loading states and errors
- How Classic ASP receives GET (QueryString) and POST (Form) data
- Basic security reminders (trim, encode output)
- Real-world feel of AJAX + ASP Classic (still used in many legacy government, banking, ERP systems in India)
Next topics you may want:
- AJAX + ASP returning JSON (modern style)
- Live search / autocomplete with AJAX + ASP
- File upload using AJAX + ASP
- Loading spinner + disable button during request
- Validation (client-side + server-side)
Tell me which one you want to practice next! 😊
