AJAX with Server-Side Languages
AJAX allows you to send requests to a server without reloading the page, and server-side languages like PHP or ASP handle these requests and return a response.
Basic Flow
- Client-side: JavaScript sends an AJAX request using
XMLHttpRequestorfetch(). - Server-side: PHP, ASP, or another server language processes the request.
- Response: The server sends back data (text, JSON, XML) which the browser uses dynamically.
Example: AJAX with PHP (GET Request)
PHP file (get_data.php):
<?php
$name = $_GET['name'] ?? 'Guest';
echo "Hello, " . htmlspecialchars($name);
?>
HTML + AJAX (GET):
<input type="text" id="name" placeholder="Enter name">
<button onclick="sendRequest()">Send</button>
<p id="output"></p>
<script>
function sendRequest() {
const name = document.getElementById("name").value;
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if(xhttp.readyState === 4 && xhttp.status === 200) {
document.getElementById("output").innerHTML = xhttp.responseText;
}
};
// Send GET request with query parameter
xhttp.open("GET", "get_data.php?name=" + encodeURIComponent(name), true);
xhttp.send();
}
</script>
How it works:
- User enters a name.
- JavaScript sends a GET request with
nameas a query parameter. - PHP receives
$_GET['name']and returns a greeting. - Response is displayed dynamically in
<p id="output">.
Example: AJAX with PHP (POST Request)
PHP file (post_data.php):
<?php
$name = $_POST['name'] ?? 'Guest';
$age = $_POST['age'] ?? 0;
echo "Name: " . htmlspecialchars($name) . ", Age: " . intval($age);
?>
HTML + AJAX (POST):
<input type="text" id="name" placeholder="Name">
<input type="number" id="age" placeholder="Age">
<button onclick="sendPost()">Submit</button>
<p id="output"></p>
<script>
function sendPost() {
const name = document.getElementById("name").value;
const age = document.getElementById("age").value;
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if(xhttp.readyState === 4 && xhttp.status === 200) {
document.getElementById("output").innerHTML = xhttp.responseText;
}
};
xhttp.open("POST", "post_data.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name=" + encodeURIComponent(name) + "&age=" + encodeURIComponent(age));
}
</script>
How it works:
- Sends data securely in POST body.
- PHP reads
$_POSTdata and returns a formatted string. - Browser displays the server response without reloading the page.
Example: Using Fetch API with PHP (Modern Approach)
<input type="text" id="city" placeholder="Enter city">
<button onclick="getWeather()">Get Weather</button>
<p id="output"></p>
<script>
function getWeather() {
const city = document.getElementById("city").value;
fetch("weather.php", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: "city=" + encodeURIComponent(city)
})
.then(response => response.text())
.then(data => document.getElementById("output").innerHTML = data)
.catch(err => console.error("Error:", err));
}
</script>
PHP file (weather.php):
<?php
$city = $_POST['city'] ?? 'Unknown';
echo "Weather info for: " . htmlspecialchars($city);
?>
Example: AJAX with ASP
ASP file (data.asp):
<%
Dim name
name = Request.QueryString("name")
Response.Write "Hello, " & Server.HTMLEncode(name)
%>
AJAX (GET request to ASP):
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if(xhttp.readyState === 4 && xhttp.status === 200) {
console.log(xhttp.responseText);
}
};
xhttp.open("GET", "data.asp?name=John", true);
xhttp.send();