E-Haci.net

Ajax barədə veb proqramlaşdırma haqda məlumatlı insanlar yəqin ki, çox eşidib. Son illər veb proqramlaşdırmada istifadə olunan ən önəmli nailiyyətlərdən biridir desək, yanılmarıq.

AJAX özü ayrıca proqramlaşdırma dili deyil, adın açmasından(“asynchronous JavaScript and XML”-termin kimi ilk dəfə 2005-ci ildə James Garret tərəfindən işlədilib. )göründüyü kimi XML və JavaScriptin asinxron işlədilməsindən doğan yeni texnologiyadır.

Əsas qayə səhifə bütöv yüklənmədən səhifədəki verilənlərin serverə ötürülməsi və uyğun emal olunmuş cavabın qəbuludur. Ən tanınmış saytlardan nümunə gətirək:

1. Facebook – Facebook demək olar ki bütövlüklə AJAX ilə “geyindirilib”. Məktubların göndərilməsi, şərhlərin yazılması, səsvermələr, reklamlar, dəvətlər, paylaşım bölmələri və.s. AJAX əsasında işləyir. Yəni siz məlumatı səhifə bütöv yüklənmədən ötürür(məsəsən rəy,ismarış yazmaq) və qəbul edirsiniz(məsələn tanıyan biləcəyiniz dostlar siyahısı, online dostlar siyahısı və.s.)

2. Twitter – Bu saytda da AJAX-dan geniş istifadə olunub. Favorites, Direct Message, @Nickname linkləri, update düyməsi – bunlar hər biri AJAX ilə çalışır.

Nümunələr çoxdur, təbiidir ki, müasir veb saytların mütləq əksəriyyəti AJAX-dan istifadə etməyə məcburdurlar, çünki hazırda ona ideal alternativ yoxdur.

Mail servislər də bu texnologiyadan geniş istifadə edirlər, Azərbaycanda tanınan veb poçt saytlarından yalnız Mail.ru hələ də ənənəvi proqramından istifadə edir, onda AJAX-a aid nəyəsə rast gəldiyimi xatırlamıram. Əvəzində Hotmail, Gmail, Yandex Mail(neo version) və.s. saytlar başdan ayağa AJAX ilə çalışırlar.

İndi isə öz istifadə etdiyim, sadə bir AJAX loader nümunəsini sizlərlə paylaşıram. Bu nümunə verilən linkə tıkladıqda səhifənin istənilən zonasını reload edə, ordakı köhnə məlumatı, yenisiylə əvəz edə bilər, təbii ki bu zaman səhifənin bütöv təkrar yüklənməsinə gərək olmur.

1. Javascript test.js faylı create edin və daxilinə bu kodu əlavə edin:

var xmlhttp = false;

try {

xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);

} catch (e) {

try {

xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);

} catch (E) {

xmlhttp = false;

}}

if (!xmlhttp && typeof XMLHttpRequest != ‘undefined’) {

xmlhttp = new XMLHttpRequest();

}

var showlayer = true;

function myajax(serverPage,objID) {

if (showlayer == true ){

var oldcontent=document.getElementById(objID).innerHTML ;

document.getElementById(objID).innerHTML = “Yüklənir…“;

var obj = document.getElementById(objID);

xmlhttp.open(“GET”, serverPage);

xmlhttp.onreadystatechange = function() {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

obj.innerHTML = xmlhttp.responseText;

}

}

xmlhttp.send(null);

} else {

showlayer = true;

document.getElementById(objID).innerHTML = “”;

}}

2. data.html faylını create edin və daxilinə bu kodu yazın:

Verilənlər yükləndi!

3. İndi isə sadə bir html test.html faylı create edin və oraya bu kodu daxil edin:

<script src=”test.js” type=”text/javascript”></script>

<div id=”ajaxfield”></div>

<a onclick=”myajax(‘data.html’,’ajaxfield’)” href=”#”>Ajax link</a>

Bununla da AJAX-ı sadə bir nümunədə test edə və bu sadə model üzərində istədiyiniz əksər AJAX məsələni həll edə bilərsiniz. Məsələn test.html faylındakı showHide(‘data.html’,’datalayer’) funksiyasında data.html əvəzinə data.php istifadə etsək və data.php?deyishen=ad_soyad yazıb data.php faylında bu ad_soyad-a uyğun bazaya müraciət göndərib məlumat almaq kifayət qədər çox məsələlərin həllində köməkçi ola bilər.