Jinsi ya Kutengeneza AJAX Requests kwa PHP Backend
💻 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
🚀 Unahitaji mfumo au website ya biashara?
Chagua huduma hapa chini kisha mteja bofya moja kwa moja kwenda kwenye ukurasa wa huduma au kuwasiliana nasi kwa WhatsApp.