Ajax ismi Asynchronous Javascript and XML (eş zamansız Javascript ve XML) kelimelerinin kısaltmasından gelmektedir. İnternet sayfalarında Javascript ve XMLHttpRequest isteği ile etkileşimli uygulamalar oluşturan tekniğe denir.
Mantığı sayfa yenilenmeden arka planda sunucu ile veri değişimi yaparak sayfa içerisinde istenen bölümün güncelleme işlemini yapmaktır. Bu kullanıcıya sayfayı yenileme ihtiyacından kurtarmaktadır. Birde bütün sayfayı yenileme işlemi olmadığından sunucuyu da yormayan bir işlemdir.
Ajax kelimesinin farklı telaffuzları vardır. Bazıları ajaks, bazıları ey-ceks, bazıları da ayaks diye telaffuz etmektedir.
AJAX tek başına bir teknik veya teknoloji değildir. Java, Python, PHP, ASP vb. gibi dillerle birlikte kullanıldığında Javascript’ten faydalanırız. İlk olarak Javascript kullanılarak XMLHttpRequest nesnesi oluştururuz. Daha sonra bu nesne üzerinden bir programlama dili ile oluşturduğumuz program
parçasına get yada post metoduyla parametreler göndeririz. Kod parçası bu parametrelere
göre işlemlerimizi yapar ve dönen cevabı kendisini çağıran AJAX nesnesine geri gönderir. AJAX nesnesi ile gelen bu cevabıJavascript ile web sayfamızın istediğimiz bölümlerini güncelleriz.
Bilgiyi biçimlendirmek ve görüntüsünü değiştirmek için XHTML veya HTML ve stillendirme işlemi için CSS kullanır. Bu işlemi genellikle javascript ile DOM a erişerek yaparız. Sunucu ile veri alış verişini XMLHttpRequest objesi ile yaparız. Bilgi alış verişi XML veya JSON formatı kullanırız. Farklı formatlarda kullanılabilir ama genelde bu ikisi çok kullanılıyor.
Ajax ile Neler Yapabiliriz?
Dinamik web siteleri yapılabiliriz.
Sunucu ile iletişime geçebilen ve web sayfası içeriğinin değiştirilmesi sağlayan her türlü işler.
Sayfayı yenilemeden belirli bölümleri güncellendiği uygulamalar.
Anlık mesajlaşma ve sohbet uygulamaları yapılabiliriz.
Form işleme ve kontrol işlemleri yapılabiliriz.
Veriyi sayfayı değiştirmeden kopyalama, kaydetme, güncelleme, silme işlemlerini yapabiliriz.
Bilgilerin kayıtlı olup olmadığı kontrol edebiliriz.
Arkadaşlar bu örnekleri çogaltabiliriz. Günümüzden örnekler vermek gerekirse twitter daki sayfayı yenilemeden gelen yeni mesajlar. Bazı uygulamalardaki beğen butonları…
Avantajları :
Bütün bir sayfa yerine sadece istenen bölümü güncellemesi sayesinde hem sunucuyu yormaz hemde yüklenme hızı performanslıdır.
Tamamen ücretsiz ve istediğniz herhangi bir ortamda yazabilirsiniz.
İnternette hazır birçok örnek ve kaynak bulabilirsiniz.
Web siteleri için kullanılan programlama dilleri ile uyumludur.
Ekstra bir derleme ihtiyacı yoktur. Tarayıcılarda bulunan javascript derleyiciler tarafından anlaşılmaktadır.
Dezavantajları :
Tarayıcılar dinamik sayfaları hafızada tutmaz. Bundan dolayı tarayıcılar da geri butonuna basıldığı zaman sayfamızın geri işlemininde bazen sorunlar çıkabilmektedir.
Sunucuya çok fazla işlem gönderildiğinde cevabın geç dönmesi durumu olabilir. Bunda sayfa da yenilenme olmadığı için kullanıcı siteyi terk edebilir.
Günümüzdeki en büyük problemlerden biri de SEO açısından olmaktadır. Bunun nedeni ajax ile güncellenen veya yüklenen kodlar web sayfalarının kaynak kodunda gözükmediği için arama motorlarının robotları tarafından indekslenemez. Bu da sitemizde arama motorları tarafında aramalarda çıkmamasına neden olur.
Not: Dezavanajlarından dolayı kullanmayalım demiyoruz. Bu sorunların hepsinin çözümleri var tabiki. Sorunları çözerek dezavantajlardan kurtulup avantajlarından faydanlanmak en dogru tercihtir.
Ajax Kullanımı
Ajax isteklerini yukarıda belirttiğimiz gibi XMLHttpRequest nesnesi ile yaparız. open metodu isteği açmak için kullanırız. Kullanım şekli :
XMLHttpRequest.open(method, url, async, kullanıcı, parola);İlk iki parametre ile çalışır.
Ajax isteği aşamasında durum her değiştiğinde tetiklenen onreadystatechange olayı içerisinde yaparız. İşlemlerin durumu ise readyState özelliğiyle kontrol ederiz.
readyState:0 ise istek başlatılmadı.
readyState:1 ise istek açıldı.
readyState:2 ise istek gönderildi.
readyState:3 ise istek yüklendi.
readyState:4 ise istek tamamlandı.
Ajax isteği sonunda kodlarımızın hatasız çalışmasını istiyorsak readyState değeri 4 ve HTTP durum kodu 200 ( Başarılı ) sonucu kontrol etmeliyiz.
Sonuc bize response, responseText ve responseXML olarak döner. Hangisini almışsak onu istediğimiz yerde kullanırız.
Örnek kullanım:
var myRequest = new XMLHttpRequest();
myRequest.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200 ){
// başarılı durumda çalışacak kodlarımız
}else {
// başarısız durumda çalışacak kodlarımız
}
}
myRequest.open("GET", "https://tasarimveyazilim.com/....");
myRequest.send();Örnek 1: Arkadaşlar bir tane Html sayfası ve text dosyası oluşturup bir butona tıklayarak text dosyasındaki içeriği ajax ile html sayfasına aktaracağız. text dosyasının adı content.txt ve html sayfası ile aynı dizindedir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax Examples</title>
</head>
<body>
<button onclick="myAjax()"> Request </button>
<div id="result"></div>
<script>
function myAjax(){
var myRequest = new XMLHttpRequest();
myRequest.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200 ){
document.getElementById("result").innerHTML = this.responseText;
}else {
document.getElementById("result").innerHTML = "İşlemde hata oluştu.."
}
}
myRequest.open("GET", "content.text");
myRequest.send();
}
</script>
</body>
</html>Html Çıktısı :
Örnek 2: Arkadaşlar bir tane Html sayfası ve json dosyası oluşturup bir butona tıklayarak json dosyasındaki içeriği ajax ile html sayfasına aktaracağız. JSON dosyasının adı content.json ve html sayfası ile aynı dizindedir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax Examples</title>
</head>
<body>
<button onclick="myAjax()"> Request </button>
<div id="result"></div>
<script>
function myAjax(){
var myRequest = new XMLHttpRequest();
myRequest.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200 ){
var jsonResult = JSON.parse( this.responseText );
var result = jsonResult.name + " " + jsonResult.lastName
document.getElementById("result").innerHTML = result;
}else {
document.getElementById("result").innerHTML = "İşlemde hata oluştu.."
}
}
myRequest.open("GET", "content.json");
myRequest.send();
}
</script>
</body>
</html>JSON Dosyası içeriği :
{
"name":"tasarim",
"lastName":"yazilim"
}Html Çıktısı :
Örnek 3: Arkadaşlar bir tane Html sayfası ve .xml dosyası oluşturup bir butona tıklayarak xml dosyasındaki içeriği ajax ile html sayfasına aktaracağız. Xml dosyasının adı content.xml ve html sayfası ile aynı dizindedir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax Examples</title>
</head>
<body>
<button onclick="myAjax()"> Request </button>
<div id="result"></div>
<script>
function myAjax(){
var myRequest = new XMLHttpRequest();
myRequest.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200 ){
var xmlResult = this.responseXML;
var tagResult = xmlResult.getElementsByTagName("person")[0];
var result = tagResult.getElementsByTagName("name")[0].childNodes[0].nodeValue + " " + tagResult.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
document.getElementById("result").innerHTML = result;
}else {
document.getElementById("result").innerHTML = "İşlemde hata oluştu.."
}
}
myRequest.open("GET", "content.xml");
myRequest.send();
}
</script>
</body>
</html>XML dosyası içeriği :
<?xml version="1.0" encoding="utf-8"?>
<person>
<name> Tasarım </name>
<lastname> Yazılım Xml </lastname>
</person>Html Çıktısı :
Örneklerimizde görüldüğü gibi text dosyasından, json dosyasından ve xml dosyasından ajax tekniği ile veri aktarımını yaptık. Sizlere faydalı bir yazı olmasını temenni ederim.
Başka bir yazımızda görüşmek üzere…
