Ajax Çağrılarına Giriş

Yayınlanan: 2021-11-01

Ajax'a Giriş sayfamıza hoş geldiniz! Bu yazıda Ajax'ın temellerini ve gerçek dünyadan bir örnekte nasıl kullanıldığını inceleyeceğiz. Ayrıca bir Ajax-PHP çağrısı örneğine de bakacağız. Bu öğreticiyi basitleştirmek için elimizden gelenin en iyisini yapmış olsak da, aşağıdakileri tam olarak anlamak için Javascript, PHP ve WordPress hakkında çalışma bilgisi çok önemlidir. Bunu akılda tutarak başlayalım!

Ajax nedir?

Ajax, Asenkron JavaScript ve XML anlamına gelir.

Ajax bir programlama dili değil, daha iyi web uygulamaları oluşturmak için mevcut web teknolojilerini birleştiren bir dizi tekniktir.

Ajax ile Web Sitelerini İyileştirme

Ajax'ın çok çeşitli kullanım alanları vardır. Bunlar arasında en önemli işlevlerden biri Ajax çağrılarıdır. Ajax çağrıları, bir web sitesinin, bir kullanıcı eylemi üzerine, sayfayı yeniden yüklemeye gerek kalmadan içeriğinin bir kısmını güncellemesine olanak tanır. Bu nedenle, normal bir HTTP isteğinin aksine, web sitesiyle etkileşime devam etmek için sunucu yanıtını beklemek zorunda değiliz.

Geleneksel olarak, HTTP istekleri bir web sunucusuna yapılır ve işlendikten sonra sunucu, güncellenmiş çıktıyı yeni bir sayfa yüklemesinde döndürür. Bir Ajax isteğinde, bu eylem dizisi, kullanıcının kesintiye uğramaması için sahne arkasında eşzamansız olarak gerçekleşir. Bu, etkileşimi ve yanıt verebilirliği geliştirir ve web sitesini daha dinamik hale getirir.

Bir Ajax Çağrısı Nasıl Çalışır?

Bir Ajax çağrısı, son kullanıcının bir web sitesinin ön ucunda bir eylem gerçekleştirmesiyle başlar (örneğin, bir düğmeyi tıklatarak). Bu eylem gerçekleştirildiğinde, bir Javascript olayı tetiklenir ve dinleyicisi bir işlevi çağırır.

Fonksiyonun içinde Ajax çağrısı başlatılır ve XML yardımıyla bilgiler paketlenir ve istek bir sunucu komut dosyasına gönderilir.

N OT: Günümüzde, hemen hemen tüm durumlarda JSON, daha hızlı, okunması ve programlanması ve daha pek çok özelliği nedeniyle XML yerine tercih edilmektedir.

Komut dosyasının içinde istek, PHP, Java, Ruby, Python vb. gibi bir sunucu tarafı komut dosyası dili yardımıyla işlenir.

Yanıt, istemciye geri gönderilir ve bir geri arama işlevi, ilgili içerik bölümünü alınan verilerle günceller.

Bunun nasıl çalıştığına bir örnekle bakalım

Basit Bir Ajax Çağrı Örneği

Makale başlıkları listesinde arama yaparken arama sonuçlarını gerçek zamanlı olarak görmenizi sağlayan bir Arama uygulaması oluşturalım.

PHP'yi sunucu tarafı betik dili olarak kullanacağız ve son kullanıcıların bakış açısından bu konuda size yol göstereceğiz.

1. Adım: HTML Formu

İlk olarak, kullanıcının metinle dolduracağı bir metin kutusuna ve sonucu gösterecek bir yere ihtiyacımız var. Öyleyse basit bir HTML formu ve sonuçları gösterecek bir öğe oluşturalım.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> </body> </html>

2. Adım: Javascript İşlevi

Bir kullanıcı metin girdiğinde, varsa gerçek zamanlı sonuçları görmek isteriz. Kullanıcı klavyede bir tuş bıraktığında bir işlevi tetikleyen onkeyup Javascript olayını kullanacağız.

İşlev, işleme devam etmek için mevcut metni parametre olarak almak zorunda kalacaktır.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> <script type="text/javascript"> function foundArticles(str) { } </script> </body> </html>

Fonksiyonu dolduralım.

3. Adım: Talep

İşlevin içinde, sunucuyla etkileşime geçmek için önce bir XMLHttpRequest nesnesi oluşturmalı ve ardından foundArticles() iletilen değerle bir şeyler yapacak başka bir işlevi çağırmalıyız.

Yukarıda açıklanan süreçte, sunucu ile etkileşim, readyState özelliği değiştirildiğinde çağrılan bir Javascript XMLHttpRequest.onready statechange olay işleyicisi kullanılarak gerçekleştirilir. Bu adımları daha da netleştirelim:

readyState özelliği, bir istemcinin içinde bulunduğu XMLHttpRequest durumunu döndürür.
readystatechange readyState tetiklenir.
onreadystatechange özelliği, readystatechange olayı tetiklendiğinde çağrılacak olay işleyicisini içerir.

Adım 4: İstekle ne yapılmalı?

Şimdi işlem bitince bir şeyler yapmamız gerekiyor ve hangi durumların müsait olduğuna baktıktan sonra bunu durum 4 olarak ayarlıyoruz.

Bu nedenle, işlem tamamlandığında, txtHint kimliğine sahip HTML öğesinin içindeki metin, sunucunun yanıtı ile değiştirilmelidir. Bu, istek gönderildikten sonra sunucudan alınan metni döndüren responseText özelliğini kullanmamız gerektiği zamandır.

Şimdi yukarıda tanımladığımıza karşılık gelen kodu foundArticles() fonksiyonunun içine ekleyelim.

 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } }

NOT: Burada, HTML'den kaçmadan bu şekilde oluşturmanın güvenlik açısından kötü bir uygulama olduğunu ve kodun mümkün olduğunca basit tutulması için bunu yalnızca bu öğretici uğruna yaptığımızı belirtmeliyiz. Güvende olmak için, bu makalede sağlanan kodların hiçbirini gerçek dünya kullanımı için kullanmayın!

Ardından, isteği sunucuya göndermeli ve döndürülen verileri kullanmalıyız.

Adım 5: Veriler

Bu örnekte veriler bir PHP dosyasında saklanacaktır. Aynı klasör altında bir data.php dosyası oluşturuyoruz ve aşağıdaki kodu ekliyoruz:

 <?php // We fill in the posts array with the data to look up to $posts = array( "C Language course", "C++ course", "About Bootstrap", "Learn to write HTML", "All about SS", "CSS3 course", "JAVA course", "JavaScript tutorials", "Learn PHP", "MySQL examples", "Learn Python", "AngularJS", "Photoshop Tutorials", "C#", "ASP.NET", "SAP", "ORACLE", "Wordpress CMS for beginners", "Build your own Android app", "All about SEO", "Illustrator", "Flash", "Action Script" ); // We get the requested value from the URL and store it in a variable $req = $_REQUEST["req"]; $autocomplete = ""; // Iterate $posts if $req is not empty if ($req !== "") { $req = strtolower($req); foreach($posts as $name) { $lowname = strtolower($name); if ( strpos( $lowname , $req ) !== false ) { $autocomplete = $name; } } } // Output echo $autocomplete === "" ? "no suggestion" : $autocomplete;

$req = $_REQUEST["req"]; hakkında kafanız karışmasın. astar. Komut dosyası, custom.js dosyasındaki sorguyu bu şekilde alır.

Adım 6: İstek Yöntemleri

İsteği başlatmak için XMLHttpRequest open() yöntemini ve sunucuyla veri alışverişi yapmak için send() yöntemini kullanacağız.

open() yöntemi için kullandığımız parametreler şunlardır:

Yöntem. HTTP istek yöntemi anlamına gelir ("GET", "POST", "PUT", "DELETE" vb.).
İsteğin gönderileceği URL.

 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } xmlhttp.open("GET", "data.php?req=" + str, true); xmlhttp.send(); }

Gördüğünüz gibi, open() yöntemi “data.php?req=" + str URL'sine bir GET isteği başlatır.

URL daha sonra $req = $_REQUEST[“req”]; değeri almak için data.php dosyasının içindeki değişken.

Örnek isteğin bir görseline bakalım:

Bu noktada form düzgün çalışmalıdır. Girerseniz, “ders” kelimesini söyleyelim, sonuç şöyle olmalıdır:

“C Dil kursu”,
“C++ kursu”,
“CSS3 kursu”,
"JAVA kursu".

Çözüm

Bu, web siteleri oluştururken çok popüler bir teknik olan Ajax isteğinin çok basit bir örneğiydi. Basit olmasına rağmen, umarım sizi bu tür isteklerdeki yönlendirmeyi anlamaya daha da yaklaştırdık ve bu, kendi kodunuzu kodlamaya başlamanıza yardımcı olabilir. Bir sonraki makalede, bir WordPress ortamında Ajax'ı tekrar ziyaret edeceğiz, bu yüzden bizi izlemeye devam edin!