Örnekle PHP Ajax Eğitimi

By: Fiona Brown Fiona Brown
Hours Güncellenmiş

Ajax nedir?

AJAX tam form Asenkron JavaSenaryo & XML. Sunucu ve istemci arasındaki etkileşimleri azaltan bir teknolojidir. Bunu, tüm sayfa yerine yalnızca bir web sayfasının bir kısmını güncelleyerek yapar. Eşzamansız etkileşimler, JavaScript.AJAX'ın amacı, sayfa yenilemeye gerek kalmadan sunucuyla küçük miktarda veri alışverişinde bulunmaktır.

JavaSenaryo istemci tarafı bir kodlama dilidir. İstemci tarafında desteklenen web tarayıcıları tarafından yürütülür. JavaSenaryo.JavaKomut dosyası kodu yalnızca şu tarayıcılarda çalışır: JavaKomut dosyası etkinleştirildi.

XML Genişletilebilir İşaretleme Dili'nin kısaltmasıdır. Hem insan hem de makine tarafından okunabilen biçimlerde mesajları 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 şu makaleye bakın XML

Neden AJAX'ı kullanmalısınız?

  • Tıpkı masaüstü uygulamaları gibi zengin etkileşimli web uygulamalarının geliştirilmesine olanak sağlar.
  • Doğrulama, kullanıcının bir formu göndermeden doldurmasıyla gerçekleştirilebilir. Bu, otomatik tamamlama kullanılarak gerçekleştirilebilir. Kullanıcının yazdığı kelimeler işlenmek üzere sunucuya gönderilir. Sunucu, kullanıcının girdiği anahtar kelimelerle yanıt verir.
  • Başka bir açılır kutunun değerine bağlı olarak açılır kutuyu doldurmak için kullanılabilir
  • Veriler sunucudan alınabilir ve sayfanın tamamı yüklenmeden sayfanın yalnızca belirli bir kısmı güncellenebilir. Bu, aşağıdaki gibi şeyleri yükleyen web sayfası parçaları için çok kullanışlıdır:
  • Tweetler
  • Teşekkürler
  • 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ızda kullanıcıların framework isimlerini yazacakları bir text box bulunacaktır.

Daha sonra bir eşleşme aramak için mvc AJAX'ı kullanacağız ve ardından arama formunun hemen altında çerçevenin tam adını görüntüleyeceğ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 JavaMetin kutusuna her tuş yazıldığında showName betiğinin işlevi. 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;

?>

İLGİLİ MAKALELER

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)” stringin uzunluğunu kontrol eder. Eğer 0 ise betiğin geri kalanı yürütülmez.
  • “if (window.XMLHttpRequest)…” Internet Explorer sürümleri 5 ve 6, AJAX uygulaması için ActiveXObject kullanır. Chrome, Fire gibi diğer sürümler ve tarayıcılarFox XMLHttpRequest'i kullanın. Bu kod, uygulamamızın hem IE 5 & 6 hem de IE'nin diğer yüksek sürümlerinde ve tarayıcılarda ç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 txtName yayılma alanını döndürülen sonuçlarla günceller.

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

index.php dosyasını kaydettiğinizi varsayarsak, phututs/ajax'ta http://localhost/phptuts/ajax/index.php URL'sine göz atın.

PHP Ajax Uygulamamızı test etme

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

PHP Ajax Uygulamamızı test etme

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

ÖZET

  • AJAX, Asenkron'un kısaltmasıdır JavaSenaryo ve XML
  • AJAX, web sayfasının yalnızca bir kısmını güncelleyerek istemci ve sunucu arasındaki etkileşimi 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'i kullanır.
  • Internet explorer sürüm 7 ve üzeri ve tarayıcılar Chrome, Firefox, Operave Safari XMLHttpRequest'i kullanır.

Beğenebilirsin: