Örnekli PHP Ajax Eğitimi

İçindekiler:

Anonim

Ajax nedir?

AJAX tam formu Eşzamansız JavaScript ve XML'dir. Sunucu ve istemci arasındaki etkileşimi azaltan bir teknolojidir. Bunu, tüm sayfa yerine bir web sayfasının yalnızca bir bölümünü güncelleyerek yapar. Asenkron etkileşimler JavaScript tarafından başlatılır. AJAX'ın amacı, sayfayı yenilemeden sunucu ile küçük miktarlarda veri alışverişi yapmaktır.

JavaScript , bir istemci tarafı kodlama dilidir. İstemci tarafında JavaScript'i destekleyen web tarayıcıları tarafından yürütülür. JavaScript kodu yalnızca JavaScript'in etkin olduğu tarayıcılarda çalışır.

XML , Extensible Markup Language'in kısaltmasıdır. Mesajları hem insan hem de makine tarafından okunabilir formatlarda kodlamak için kullanılır. HTML gibidir, ancak özel etiketlerinizi oluşturmanıza olanak tanır. XML hakkında daha fazla ayrıntı için XML ile ilgili makaleye bakın

AJAX neden kullanılıyor?

  • Tıpkı masaüstü uygulamaları gibi zengin etkileşimli web uygulamaları geliştirmeye izin verir.
  • Doğrulama, kullanıcı bir formu göndermeden doldururken yapılabilir. Bu, otomatik tamamlama kullanılarak elde edilebilir. Kullanıcının yazdığı sözcükler işlenmek üzere sunucuya gönderilir. Sunucu, kullanıcının girdikleriyle eşleşen anahtar kelimelerle yanıt verir.
  • Başka bir açılır kutunun değerine bağlı olarak bir açılır kutuyu doldurmak için kullanılabilir
  • Veriler sunucudan alınabilir ve sayfanın tamamı yüklenmeden güncellenen sayfanın yalnızca belirli bir kısmı alınabilir. Bu, aşağıdaki gibi şeyler yükleyen web sayfası bölümleri için çok kullanışlıdır.
    • Tweetler
    • Commens
    • Siteyi ziyaret eden kullanıcılar vb.

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ız, kullanıcıların çerçeve adlarını yazacakları bir metin kutusuna sahip olacaktır.

Daha sonra bir eşleşme aramak için mvc AJAX kullanacağız ve ardından çerçevenin tam adını arama formunun hemen altında görüntüleyeceğiz.

Adım 1) Dizin sayfasının oluşturulması

Index.php

PHP MVC Frameworks - Search Engine

PHP MVC Frameworks - Search Engine

Type the first letter of the PHP MVC Framework

Matches:

İŞTE,

  • “Onkeyup =" showName (this.value) "”, metin kutusuna her tuş yazıldığında, showName JavaScript işlevini çalıştırır.

    Bu özelliğe otomatik tamamlama denir

Adım 2) Çerçeveler sayfasını oluşturma

frameworks.php

 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 textboxdocument.getElementById("txtName").innerHTML; //clear previous resultsreturn;}if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp=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,

  • "İf (str.length == 0)" dizenin uzunluğunu kontrol edin. 0 ise, betiğin geri kalanı çalıştırılmaz.
  • “İf (window.XMLHttpRequest)…” Internet Explorer sürüm 5 ve 6, AJAX uygulaması için ActiveXObject kullanır. Chrome, FireFox gibi diğer sürümler ve tarayıcılar XMLHttpRequest kullanır. Bu kod, uygulamamızın hem IE 5 & 6 hem de IE'nin ve tarayıcıların diğer yüksek sürümlerinde çalışmasını sağlayacaktır.
  • “Xmlhttp.onreadystatechange = function…” AJAX etkileşiminin tamamlanıp tamamlanmadığını ve durumun 200 olup olmadığını kontrol eder ve ardından döndürülen sonuçlarla txtName aralığını günceller.

Adım 4) PHP Ajax uygulamamızı test etme

İndex.php dosyasını phututs / ajax'a kaydettiğinizi varsayarsak, http: //localhost/phptuts/ajax/index.php URL'sine gidin.

Metin kutusuna C harfini yazın Aşağıdaki sonuçları alacaksınız.

Yukarıdaki örnek, AJAX kavramını ve zengin etkileşim uygulamaları oluşturmamıza nasıl yardımcı olabileceğini göstermektedir.

Özet

  • AJAX, Eşzamansız JavaScript ve XML'in kısaltmasıdır
  • AJAX, web sayfasının yalnızca bölümlerini güncelleyerek istemci ve sunucu arasındaki etkileşimleri azaltan zengin etkileşim uygulamaları oluşturmak için kullanılan bir teknolojidir.
  • Internet Explorer sürüm 5 ve 6, AJAX işlemlerini uygulamak için ActiveXObject kullanır.
  • Internet explorer sürüm 7 ve üzeri ile Chrome, Firefox, Opera ve Safari tarayıcıları XMLHttpRequest kullanır.