Örnekle PHP Ajax Eğitimi
Fiona Brown
⚡ Akıllı Özet
PHP'de Ajax, bir web sayfasının sunucuyla küçük miktarda veri alışverişi yapmasına ve sayfanın tamamını yeniden yüklemeden sayfanın bir bölümünü güncellemesine olanak tanır. Bu kılavuz, klasik XMLHttpRequest yaklaşımını ve modern Fetch API alternatifini açıklayarak canlı bir çerçeve araması oluşturmaktadır.
Ajax nedir?
AJAX Asynchronous (Asenkron) anlamına gelir. JavaSenaryo XML, sunucu ve istemci arasındaki etkileşimleri azaltan bir teknolojidir. Bunu, web sayfasının tamamını değil, yalnızca bir bölümünü güncelleyerek yapar. Asenkron etkileşimler şu şekilde başlatılır: JavaAJAX betiğinin amacı, sayfa yenilenmesine gerek kalmadan sunucuyla küçük miktarda veri alışverişi yapmaktır.
JavaSenaryo İstemci tarafında çalışan bir betik dilidir. Destekleyen web tarayıcıları tarafından istemci tarafında yürütülür. JavaSenaryo. JavaKomut dosyası kodu yalnızca şu tarayıcılarda çalışır: JavaKomut dosyası etkinleştirildi.
XML XML, Genişletilebilir İşaretleme Dili'nin (Extensible Markup Language) kısaltmasıdır. Hem insan hem de makine tarafından okunabilir formatlarda mesajları kodlamak için kullanılır. HTML'ye benzer ancak kendi özel etiketlerinizi oluşturmanıza olanak tanır. XML hakkında daha fazla bilgi için ilgili makaleye bakın. XML.
Neden AJAX'ı kullanmalısınız?
- Bu, gelişmeye olanak tanır.ping Masaüstü uygulamaları gibi zengin, etkileşimli web uygulamaları.
- Doğrulama, kullanıcı formu doldurmaya devam ederken, formu göndermeden de gerçekleştirilebilir. Bu, otomatik tamamlama kullanılarak sağlanabilir. Kullanıcının yazdığı kelimeler işlenmek üzere sunucuya gönderilir ve sunucu, kullanıcının girdiği kelimelerle eşleşen anahtar kelimelerle yanıt verir.
- Bu özellik, bir açılır kutunun değerine bağlı olarak başka bir açılır kutunun içeriğini doldurmak için kullanılabilir.
- Veriler sunucudan alınabilir ve sayfanın tamamı yüklenmeden yalnızca belirli bir bölümü güncellenebilir. Bu, aşağıdaki gibi şeyleri yükleyen web sayfası bölümleri için çok kullanışlıdır:
- Tweetler
- Yorumlar
- Siteyi ziyaret eden kullanıcılar ve benzeri canlı veriler.
PHP Ajax uygulaması nasıl oluşturulur?
Kullanıcıların popüler PHP MVC çerçevelerini aramasına olanak tanıyan basit bir uygulama oluşturacağız.
Uygulamamızda, kullanıcıların çerçevelerin adlarını yazabileceği bir metin kutusu bulunacaktır.
Ardından AJAX kullanarak eşleşme arayacağız ve arama formunun hemen altına çerçevenin tam adını göstereceğiz.
Adım 1) Dizin sayfasını oluşturma
index.php
<html> <head> <title>PHP MVC Frameworks - Search Engine</title> <script type="text/javascript" src="auto_complete.js"></script> </head> <body> <h2>PHP MVC Frameworks - Search Engine</h2> <p><b>Type the first letter of the PHP MVC Framework</b></p> <form method="POST" action="index.php"> <p><input type="text" size="40" id="txtHint" onkeyup="showName(this.value)"></p> </form> <p>Matches: <span id="txtName"></span></p> </body> </html>
İŞTE,
- “onkeyup=”showName(this.value)”” komutu çalıştırır JavaKomut dosyasındaki `showName` fonksiyonu, metin kutusuna her tuşa basıldığında çalıştırılır. Bu özelliğe otomatik tamamlama denir.
Adım 2) Çerçeveler sayfasını oluşturma
çerçeveler.php
<?php $frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ; $name = $_GET["name"]; if (strlen($name) > 0) { $match = ""; for ($i = 0; $i < count($frameworks); $i++) { if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) { if ($match == "") { $match = $frameworks[$i]; } else { $match = $match . " , " . $frameworks[$i]; } } } } echo ($match == "") ? 'no match found' : $match; ?>
Adım 3) JS betiğini oluşturma
auto_complete.js
function showName(str){ if (str.length == 0){ // exit function if nothing has been typed in the textbox document.getElementById("txtName").innerHTML=""; // clear previous results return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById("txtName").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","frameworks.php?name="+str,true); xmlhttp.send(); }
İŞTE,
- “if (str.length == 0)” ifadesi, dizenin uzunluğunu kontrol eder. Eğer uzunluk 0 ise, komut dosyasının geri kalanı yürütülmez.
- “if (window.XMLHttpRequest)…” Internet Explorer 5 ve 6 sürümleri AJAX uygulaması için ActiveXObject kullanır. Chrome gibi diğer sürümler ve tarayıcılar ise farklı bir yöntem kullanır. Firefox XMLHttpRequest kullanın. Bu kod, uygulamamızın hem IE 5 ve 6'da hem de modern tarayıcılarda çalışmasını sağlar.
- “xmlhttp.onreadystatechange=function…” ifadesi, AJAX etkileşiminin tamamlanıp tamamlanmadığını ve durumun 200 olup olmadığını kontrol eder, ardından txtName alanını döndürülen sonuçlarla günceller.
Adım 4) PHP Ajax uygulamamızı test etme
index.php dosyasını phptuts/ajax klasörüne kaydettiğinizi varsayarak, aşağıdaki adrese gidin: URL http://localhost/phptuts/ajax/index.php
Metin kutusuna C harfini yazın. Aşağıdaki sonuçları alacaksınız.
Yukarıdaki örnek, AJAX kavramını ve bunun zengin, etkileşimli uygulamalar oluşturmamıza nasıl yardımcı olabileceğini göstermektedir.
Fetch API ile Modern AJAX
Yukarıdaki XMLHttpRequest nesnesi hala çalışıyor, ancak eski Internet Explorer için ActiveXObject dalına artık ihtiyaç yok. Modern tarayıcılar, aynı isteği çok daha az kodla yapan, vaat tabanlı Fetch API'sini sağlıyor.
function showName(str) { if (str.length === 0) { document.getElementById("txtName").innerHTML = ""; return; } fetch("frameworks.php?name=" + encodeURIComponent(str)) .then(response => response.text()) .then(text => { document.getElementById("txtName").innerHTML = text; }); }
Bu sürüm de aynı işi yapıyor: yazılan metni frameworks.php'ye gönderiyor ve yanıtı txtName span'ine yerleştiriyor. Ayrıca, girdiyi güvenli bir şekilde kaçırmak için encodeURIComponent kullanıyor ve hata işleme için bir catch bloğu kullanarak promise zincirini genişletmek kolay.
