AJAX Giriş
AJAX ile yapabilecekleriniz:
- Bir web sunucusundaki verileri oku – sayfa yüklendikten sonra
- Sayfayı yeniden yüklemeden bir web sayfasını güncelle
- Verileri bir web sunucusuna gönder – arka planda
AJAX Asenkron JavaScript ve XML anlamına gelir. Bir programlama dili değildir. Bir web sayfasından web sunucularına erişmek için kullanılan bir tekniktir.
[code]var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if (this.readyState==4 && this.status==200){
document.getElementById(“ajax”).innerHTML = this.responseText;
}
};
xhttp.open(“GET”,”ajax.html”,true);
xhttp.send();[/code]
AJAX Nedir?
AJAX = Asenkron JavaScript ve XML.
AJAX bir programlama dili değildir. AJAX sadece aşağıdakilerin bir kombinasyonunu kullanır:
- Bir tarayıcı yerleşik XMLHttpRequest nesnesi (bir web sunucusundan veri istemek için)
- JavaScript ve HTML DOM (verileri görüntülemek veya kullanmak için)
[code]AJAX yanıltıcı bir isim. AJAX uygulamaları veri taşımak için XML kullanabilir, ancak verileri düz metin veya JSON metin olarak taşımak eşit derecede yaygındır.[/code]
AJAX, web sayfalarının sahnelerin arkasında bir web sunucusu ile veri alışverişi yapılarak eşzamansız olarak güncellenmesini sağlar. Bu, tüm sayfayı yeniden yüklemeden bir web sayfasının bölümlerini güncellemenin mümkün olduğu anlamına gelir.
AJAX Nasıl Çalışır?
1. Bir web sayfasında bir olay meydana gelir (sayfa yüklenir, bir düğmeye tıklanır)
2. Bir XMLHttpRequest nesnesi JavaScript tarafından oluşturulur
3. XMLHttpRequest nesnesi bir web sunucusuna istek gönderir
4. Sunucu isteği işliyor
5. Sunucu web sayfasına bir cevap gönderir
6. Cevap, JavaScript tarafından okunur
7. Uygun eylem (sayfa güncelleme gibi) JavaScript tarafından gerçekleştirilir
AJAX – XMLHttpRequest Nesnesi
AJAX’ın kilit taşı XMLHttpRequest nesnesidir.
XMLHttpRequest Nesnesi
Tüm modern tarayıcılar XMLHttpRequest nesnesini destekler. XMLHttpRequest nesnesi, sahnelerin arkasında bir web sunucusuyla veri alışverişi yapmak için kullanılabilir. Bu, tüm sayfayı yeniden yüklemeden bir web sayfasının bölümlerini güncellemenin mümkün olduğu anlamına gelir.
XMLHttpRequest Nesnesi Oluşturma
Tüm modern tarayıcılarda (Chrome, Firefox, IE7 +, Edge, Safari, Opera) yerleşik bir XMLHttpRequest nesnesi vardır.
Bir XMLHttpRequest nesnesi oluşturmak için söz dizimi:
degisken = new XMLHttpRequest();
Örneğin;
var xhttp = new XMLHttpRequest();
Domainler Arasında Erişim
Güvenlik nedenleriyle, modern tarayıcılar alan adları arasında erişim izni vermez. Bu, hem web sayfasının hem de yüklemeye çalıştığı XML dosyasının aynı sunucuda bulunması gerektiği anlamına gelir.
Eski Tarayıcılar (IE5 ve IE6)
Internet Explorer’ın eski sürümleri (5/6), XMLHttpRequest nesnesi yerine bir ActiveX nesnesi kullanır:
degisken = new ActiveXObject (“Microsoft.XMLHTTP”);
IE5 ve IE6’yı işlemek için, tarayıcının XMLHttpRequest nesnesini destekleyip desteklemediğini ya da bir ActiveX nesnesi oluşturup oluşturmadığını kontrol edin:
[code]if (window.XMLHttpRequest) {
// modern tarayıcılar için
xmlhttp = new XMLHttpRequest();
} else {
// IE tarayıcıları için
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}[/code]
XMLHttpRequest Nesne Yöntemleri
| Yöntem | Açıklama |
|---|---|
| new XMLHttpRequest() | Yeni bir XMLHttpRequest nesnesi oluşturur |
| abort() | Mevcut isteği iptal eder |
| getAllResponseHeaders() | Başlık bilgilerini döndürür |
| getResponseHeader() | Belirli başlık bilgilerini döndürür |
| open(method, url, async, user, psw) | İsteği belirtir
method: istek türü GET veya POST |
| send() | İsteği sunucuya gönderir GET istekleri için kullanılır |
| send(string) | İsteği sunucuya gönderir. POST istekleri için kullanılır |
| setRequestHeader() | Gönderilecek başlığa bir etiket/değer çifti ekler |
XMLHttpRequest Nesne Özellikleri
| Özellik | Açıklama |
|---|---|
| onreadystatechange | ReadyState özelliği değiştiğinde çağrılacak bir işlevi tanımlar. |
| readyState | XMLHttpRequest’in durumunu tutar.
0: istek başlatılmadı |
| responseText | Yanıt verisini bir dize olarak döndürür |
| responseXML | Yanıt verilerini XML verileri olarak döndürür |
| status | Bir isteğin durum numarasını döndürür
200: “Tamam” |
| statusText | Durum metnini döndürür (ör. “OK” veya “Not Found”) |
AJAX – Sunucuya İstek Gönderme
XMLHttpRequest nesnesi, bir sunucuyla veri alışverişinde kullanılır.
Sunucuya İstek Gönderme
Bir sunucuya bir istek göndermek için, XMLHttpRequest nesnesinin open() ve send() yöntemlerini kullanırız:
[code]xhttp.open(“GET”, “ajax.txt”, true);
xhttp.send();[/code]
| Yöntem | Açıklama |
|---|---|
| open(method, url, async) | İstek türünü belirtir
method: istek türü: GET veya POST |
| send() | İsteği sunucuya gönderir (GET için kullanılır) |
| send(string) | İsteği sunucuya gönderir (POST için kullanılır) |
GET veya POST?
GET, POST ‘tan daha basit ve hızlıdır ve çoğu durumda kullanılabilir.
Ancak, her zaman aşağıdaki durumlarda POST isteklerini kullanın:
- Ön belleğe alınmış bir dosya bir seçenek değildir (sunucudaki bir dosyayı veya veri tabanını güncelleyin).
- Sunucuya büyük miktarda veri gönderme (POST, boyut sınırlaması yoktur).
- Kullanıcı girişi (bilinmeyen karakterler içerebilen) gönderme POST, GET ‘den daha sağlam ve güvenlidir.
GET İstekleri
Basit bir GET isteği:
[code]xhttp.open(“GET”, “ajax.php”, true);
xhttp.send();[/code]
Yukarıdaki örnekte, önbelleğe alınmış bir sonuç alabilirsiniz. Bunu önlemek için URL’ye benzersiz bir kimlik ekleyin:
[code]xhttp.open(“GET”, “ajax.php?t=” + Math.random(), true);
xhttp.send();[/code]
GET yöntemiyle bilgi göndermek isterseniz, bilgileri URL’ye ekleyin:
[code]xhttp.open(“GET”, “ajax.php?fname=Web&lname=Teknoloji”, true);
xhttp.send();[/code]
POST İstekleri
Basit bir POST isteği:
[code]xhttp.open(“POST”, “ajax.php”, true);
xhttp.send();[/code]
HTML formu gibi verileri POST yapmak için setRequestHeader() ile bir HTTP başlığı ekleyin. send() yönteminde göndermek istediğiniz verileri belirtin:
[code]xhttp.open(“POST”, “ajax.php”, true);
xhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xhttp.send(“fname=Web&lname=Teknoloji”);[/code]
| Yöntem | Açıklama |
|---|---|
| setRequestHeader(header, value) | İstek için HTTP üstbilgileri ekler
header: başlık adını belirtir |
URL – Bir Sunucuda Bir Dosya
open() yönteminin url parametresi, sunucudaki bir dosyanın adresi:
xhttp.open(“GET”, “ajax.php”, true);
Dosya, .txt ve .xml gibi herhangi bir dosya veya .asp ve .php gibi sunucu komut dosyaları olabilir (yanıtı geri göndermeden önce sunucuda eylemler gerçekleştirebilir).
Eşzamansız – True veya False?
Sunucu istekleri eşzamansız olarak gönderilmelidir.
open() yönteminin async parametresi true olarak ayarlanmalıdır:
[code]xhttp.open(“GET”, “ajax.php”, true);[/code]
Eşzamansız olarak gönderildiğinde, JavaScript’in sunucu yanıtını beklemesi gerekmez, ancak bunun yerine şunları yapabilirsiniz:
- sunucu yanıtını beklerken diğer komut dosyalarını yürütme
- yanıt hazır olduktan sonra yanıtla başa çıkmak
Onreadystatechange Özelliği
XMLHttpRequest nesnesi ile, istek bir cevap aldığında çalıştırılacak bir işlev tanımlayabilirsiniz.
Işlev XMLHttpResponse nesnesinin onreadystatechange özelliğinde tanımlanır:
[code]xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“demo”).innerHTML = this.responseText;
}
};
xhttp.open(“GET”, “ajax.txt”, true);
xhttp.send();[/code]
Aşağıda onreadystatechange hakkında daha fazla bilgi edineceksiniz.
Senkronize İstek
Senkronize bir istek yürütmek için, open() yöntemindeki üçüncü parametreyi false olarak değiştirin:
[code]xhttp.open(“GET”, “ajax.txt”, false);[/code]
Bazen hızlı test için async = false kullanılır. Ayrıca eski JavaScript kodunda senkronize istekleri de bulacaksınız.
Kod, sunucu tamamlanmasını bekleyeceğinden, bir onreadystatechange işlevine gerek yoktur:
[code]xhttp.open(“GET”, “ajax.txt”, false);
xhttp.send();
document.getElementById(“demo”).innerHTML = xhttp.responseText;[/code]
[code]Senkronize XMLHttpRequest (async = false), sunucu yanıtı hazır olana kadar JavaScript’in çalışmayı durdurması nedeniyle önerilmez. Sunucu meşgul veya yavaşsa, uygulama askıda kalacak veya duracaktır.
Senkronize XMLHttpRequest, web standardından kaldırılma sürecindedir, ancak bu işlem uzun yıllar sürebilir.
Modern geliştirici araçları, eşzamanlı istekleri kullanma konusunda uyarmaları konusunda teşvik edilir ve gerçekleştiğinde InvalidAccessError istisnası atabilir.[/code]
AJAX – Sunucu Yanıtı
Onreadystatechange Özelliği
ReadyState özelliği, XMLHttpRequest’in durumunu tutar. Onreadystatechange özelliği, readyState değiştiğinde yürütülecek bir işlevi tanımlar. Status özelliği ve statusText özelliği, XMLHttpRequest nesnesinin durumunu tutar.
| Özellik | Açıklama |
|---|---|
| onreadystatechange | ReadyState özelliği değiştiğinde çağrılacak bir işlevi tanımlar. |
| readyState | XMLHttpRequest’in durumunu tutar. 0: istek başlatılmadı 1: sunucu bağlantısı kuruldu 2: istek alındı 3: işleme talebi 4: İstek bitti ve yanıt hazır |
| status | 200: “OK” 403: “Forbidden” 404: “Page not found” Tam liste için Http Mesajları Referansını inceleyin. |
| statusText | Durum metnini döndürür (ör. “OK” veya “Not Found”) |
ReadyState her değiştiğinde onreadystatechange işlevi çağrılır.
ReadyState 4 ve durum 200 olduğunda, yanıt hazırdır:
[code]var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“demo”).innerHTML =
this.responseText;
}
};
xhttp.open(“GET”, “ajax.txt”, true);
xhttp.send();[/code]
[code]Onreadystatechange olayı, readyState’deki her değişiklik için bir kez olmak üzere dört kez (1-4) tetiklenir.[/code]
Geri Çağırma Fonksiyonu Kullanma
Geri arama işlevi, başka bir işleve parametre olarak iletilen bir işlevdir. Bir web sitesinde birden fazla AJAX göreviniz varsa, XMLHttpRequest nesnesini yürütmek için bir işlev ve her AJAX görevi için bir geri arama işlevi oluşturmanız gerekir. Fonksiyon çağrısı, URL’yi ve yanıt hazır olduğunda hangi fonksiyonu çağırması gerektiğini içermelidir.
[code]ajaxload(“url-1“, fonksiyon1);
ajaxload(“url-2“, fonksiyon2);
function ajaxload(url, cFunction) {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open(“GET”, url, true);
xhttp.send();
}
function fonksiyon1(xhttp) {
document.getElementById(“demo1”).innerHTML = xhttp.responseText;
}
function fonksiyon2(xhttp) {
document.getElementById(“demo2”).innerHTML = xhttp.responseText;
}[/code]
Sunucu Yanıtı Özellikleri
| Özellik | Açıklama |
|---|---|
| responseText | yanıt verisini bir dizge olarak al |
| responseXML | yanıt verilerini XML verileri olarak alın |
Sunucu Yanıtı Yöntemleri
| Yöntem | Açıklama |
|---|---|
| getResponseHeader() | Sunucu kaynağından belirli başlık bilgilerini döndürür |
| getAllResponseHeaders() | Tüm başlık bilgilerini sunucu kaynağından döndürür |
ResponseText Özelliği
ResponseText özelliği sunucu yanıtını bir JavaScript dizesi olarak döndürür ve buna göre kullanabilirsiniz:
[code]document.getElementById(“demo”).innerHTML = xhttp.responseText;[/code]
ResponseXML Özelliği
XML HttpRequest nesnesinin yerleşik XML ayrıştırıcısı vardır. ResponseXML özelliği, sunucu yanıtını bir XML DOM nesnesi olarak döndürür. Bu özelliği kullanarak, yanıtı bir XML DOM nesnesi olarak çözümleyebilirsiniz:
[code]<p id=”demo”></p>
<script>
var xhttp, xmlDoc, txt, x, i;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
xmlDoc = this.responseXML;
x = xmlDoc.getElementsByTagName(“ARTIST”);
for (i = 0; i < x.length; i++) {
txt = txt + x[i].childNodes[0].nodeValue + “<br>”;
}
document.getElementById(“demo”).innerHTML = txt;
}
};
xhttp.open(“GET”, “ajax.xml”, true);
xhttp.send();
</script>[/code]
GetAllResponseHeaders () Yöntemi
GetAllResponseHeaders () yöntemi, sunucu yanıtından tüm başlık bilgilerini döndürür.
[code]var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“demo”).innerHTML = this.getAllResponseHeaders();
}
};[/code]
GetResponseHeader () Yöntemi
GetResponseHeader () yöntemi, sunucu yanıtından belirli başlık bilgilerini döndürür.
[code]var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“demo”).innerHTML = this.getResponseHeader(“content-type”);
}
};[/code]
AJAX XML Örneği
AJAX bir XML dosyası ile interaktif iletişim için kullanılabilir. Aşağıdaki örnek, bir web sayfasının AJAX ile bir XML dosyasından nasıl bilgi alabileceğini gösterecektir:
Bir kullanıcı yukarıdaki “yükle” düğmesine tıkladığında, loadDoc () işlevi yürütülür.
LoadDoc () işlevi bir XMLHttpRequest nesnesi oluşturur, sunucu yanıtı hazır olduğunda yürütülecek işlevi ekler ve isteği sunucuya gönderir.
Sunucu yanıtı hazır olduğunda, bir HTML tablosu oluşturulur, düğümler (ögeler) XML dosyasından ayıklanır ve son olarak XML verileriyle doldurulmuş HTML tablosuyla “demo” öğesini günceller:
[code]function ajax() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
fonksiyon(this);
}
};
xhttp.open(“GET”, “ajax.xml”, true);
xhttp.send();
}
function fonksiyon(xml) {
var i;
var xmlDoc = xml.responseXML;
var table=”<tr><th>Yazı</th><th>Link</th></tr>”;
var x = xmlDoc.getElementsByTagName(“POST”);
for (i = 0; i <x.length; i++) {
table += “<tr><td>” +
x[i].getElementsByTagName(“TITLE”)[0].childNodes[0].nodeValue +
“</td><td>” +
x[i].getElementsByTagName(“LINK”)[0].childNodes[0].nodeValue +
“</td></tr>”;
}
document.getElementById(“demo”).innerHTML = table;
}[/code]
[code]<?xml version=”1.0″ encoding=”UTF-8″?>
<POSTS>
<POST>
<TITLE>AJAX</TITLE>
<LINK>https://www.teknokur.net/ajax</LINK>
<KATEGORI>AJAX</KATEGORI>
<TARIH>2018-10-10</TARIH>
</POST>
<POST>
<TITLE>PHP</TITLE>
<LINK>https://www.teknokur.net/php</LINK>
<KATEGORI>PHP</KATEGORI>
<TARIH>2018-10-10</TARIH>
</POST>
</POSTS>[/code]
AJAX PHP Örneği
Aşağıdaki örnek, bir kullanıcı giriş alanındaki karakterleri yazarken web sayfasının bir web sunucusuyla nasıl iletişim kurabileceğini gösterir:
Yukarıdaki örnekte, kullanıcı giriş alanında bir karakter yazdığında “ara()” adlı bir işlev çalıştırılır.
Fonksiyon onkeyup olayı tarafından tetiklenir.
İşte HTML kodu:
[code]<html>
<head>
<script>
function ara(str) {
if (str.length == 0) {
document.getElementById(“txtHint”).innerHTML = “”;
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“sonuc”).innerHTML = this.responseText;
}
};
xmlhttp.open(“GET”, “ara.php?q=” + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Arama Motoru:</b></p>
<form>
Anahtar Kelime: <input type=”text” onkeyup=”ara(this.value)”>
</form>
<p>Sonuç: <span id=”sonuc”></span></p>
</body>
</html>[/code]
Kod açıklaması:
İlk olarak, giriş alanının boş olup olmadığını kontrol edin (str.length == 0). Öyleyse, sonuc yer tutucunun içeriğini temizleyin ve işlevden çıkın.
Ancak, giriş alanı boş değilse, aşağıdakileri yapın:
- Bir XMLHttpRequest nesnesi oluştur
- Sunucu yanıtı hazır olduğunda yürütülecek işlevi oluşturun.
- İsteği sunucudaki bir PHP dosyasına (ara.php) gönderin.
- Q parametresi eklendiğine dikkat edin ara.php?q=”+str
- Str değişkeni giriş alanının içeriğini tutar
PHP Dosyası – “ara.php”
PHP dosyası bir dizi isimi kontrol eder ve ilgili isimleri tarayıcıya döndürür:
[code]<?php
// anahtar kelimeler
$a[] = “web”;
$a[] = “teknoloji”;
$a[] = “teknokur”;
$a[] = “internet”;
$a[] = “www”;
// q parametresini URL’den al
$q = $_GET[“q”];
$hint = “”;
// $q boş değil ise diziden tüm ipuçlarını arama
if ($q !== “”) {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === “”) {
$hint = $name;
} else {
$hint .= “, $name”;
}
}
}
}
// Hiçbir ipucu bulunmadıysa veya çıktı değerleri doğru değilse çıktı “sonuç yok”
echo $hint === “” ? “sonuç yok” : $hint;
?>[/code]