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 XMLHttpRequest or fetch().
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 name as 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 $_POST data 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();

JavaScript Handbook

AJAX with Server-Side Languages in JavaScript

AJAX with Server-Side Languages

Example: AJAX with PHP (POST Request)

Example: Using Fetch API with PHP (Modern Approach)

Example: AJAX with ASP