💻 Full Working Code
📁 index.html
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<title>AJAX Request kwa PHP Backend - Faulink</title>
<style>
body {
font-family: Arial;
background: #f7f7f7;
text-align: center;
padding: 40px;
}
button {
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#result {
margin-top: 30px;
background: white;
padding: 20px;
border-radius: 10px;
display: inline-block;
}
</style>
</head>
<body>

<h2>🔄 Jifunze AJAX Request kwa PHP Backend</h2>
<p>Bonyeza kitufe kuona data ikipokelewa kutoka PHP bila refresh!</p>

<button id="btn">Pata Data</button>
<div id="result">Hakuna data bado...</div>

<script>
document.getElementById("btn").onclick = function() {
let xhr = new XMLHttpRequest();
xhr.open("GET", "server.php", true);
xhr.onload = function() {
if (this.status == 200) {
document.getElementById("result").innerHTML = this.responseText;
}
};
xhr.send();
};
</script>

</body>
</html>
📁 server.php
<?php
date_default_timezone_set('Africa/Dar_es_Salaam');
$time = date("H:i:s");
echo "✅ Data imepokelewa kwa mafanikio saa: $time";
?>
________________________________________
🎥 YouTube Description
Leo tunajifunza jinsi ya kutumia AJAX kuwasiliana na PHP backend bila kubadilisha ukurasa mzima.
Hii ni mbinu muhimu sana kwenye mifumo ya kisasa kama dashboards, live updates, na API communication.
Utaona jinsi ya kutumia XMLHttpRequest() kwa hatua rahisi sana.
🔔 Subscribe kwenye Faulink Channel kwa masomo zaidi ya PHP, MySQL, JavaScript, na Web Development!
________________________________________
🏷️ Hashtags
#AJAX #PHP #JavaScript #Faulink #WebDevelopment #Coding #LearnCoding #XMLHttpRequest #WebDesign