JavaScript and XML kelimelerinin başharflerinden oluşan bir kısaltmadır. Türkçe ifade ettiğimizde ise Eşzamanlı olmayan yani sıra beklemeyen (asenkron) JavaScript ve XML anlamına gelmektedir.
AJAX, sayfaların değişkenlerinin değerlerinin güncellenmesinin sağlar, yani sayfamızın tamamının yeniden yüklenmesi,güncellenmesinden kaçmış oluruz ve bu olay bizi büyük bir yükten kurtatır. 2005 yılın Jesse James Garrett tarafından geliştirilmiştir.
AJAX, tarayıcıda bulunan XmlHttpRequest ile sunucuya istekler yapar bu istekler sıkıştırılmış şekilde gerçekleşir ve az trafik tüketilmiş olunur.
Örnek JavaScript AJAX kullanımı:
[code language=”javascript”]
function ajaxCall() {
var xhr = new XMLHttpRequest(); // HTTP request Initializing
xhr.open(‘get’, ‘my-html-page.html’);
xhr.onreadystatechange = function () { // track request state changes
var DONE = 4; // readyState=4 => request is done
var OK = 200; // status=200 => successful return
if (xhr.readyState === DONE) {
if (xhr.status === OK) {
console.log(xhr.responseText);
} else {
console.log(‘Error: ‘ + xhr.status); // request error status
}
}
};
xhr.send(null);
}
[/code]
AJAX, kendi tanımlamasında;
XHTML ve CSS sunumu,
DOM kullanarak verilerin etkileşimi ile dinamik görüntü,
XML ve JSON ile veri alışverişi, XSLT ile veri alışverişindeki verileri yorumlama,değiştirme,
XMLHttpRequest ile eş zamansız yani aynı zamanda olmayan yani sıra beklemeyen iletişim ile veri alma
ile birlikte JavaScript ile bu teknolojilerin hepsini ilişkilendirmeyi sağlar.
AJAX ile işlem yapmayı sağlayan istemci taraflı çatılardan bazıları aşağıdaki gibidir.
– JQuery
– Backbone.js
– AngularJS
AJAX ile işlem yapmayı sağlayan sunucu taraflı teknolojilerinden bazıları aşağıdaki gibidir.
– DWR Direct Web Remoting
– JSF Java Server Faces
Örnek JQuery AJAX kullanımı:
[code language=”javascript”]
$.ajax({
dataType: "json",
url: url,
data: data,
success: function (data) {
var resData = JSON.parse(data);
},
error: function (xhr, textStatus, error) {
alert("Error: " + error);
}
});
[/code]
Örnek JQuery AJAX basit cache kullanımı:
[code language=”javascript”]
$.ajax({
dataType: "json",
url: url,
cache: true,
data: data,
success: success
});
[/code]
url, String tipinde olmalıdır.
data, basit obje tipinde sunucudan gelen cevaptır.
success ise fonksiyon dur, gelen veriyi kullanabileceğiniz fonksiyon yapısı oluştuturulur.
Bir başka JQuery ile JSON veritipi alışverişi örneği:
$.getJSON() veya jQuery.getJSON() şekli ise şöyledir.
[code language=”javascript”]
$.getJSON( "ajax/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<li id=’" + key + "’>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});
[/code]
AJAX kullanmadan ve AJAX kullanarak yapılan isteklerin işleyişlerine örnek çizimler aşağıdaki gibidir.
Çizimlerin kaynağı http://adaptivepath.org internet sitedir.]]>