PHP & AJAX Introduction

⚡ PHP & AJAX Introduction

AJAX (Asynchronous JavaScript and XML) is a technique used to update parts of a web page without reloading the whole page. When combined with PHP, it allows dynamic content fetching and server communication asynchronously.

1️⃣ What is AJAX?

AJAX is not a programming language; it’s a combination of:
- JavaScript – for client-side scripting
- XMLHttpRequest (XHR) – to communicate with the server
- PHP (or any server-side language) – to process data
- JSON or XML – for data exchange
Key Feature: Only the part of the page is updated, not the entire page.

2️⃣ How AJAX Works with PHP

User action triggers JavaScript function (e.g., button click).
JavaScript sends asynchronous request to PHP script using XHR or Fetch API.
PHP script processes data and returns response (text, HTML, or JSON).
JavaScript updates the web page dynamically without reloading.

3️⃣ Simple AJAX Example (Using `XMLHttpRequest`)

HTML + JavaScript:

<!DOCTYPE html>
<html>
<head>
<title>AJAX PHP Example</title>
<script>
function loadData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("result").innerHTML = this.responseText;
}
};
xhttp.open("GET", "data.php", true);
xhttp.send();
}
</script>
</head>
<body>
<h2>AJAX PHP Example</h2>
<button onclick="loadData()">Click to Load Data</button>
<div id="result"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>AJAX PHP Example</title>

function loadData() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("result").innerHTML = this.responseText;

}

};

xhttp.open("GET", "data.php", true);

xhttp.send();

}

</script>

</head>

<body>

<h2>AJAX PHP Example</h2>

<button onclick="loadData()">Click to Load Data</button>

</body>

</html>

PHP Script (data.php):

✅ When the user clicks the button, only the div#result updates.

4️⃣ AJAX Using JSON (Recommended for Dynamic Data)

PHP (data.php):

JavaScript:

function loadData() {
fetch('data.php')
.then(response => response.json())
.then(data => {
document.getElementById('result').innerHTML =
`Name: ${data.name}<br>Email: ${data.email}<br>Age: ${data.age}`;
})
.catch(error => console.error('Error:', error));
}

function loadData() {

fetch('data.php')

.then(response => response.json())

.then(data => {

document.getElementById('result').innerHTML =

`Name: ${data.name}<br>Email: ${data.email}<br>Age: ${data.age}`;

})

.catch(error => console.error('Error:', error));

}

✅ Using JSON is easier to work with structured data.

5️⃣ Key Points

AJAX allows partial page updates without full reload.
Works with XHR or modern Fetch API.
PHP handles server-side processing and returns data.
Data can be returned as plain text, HTML, XML, or JSON.
AJAX improves user experience and performance of web apps.

PHP & AJAX Introduction