Home > AJAX, Javascript, PHP/MySql > Ajax-ийг хэрхэн хэрэгжүүлэх вэ?

Ajax-ийг хэрхэн хэрэгжүүлэх вэ?

January 12th, 2009 Leave a comment Go to comments

AJAX -ийг яаж веб хуудсандаа хэрэглэх талаар энд тайлбарлая. Өмнөх бичлэгт үүх түүх, давуу сул тал гэх мэт ерөнхий мэдээлэл багтсан бол одоо харин жаахан дэлгэрүүлнэ. AJAX -ийг ашиглах гэж байгаа бол  юуны түрүүнд вебийн ерөнхий ажиллагааны зарчмыг мэддэг байх хэрэгтэй юм. Бүх веб сайтууд интернетийн серверт байрлаж байх бөгөөд хэрэглэгчид түүнд холбогдон веб сайтуудыг үздэг. Ингэхээр сервер тал хэрэглэгч буюу клиент тал гэсэн 2 хэсэгт хуваагдаж байна. Веб програмчлалын хэлнүүд яг энэ 2 талд хуваагддаг. Жишээ нь Javascript бол серверээс код хэлбэрээр HTML -ийн хамт дуудагдан ирээд хэрэглэгчийн веб броузер дээр ажиллан үр дүнгээ харуулдаг тул клиент талын хэл болж байна. Харин PHP бол клиентын илгээсэн хүсэлтийн дагуу ажиллаад HTML хуудсыг бэлтгэн гаргаж байдаг сервер талын хэл юм.

Ер нь бол хэрэглэгч веб броузер дээрээ ямар нэг веб сайтын хаяг бичээд түүнийг дуудах үйлдэл нь уг веб сайтыг байрлуулж байгаа серверт түүнийг үзэх хүсэлт буюу request илгээж байгаа хэрэг юм. Веб хуудсны бусад линкнүүд дээр дарах, хайлт хийх гэх мэт бүхий л үйлдлийг веб сервер хүсэлт буюу request гэж хүлээж авна. Энэ хүсэлтийн дагуу уг веб сервер (apache, IIS гэх мэт) хэрэглэгчидэд хүссэн үр дүнг буюу response-ийг буцааж байдаг. Энэ reponse нь ихэвчлэн бараг бүгд HTML форматаар хэрэглэгчид очдог. Хэрэглэгчийн броузер түүнийг нь танд веб хуудас болгон харуулдаг байна. Энэ бүх процесст веб хуудас бүхлээрээ дахин дуудагдаж ачаалагдаж (reload) байдаг.

Харин AJAX бол энэ бүхэл хуудасыг дахин дуудахгүйгээр зөвхөн шаардлагатай хэсэг дээр серверээс мэдээлэл аван тэр хэсгийн мэдэллийг шинэчлэх боломжийг бий болгоно. Өөрөөр хэлбэл веб хуудасны нэг хэсэг бие даан веб серверт холбогдон өөртөө хэрэгтэй мэдээллийг харуулах боломжтой болж байгаа хэрэг. Чухамхүү энэ л боломж веб програмистуудад олон сайхан боломжийг нээж өгж байгаа билээ. Жишээ нь хэрэглэгч бүртгэх үед хэрэглэгч сонгосон логин нэрээ бичээд дуусахад уг нэрийг нь серверт илгээн авч болох эсэхийг уг хуудсийг тэр чигээр нь пост хийхээс өмнө мэдэгдэх, зургийн галлери дээр зөвхөн хэрэглэгчийн сонгосон зургийг томоор харуулах гэх мэт маш олон зүйлд хэрэглэж болж байна. Ингэснээрээ л веб сайтыг десктоп програм шиг ажиллах боломжийг бүрдүүлж байгаа юм. Асинхрон гээд байгаагийн учир ч эндээс гарна. Хэрэглэгч уг веб дээр  юм хийж байхад уг хийж байгаа зүйлийг серверт илгээн боловсруулалт хийж л байдаг мөн өөр хэсгүүдийн мэдээллийг өөрчилж байдаг нь байдаг нь асинхрон процесс юм.

Ингээд веб хөгжүүлэлтэнд гарч ирсэн энэ техникийг яаж хэрэгжүүлэх талаар бичие. Жишээ нь веб хуудасны нэг товчин дээр дарахад уг хуудсны нэг хэсэгт (веб хуудас тэр чигээрээ дуудагдаж биш) шинэ мэдээлэл гарч ирдэг байна гэвэл.

1. Клиент талын HTML байна. Үүн дээр хэрэглэгч ажиллана. Нэг товч байна. Түүнтэй хамт мэдээллийг харуулахад зориулсан нэг DIV байгаа гэж үзье.

2. Товчны onclick event дээр JS хэрэглэгчийн функц дуудагдаж байна. Энэ функц нь AJAX-ийг бий болгон хүсэлтийг серверт илгээн үр дүнг DIV харуулах гол функц юм.

3. Сервер талд ямар нэг сервер талын хэл ажиллаж байх бөгөөд 2 дахь алхамд байгаа JS функцээр дуудагдаж үр дүнгээ (response) буцаана.

4. Буцаж ирсэн үр дүн DIV-д харагдана.

Энэ үйлдлүүдийг гүйцэтгэхэд веб хуудас бүхлээрээ дахин дуудагдахгүй бөгөөд зөвхөн манай жишээн дээр гарсан DIV -ийн л агуулга өөрчлөгх болно. Эдгээр зүйлийг бий болгож байгаа JS -ийн боломжуудын талаар авч үзье.

JS дээр AJAX дээр бий болгох нь

XMLHttpRequest Обьект

Чухамхүү JS -ийн энэ обьект л AJAX-ийг бий болгож хэрэгжүүлж байна. Энэ обьект нь сүүлийн үеийн броузерууд дээр  xmlHttp=new XMLHttpRequest(); гэж бий болох боловч IE ийн хуучин хувилбарууд дээр xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);  xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”); гэх мэтээр үүснэ. Энэ бичиглэлийн new гэдэг оператораар xmlHttp-д шинэ обьект үүсгэж байгааг та бүхэн төвөггүй ойлгож байгаа гэж найдаж байна.

Энэ обьект нь open,send гэсэн 2 чухал method-той. Жишээ нь

xmlHttp.open("GET","ajax_response.php?cid=1",true);
xmlHttp.send(null);

open нь сервер дээр байгаа ajax_response.php -ийг GET ээр дуудаж байгаад send нь серверт илгээж байна.Энэ бол клиент дээрээс серверт хүсэлт илгээж байгаа үйлдэл болно.

Харин серверээс ajax_response.php ажиллаад гарсан үр дүнг барьж авахын тулд XMLHttpRequest-ийн onreadystatechange -property-ийг ашиглана. Энэ маш ач холбогдолтой property. Энэ property серверээс ирэх хариулт буюу response-ийг боловсруулах функцийг агуулж байна. Дээрхи 2 метод дуудагдах үед автоматаар дуудагна. Бичигдэх хэлбэр нь

xmlHttp.onreadystatechange=function()
{
// Энд үр дүнг боловсруулах функцийн бие бичигдэнэ
}

onreadystatechange -ийн функц дотор хэрэглэгдэх XMLHttpRequest -ийн 2 проперти бол readyState, responseText 2 юм.

readyState – нь сервер илгээсэн хүсэлтийн төлөвийг тодорхойлж байдаг.

readyStateд оорхи утгуудыг авна.

Утга Тайлбар
0 Хүсэлт илгээгдээгүй
1 Хүсэлт илгээгдэж байна
2 Хүсэлт илгээгдсэн
3 Хүсэлтийг сервер боловсрууж байна.
4 Хүсэлт биелэсэн

responseText нь серверээс буцаж ирсэн мэдээллийг текст форматаар агуулж байдаг.

xmlHttp.onreadystatechange=function()
{
       if (xmlHttp.readyState==4) {
		document.getElementById("medeelel_haruulah_div").innerHTML=xmlHttp.responseText;
	}
}

Дээрхи жишээнд хэрвээ хүсэлт биелэгдсэн бол серверээс буцаж ирсэн үр дүнг medeelel_haruulah_div гэсэн ID -тай DIV -д харуулж байна. onreadystatechange -ийг дараах хэлбэрээр бичиж болно.

xmlHttp.onreadystatechange=ZurhainMedeelelHaruulah;

function ZurhainMedeelelHaruulah()
{

if (xmlHttp.readyState==4) {
   document.getElementById("medeelel_haruulah_div").innerHTML=xmlHttp.responseText;
}

}

onreadystatechange event бөгөөд обьект хандалтад visual програмчлалын хэлнүүдэд шинээр обьект runtime үүсгээд event-үүдийг тодорхойлж өгж байгаа мэт байна.

Сервер талын ажиллагаа

Сервер талд манай жишээний хувьд ajax_response.php ажиллаж байна. Энэ хуудсанд клиентээс  хувьсагчууд(URL Query) дамжиж ирж байх бөгөөд тэдгээрийн утгаар ямар үр дүн буцаахыг тодорхойлно. Энэ нь сервер дээр ажиллаж байх тул өгөгдлийн санруу холбогдох статик хуудас унших, ямар нэг файлаас мэдээллээ авах гэх мэт олон боломжууд нээлттэй байна. Энэ бүхий үр дүн ямар нэгэн утга буцаадаг байна. Энэ клиент дээр reponse болон очно.

<?php

$cid=$_GET[‘cid’];

if ($cid==1) echo ‘ 1-d tohiroh utga ‘;
else echo ‘ 1 ees uur yamar negen utga ‘;

?>

Иймэрхүү логиктой юм сервер дээр байх юм.

Ерөнхийдөө AJAX ийм зарчмаар ажилладаг. Мэдээж энэ бол хамгийн энгийн ажиллах зарчим боловч ихэнх нь иймэрхүү төвшинд л хэрэглэсэн байдаг. Тун удахгүй live жишээ байрлуулах болно.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

  1. Borkhuu
    January 12th, 2009 at 11:13 | #1

    Mash ih bayarlalaa. Dahiad iluu delgerengui oilgohod amar, gunzgiirsen medeelel husii. Soyoloo ahaa bayarlalaa.

  2. January 12th, 2009 at 11:17 | #2

    Udahgyi AJAX-iig uuruu bii bolgoj ashiglah, bas prototype ashiglan hiih 2 jishee tavina. Teriig ajiluulaad uzehed mash oilgomjtoi bolno.

  3. Baku
    March 12th, 2009 at 13:02 | #3

    BAYRLALAAA BAGSHAA

  4. tserendorj
    March 13th, 2009 at 11:18 | #4

    Mash ih bayrlalaa.AMjilt hvsiy.Daraa daraagin bichlegiig chini hvleej bgaa shvv :)

  5. tsogoo
    December 6th, 2009 at 10:47 | #5

    баярлалаа маш ойлгомжтой болжэээ бусадад мэдлэгээ хуваалцаж байгаарай

  6. бямбаа
    December 22nd, 2012 at 12:48 | #6

    сайхан тайлбарлажээ дахиад өөр дэлгэрэнгүй мэдээлэл тавибал сайн л байна

  1. January 29th, 2009 at 16:42 | #1