PHP AJAX
AJAX, web geliştirmede önemli bir tekniktir çünkü bir web sayfasının, tüm sayfayı yeniden yüklemeden sunucuyla iletişim kurmasına olanak tanır. Bu, web sitelerinin daha hızlı, daha sorunsuz ve daha etkileşimli olmasını sağlar.
PHP, sunucu tarafında AJAX isteklerini almak, verileri işlemek, bir veritabanına okumak veya yazmak, JSON veya XML yanıtlarını döndürmek ve bir web sayfasının bölümlerini dinamik olarak güncellemek için kullanılabilir.
Bu makalede, öğrenme yolunda gösterilen ana PHP AJAX konuları açıklanmaktadır: AJAX giriş, AJAX PHP, AJAX veritabanı, AJAX XML, AJAX canlı arama ve AJAX anketi.
AJAX Giriş
AJAX anlamına gelirAsenkron JavaScript ve XML. XML eski AJAX uygulamalarında yaygın olarak kullanıldığından, ad XML’i içermektedir. Günümüzde JSON daha yaygındır ancak AJAX adı hala kullanılmaktadır.
AJAX'nun ana fikri basittir: JavaScript arka planda sunucuya bir istek gönderir, sunucu bu isteği işler ve JavaScript yanıtı kullanarak sayfanın bir bölümünü günceller.
AJAX olmadan, bir kullanıcı eylemi genellikle tam sayfanın yeniden yüklenmesini gerektirir. AJAX ile yalnızca gerekli veriler yüklenir veya güncellenir.
Temel bir AJAX iş akışı şuna benzer:
Kullanıcı, arama kutusuna yazmak veya bir düğmeye tıklamak gibi bir eylem gerçekleştirir.
JavaScript, PHP dosyasına bir istek gönderir.
PHP isteği alır ve işler.
PHP, metin, JSON, HTML veya XML gibi bir yanıt döndürür.
JavaScript yanıtı alır ve sayfayı yenilemeden günceller.
AJAX genellikle canlı arama, form gönderimi, yorumlar, bildirimler, oylama sistemleri, gösterge tabloları, filtreleme, sayfalandırma ve daha fazla içerik yükleme için kullanılır.
AJAX Neden Faydalıdır?
AJAX, gereksiz sayfa yeniden yüklemelerini azalttığı için kullanıcı deneyimini geliştirir. Web sitesinin statik sayfalardan oluşan bir koleksiyon yerine daha çok bir uygulama gibi hissetmesini sağlar.
Örneğin, bir arama kutusu, kullanıcı yazarken sonuçları gösterebilir. Bir form, sayfadan ayrılmadan veri gönderebilir ve bir başarı mesajı gösterebilir. Bir kontrol paneli arka planda istatistikleri yenileyebilir.
AJAX faydalıdır çünkü şunları yapabilir:
Tüm sayfayı yeniden yüklemeden sayfanın bir kısmını güncelleyin.
Verileri arka planda sunucuya gönderin.
Verileri yalnızca gerektiğinde yükleyin.
Hızı ve etkileşimi artırın.
Formları ve arama özelliklerini daha sorunsuz hale getirin.
Gereksiz sunucu tarafından oluşturulan sayfa yeniden yüklemelerini azaltın.
Modern web geliştirmede, AJAX genellikle şu şekilde uygulanır:getir()API veya Axios gibi kütüphaneler. Daha eski örnekler kullanılabilirXML HttpRequest.
AJAX PHP
PHP, tıpkı normal form istekleri gibi AJAX isteklerini alabilir. Aradaki fark, tarayıcının yeni bir sayfa yüklemesi yerine isteğin arka planda JavaScript tarafından gönderilmesidir.
Aşağıdaki örnek, fetch kullanarak bir PHP dosyasına AJAX isteği gönderen basit bir HTML düğmesini gösterir.
<button id="loadMessage">Load Message</button>
<div id="result"></div>
<script>
document.getElementById("loadMessage").addEventListener("click", function () {
fetch("message.php")
.then(function (response) {
return response.text();
})
.then(function (data) {
document.getElementById("result").innerHTML = data;
});
});
</script>PHP dosyası basit bir yanıt döndürebilir.
<?php
echo "Hello from PHP AJAX!";
?>Kullanıcı düğmeye tıkladığında, JavaScript şu adrese bir istek gönderir:mesaj. php. PHP mesajı döndürür ve JavaScript bunu sayfanın içinde görüntüler.
AJAX ayrıca sorgu parametrelerini veya POST isteklerini kullanarak PHP'ya veri gönderebilir.
<input type="text" id="name" placeholder="Enter your name">
<button id="sendName">Send</button>
<div id="response"></div>
<script>
document.getElementById("sendName").addEventListener("click", function () {
const name = document.getElementById("name").value;
fetch("greet.php", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: "name=" + encodeURIComponent(name)
})
.then(response => response.text())
.then(data => {
document.getElementById("response").innerHTML = data;
});
});
</script>PHP dosyası gönderilen değeri şunu kullanarak okuyabilir:$_POST.
<?php
$name = trim($_POST["name"] ?? "");
if ($name === "") {
echo "Please enter your name.";
} else {
echo "Hello, " . htmlspecialchars($name, ENT_QUOTES, "UTF-8");
}
?>Bu örnek, AJAX ve PHP’nin birlikte nasıl çalıştığını gösterir. JavaScript isteği gönderir, PHP verileri işler ve JavaScript sonucu görüntüler.
JSON’ı PHP’den döndürme
AJAX orijinal olarak XML kullanmış olsa da, JavaScript'da çalışmak daha kolay olduğundan modern uygulamalar genellikle JSON değerini döndürür.
PHP, kullanarak JSON’ı döndürebilirjson_encode()ve doğru içerik türü başlığı.
<?php
header("Content-Type: application/json");
$response = [
"success" => true,
"message" => "Data loaded successfully.",
"items" => ["PHP", "AJAX", "MySQL"]
];
echo json_encode($response);
?>JavaScript, kullanarak JSON yanıtını okuyabiliryanıt. json().
<script>
fetch("data.php")
.then(response => response.json())
.then(data => {
console.log(data.message);
console.log(data.items);
});
</script>JSON yanıtları APIs'da, kontrol panellerinde, dinamik formlarda, arama önerilerinde ve tek sayfalı etkileşimlerde yaygın olarak kullanılır.
AJAX Veritabanı
AJAX, sayfayı yenilemeden veritabanı verilerini yüklemek veya kaydetmek için PHP ve MySQL ile birlikte kullanılabilir. Bu, canlı arama, filtreleme, yorumlar, bildirimler, beğeniler, oylar ve yönetici panelleri için kullanışlıdır.
Örneğin, JavaScript, PHP'ya bir arama anahtar sözcüğü gönderebilir ve PHP veritabanını sorgulayabilir ve eşleşen sonuçları döndürebilir.
Aşağıdaki örnek, bir PHP dosyasına bir anahtar kelime göndermektedir.
<input type="text" id="search" placeholder="Search users">
<div id="results"></div>
<script>
document.getElementById("search").addEventListener("input", function () {
const keyword = this.value;
fetch("search-users.php?q=" + encodeURIComponent(keyword))
.then(response => response.json())
.then(users => {
let html = "";
users.forEach(function (user) {
html += "<p>" + user.name + " - " + user.email + "</p>";
});
document.getElementById("results").innerHTML = html;
});
});
</script>PHP dosyası anahtar sözcüğü alabilir, hazırlanmış bir ifadeyi kullanarak veritabanını sorgulayabilir ve JSON’ı döndürebilir.
<?php
header("Content-Type: application/json");
$pdo = new PDO(
"mysql:host=localhost;dbname=php_learning;charset=utf8mb4",
"root",
""
);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$q = trim($_GET["q"] ?? "");
$statement = $pdo->prepare("
SELECT id, name, email
FROM users
WHERE name LIKE :keyword OR email LIKE :keyword
ORDER BY name ASC
LIMIT 10
");
$statement->execute([
"keyword" => "%" . $q . "%"
]);
$users = $statement->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($users);
?>Bu örnek, AJAX, PHP ve MySQL'nun birlikte nasıl çalışabileceğini gösterir. Kullanıcı bir anahtar kelime yazar, JavaScript bunu PHP'ya gönderir, PHP veritabanında arama yapar ve sayfa, sonuçları anında görüntüler.
Arama anahtar kelimesi kullanıcı girişinden geldiğinden, hazırlanan ifadeler burada önemlidir. Kullanıcı girişinin doğrudan SQL'ya yerleştirilmesi, SQL ekleme risklerine neden olabilir.
AJAX XML
AJAX ayrıca XML verilerini de yükleyebilir. JSON günümüzde daha yaygın olmasına rağmen, XML hala site haritalarında, RSS yayınlarında, SOAP hizmetlerinde, eski sistemlerde ve bazı harici entegrasyonlarda kullanılmaktadır.
Bir XML dosyası şöyle görünebilir:
<articles>
<article>
<title>PHP AJAX Intro</title>
<category>PHP</category>
</article>
<article>
<title>AJAX Database</title>
<category>MySQL</category>
</article>
</articles>JavaScript bu XML dosyasını getir kullanarak yükleyebilir ve DOMParser kullanarak ayrıştırabilir.
<div id="xmlResults"></div>
<script>
fetch("articles.xml")
.then(response => response.text())
.then(xmlText => {
const parser = new DOMParser();
const xml = parser.parseFromString(xmlText, "application/xml");
const articles = xml.getElementsByTagName("article");
let html = "";
for (let i = 0; i < articles.length; i++) {
const title = articles[i].getElementsByTagName("title")[0].textContent;
const category = articles[i].getElementsByTagName("category")[0].textContent;
html += "<p>" + title + " - " + category + "</p>";
}
document.getElementById("xmlResults").innerHTML = html;
});
</script>PHP ayrıca dinamik olarak XML oluşturabilir ve onu AJAX'ya döndürebilir.
<?php
header("Content-Type: application/xml; charset=UTF-8");
echo '<articles>';
echo '<article>';
echo '<title>PHP AJAX XML</title>';
echo '<category>PHP</category>';
echo '</article>';
echo '</articles>';
?>AJAX XML, hala XML kullanan sistemlerle entegrasyon yaparken veya yayınlar ve site haritaları gibi XML belgelerini okurken kullanışlıdır.
AJAX Canlı Arama
Canlı arama en yaygın AJAX örneklerinden biridir. Kullanıcıların yazarken, gönder düğmesine basmadan veya sayfayı yeniden yüklemeden arama sonuçlarını görmelerine olanak tanır.
Canlı arama özelliği genellikle şu şekilde çalışır:
Kullanıcı bir arama girişi yazar.
JavaScript giriş olayını dinler.
AJAX, geçerli anahtar sözcüğü PHP'ya gönderir.
PHP bir diziden, dosyadan, API'dan veya veritabanından veri arar.
PHP eşleşen sonuçları döndürür.
JavaScript sonuçları girişin altında görüntüler.
Aşağıdaki örnekte basitlik amacıyla bir PHP dizisi kullanılmaktadır.
<input type="text" id="liveSearch" placeholder="Search topics">
<div id="liveResults"></div>
<script>
document.getElementById("liveSearch").addEventListener("input", function () {
const keyword = this.value;
if (keyword.length === 0) {
document.getElementById("liveResults").innerHTML = "";
return;
}
fetch("live-search.php?q=" + encodeURIComponent(keyword))
.then(response => response.text())
.then(data => {
document.getElementById("liveResults").innerHTML = data;
});
});
</script>PHP dosyası basit bir dizi içinde arama yapabilir ve HTML değerini döndürebilir.
<?php
$topics = [
"PHP Basics",
"PHP Forms",
"PHP OOP",
"PHP MySQL",
"PHP AJAX",
"Laravel Framework",
"JavaScript Fetch API"
];
$q = strtolower(trim($_GET["q"] ?? ""));
$results = [];
if ($q !== "") {
foreach ($topics as $topic) {
if (str_contains(strtolower($topic), $q)) {
$results[] = $topic;
}
}
}
if (count($results) === 0) {
echo "<p>No results found.</p>";
} else {
foreach ($results as $result) {
echo "<p>" . htmlspecialchars($result, ENT_QUOTES, "UTF-8") . "</p>";
}
}
?>Gerçek uygulamalarda daha iyi performans için canlı aramanın çok fazla istek göndermekten kaçınması gerekir. Geliştiriciler sıklıkla, kullanıcı isteği göndermeden önce yazmayı bıraktıktan sonra kısa bir gecikme bekleyen geri dönme yöntemini kullanır.
<script>
let timer;
document.getElementById("liveSearch").addEventListener("input", function () {
clearTimeout(timer);
const keyword = this.value;
timer = setTimeout(function () {
fetch("live-search.php?q=" + encodeURIComponent(keyword))
.then(response => response.text())
.then(data => {
document.getElementById("liveResults").innerHTML = data;
});
}, 300);
});
</script>Debounce, sunucu yükünün azaltılmasına yardımcı olur ve özelliği daha verimli hale getirir.
AJAX Anketi
AJAX anket sistemi, kullanıcıların sayfayı yenilemeden oy vermesine ve güncellenmiş sonuçları görmesine olanak tanır. Bu, anketler, oylama araçları, geri bildirim sistemleri ve basit etkileşimli içerik için kullanışlıdır.
Bir anket genellikle bir soru, birden fazla seçenek, bir oylama düğmesi ve bir sonuç alanı içerir.
<h3>Which language do you like most?</h3>
<label>
<input type="radio" name="vote" value="PHP"> PHP
</label>
<label>
<input type="radio" name="vote" value="JavaScript"> JavaScript
</label>
<label>
<input type="radio" name="vote" value="Python"> Python
</label>
<button id="voteButton">Vote</button>
<div id="pollResults"></div>
<script>
document.getElementById("voteButton").addEventListener("click", function () {
const selected = document.querySelector("input[name='vote']:checked");
if (!selected) {
document.getElementById("pollResults").innerHTML = "Please select an option.";
return;
}
fetch("poll.php", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: "vote=" + encodeURIComponent(selected.value)
})
.then(response => response.text())
.then(data => {
document.getElementById("pollResults").innerHTML = data;
});
});
</script>PHP dosyası seçilen oyu alabilir ve sonucu güncelleyebilir. Basit bir örnek olarak oylar JSON dosyasında saklanabilir.
<?php
$allowedVotes = ["PHP", "JavaScript", "Python"];
$vote = $_POST["vote"] ?? "";
if (!in_array($vote, $allowedVotes)) {
echo "Invalid vote.";
exit;
}
$file = "poll-results.json";
if (!file_exists($file)) {
file_put_contents($file, json_encode([
"PHP" => 0,
"JavaScript" => 0,
"Python" => 0
]));
}
$results = json_decode(file_get_contents($file), true);
$results[$vote]++;
file_put_contents($file, json_encode($results));
foreach ($results as $option => $count) {
echo "<p>" . htmlspecialchars($option, ENT_QUOTES, "UTF-8") . ": " . $count . " votes</p>";
}
?>Bu örnek, temel AJAX yoklama fikrini göstermektedir. Gerçek bir projede anket sonuçları genellikle bir veritabanında saklanır ve sistem oturumları, oturum açma hesaplarını, çerezleri veya IP tabanlı limitleri kullanarak tekrarlanan oylamayı engelleyebilir.
AJAX Hata İşleme
AJAX istekleri birçok nedenden dolayı başarısız olabilir. PHP dosyası bir hata döndürebilir, ağ başarısız olabilir, sunucu kullanılamıyor olabilir veya yanıt beklenen biçimde olmayabilir.
JavaScript, her isteğin başarılı olacağını varsaymak yerine hataları ele almalıdır.
<script>
fetch("data.php")
.then(response => {
if (!response.ok) {
throw new Error("Request failed.");
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
</script>PHP ayrıca başarıyı veya başarısızlığı gösteren net JSON yanıtlarını da döndürebilir.
<?php
header("Content-Type: application/json");
try {
echo json_encode([
"success" => true,
"message" => "Request completed successfully."
]);
} catch (Exception $exception) {
echo json_encode([
"success" => false,
"message" => "Something went wrong."
]);
}
?>İyi hata işleme, AJAX özelliklerinin daha güvenilir olmasını ve hata ayıklamanın daha kolay olmasını sağlar.
PHP ile AJAX için Güvenlik Notları
AJAX istekleri hâlâ normal HTTP istekleridir. Bu, normal form gönderimleri gibi doğrulanmaları ve korunmaları gerektiği anlamına gelir.
Önemli güvenlik uygulamaları şunları içerir:
AJAX aracılığıyla alınan tüm verileri doğrulayın.
Veritabanı sorguları için prepared statements kullanın.
Kullanıcı tarafından oluşturulan verileri görüntülemeden önce çıktıdan çıkın.
Hassas işlemler için CSRF korumasını kullanın.
Gizli alanlara veya yalnızca JavaScript doğrulamasına güvenmeyin.
Verileri güncellemeden veya silmeden önce kullanıcı izinlerini kontrol edin.
Sunucu ayrıntılarını açığa çıkarmadan güvenli hata mesajları döndürün.
Canlı arama ve anket sistemleri için istek sıklığını sınırlayın.
AJAX kullanıcı deneyimini geliştirir ancak arka uç doğrulama ve güvenliğin yerini almaz. Sunucu her zaman son kararı vermelidir.
AJAX ve PHP Gerçek Projelerde Nasıl Birlikte Çalışır?
Gerçek PHP uygulamalarında sayfaları daha etkileşimli hale getirmek için AJAX kullanılır. Bir kontrol paneli, istatistikleri yenilemek için AJAX'yu kullanabilir. Bir blog daha fazla gönderi yüklemek için AJAX kullanabilir. Bir yönetici paneli durum değerlerini güncellemek için AJAX'yu kullanabilir. Bir profil sayfası verileri yüklemek veya doğrulamak için AJAX kullanabilir.
AJAX'nun gerçek dünyadaki yaygın kullanım örnekleri şunları içerir:
Canlı arama önerileri.
Sayfa yeniden yüklenmeden iletişim formu gönderimi.
Daha fazla gönderi veya ürün yükleniyor.
Tabloları ve listeleri filtreleme.
Bildirim sayaçları güncelleniyor.
Oylama ve anket sistemleri.
Kullanıcı adı veya e-posta kullanılabilirliği kontrol ediliyor.
Kullanıcı tercihlerini kaydetme.
PHP temiz JSON yanıtları döndürdüğünde ve JavaScript bunları doğru şekilde işlediğinde, AJAX sorunsuz ve modern web arayüzleri oluşturmanın güçlü bir yolu haline gelir.
Sonuç
PHP ile AJAX, web sayfalarının tüm sayfayı yenilemeden arka planda sunucuyla iletişim kurmasına olanak tanır. Bu, web sitelerini daha dinamik, duyarlı ve kullanıcı dostu hale getirir.
PHP AJAX'nun ana konuları arasında AJAX girişi, PHP'ya istek gönderme, veritabanlarıyla çalışma, XML verilerini yükleme, canlı arama oluşturma ve anket sistemleri oluşturma yer alır.
Bu kavramları anladıktan sonraki adım, canlı arama kutusu, iletişim formu, veritabanı filtresi, oylama sistemi ve JSON API yanıtı gibi küçük AJAX projeleri oluşturarak pratik yapmaktır. Bu projeler, PHP arka uç mantığını etkileşimli ön uç davranışıyla birleştirmeye yardımcı olacaktır.
