Archive

Posts Tagged ‘javascripts’

AJAX-ийг өөрөө бий болгож ашиглах нь

January 29th, 2009 5 comments

Өмнөх бичлэгт дурдсаны дагуу JS дээр өөрөө AJAX бий болгон ашиглах талаар бичье. Харин дараа нь яг энэ жишээгээ JS -ийн янз бүрийн framework-үүд дээр хэрэгжүүлэийг авч үзнэ. Энэ жишээг арай сoнирхолтой болгох зорилгоор өөрийн ордоо сонгоход тухайн ордын зурхай гардаг байх тийм юм хийлээ. Жишээ хэд хэдэн файлуудаас бүрдэнэ.

zurhai.html Үндсэн веб хуудас.
ajax.js AJAX бий болгож байгаа JS код.
ajax_zurhai.php Хэрэглэгчийн сонгосон ордоос хамааран тухайн ордын мэдээллийг клиентрүү илгээх php code. Энэ кодыг JS дотороос AJAX ашиглан дуудаж байгаа болно.
images/indicator.gif Дуудагдах үед харагдах анимац.
html Энэ фолдерт ордны тухай зурхайн мэдээллүүд html файлаар хадгалагдаж байна.

Ингээд эхнээс тайлбарлая. HTML, JS мэддэг бол ойлгомжтой байна. Харин эдгээрийг мэдэхгүй бол эхлээд энэ талаар ойлголттой болох шаардлагатай юм.

1. zurhai.html

1.1 Энэ html дотор хамгийн гол нь орд сонгох селект байна. Селектийн onchange event дээр бичигдсэн “getZurhai(this.id)” бол ордоо сонгох үед дуудагдах JS функц. this.id гэсэн параметр нь энэ селектийн id. Манай жишээний хувьд zurhai гэж байна. Өөрөөр хэлбэл энэ жишээний хувьд getZurhai(this.id) ba getZurhai(“zurhai”) энэ 2 адил юм.

1.2 <div id=”medeelel_haruulah_div”></div> Энэ бол сонгогдсон ордны зурхайн мэдээллийг харуулах div юм. Веб хуудсыг тэр чигээр нь рефреш хийхгүйгээр сонгогдсон ордны мэдээллийг энэ дотор дуудаад үзүүлчихнэ гэсэн үг. Иймд цаашид яаж ингэж харуулахыг л тайлбарлах тул энэ div -ийн ID -ийг хараад аваарай.

2. ajax.js AJAX техникийг маань бий болгож байгаа JS код. Энэ доторхи хамгийн гол зүйлүүд бий.

2.1 getZurhai(ord_id) функц.

Энэ функц zurhai.html дотор байх селектийн Onchange дээр дуудагдаж байгаагийн хувьд эндээс бүх зүйл эхлэж байна. Параметр нь нөгөө селектийн ID.

function getZurhai(ord_id)
{
var ord=document.getElementById(ord_id).value; // ямар орд сонгогдсоныг авч байна.
xmlHttp=GetXmlHttpObject(); // xmlHttp глобаль зарлагдсан хувьсагч.
 if (xmlHttp==null)  {
alert ("Таны web browser AJAX-ийг дэмжихгүй байна.");
return;
} 
 
var url="ajax_zurhai.php";
url=url+"?ord="+ord;
 
xmlHttp.onreadystatechange=ZurhainMedeelelHaruulah;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
 
}

Дээрх жишээнд байгаа  xmlHttp.onreadystatechange=ZurhainMedeelelHaruulah; гэсэн энэ бичиглэл бол миний өмнөх бичлэг дэхь

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

Энэ хэлбэрийг арай өөрөөр бичсэн байдал. Өөрөөр хэлбэл onreadystatechange гэсэн функцын заагчид ZurhainMedeelelHaruulah гэсэн функцыг олгосон байна. Энэ нь визуаль програмчлал талаас нь хэлбэл эвэнтэд хэрэглэгчийн функц зааж өгсөн байна. Энэ функцийн гол зүйл нь xmlHttp -ийн төлөвийг шалгаад хэрвээ 4 гэсэн утга авсан байвал серверээс мэдээлэл бүрэн татагдаад ирсэн гэж үзээд xmlHttp.responseText -ийг medeelel_haruulah_div гэсэн ID бүхий DIV-д олгож байна. Энэ үйлдлийг document.getElementById(“medeelel_haruulah_div”).innerHTML ашиглан хийсэн байна. document.getElementById болон түүний innerHTML проперти нь HTML DOM -ийн хамгийн өргөн хэрэглэгддэг зүйлүүд юм.

document.getElementById(“medeelel_haruulah_div”).innerHTML=” түр хүлээнэ үү. “; мөр бол түр хүлээнэ үү гэсэн үгийн хамт эргэлдэж байгаа анимацийг харуулж байна.

function ZurhainMedeelelHaruulah() 
{ 
	if (xmlHttp.readyState==4) { 
		document.getElementById("medeelel_haruulah_div").innerHTML=xmlHttp.responseText;
	}
	if (xmlHttp.readyState==1) {
		document.getElementById("medeelel_haruulah_div").innerHTML="<img src='images/indicator.gif' align='absmiddle'/> түр хүлээнэ үү. ";
	}
	if (xmlHttp.readyState==2) {
		document.getElementById("medeelel_haruulah_div").innerHTML="2 Posting";
	}
	if (xmlHttp.readyState==3) {
		document.getElementById("medeelel_haruulah_div").innerHTML="<img src='images/indicator.gif' align='absmiddle'/> Бичиж байна. ";
	}	
 
}

2.2 xmlHttp=GetXmlHttpObject();  xmlHttp -д XMLHttpRequest –обьектыг бий болгож байгаа хэрэглэгчийн функц.

function GetXmlHttpObject()
{
var xmlHttp=null;
 
	try   {
	  // Firefox, Opera 8.0+, Safari, IE7.0
		xmlHttp=new XMLHttpRequest();
	}
		catch (e)  {
		  // Internet Explorer
		try {
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // IE 6.0+ bol
		}
		catch (e)     {
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); // IE 5.5+ bol
		}
	}
return xmlHttp;
}

3. ajax_zurhai.php Энэ хэрэглэгчийн сонгосон зурхай мэдээллийг клиентэд илгээх зориулалт бүхий хялбар php code юм. Сервер дээр ажиллаж байна. Гаднаас буюу хэрэглэгчийн сонгосон ордыг GET ээр барьж аван түүнд тохирох мэдээллийг файлаас уншин буцааж байна. Буцаах үйлдэл нь дэлгэцэнд хэвлэх echo -оор хийгдэж байна.

< ?php
$ord=$_GET['ord'];
 
echo  FromFile('html/'.$ord.'.html');
 
function FromFile($filename) {
	$fd = fopen ($filename, "r");
	$contents = fread ($fd, filesize ($filename));
	fclose ($fd);
	return $contents;
}
?>

Ажиллуулж үзэх | Энэ жишээг татаж авах

Жич: Web site хийдэг JS болон PHP -ийн дундаж мэдлэгтэй хүмүүст илүү ойлгомжтой байх болно. Харин ойлгохгүй байгаа хүмүүс асуух юмаа комментээр үлдэнэ үү. Жишээ ажиллахад Web server, PHP байх шаардлагтай. Эдгээрийг суулгах талаар энэ блог дээрээс үзнэ үү. FF 3.05, IE 7.0 дээр тестлэв.

Categories: AJAX, Javascript, PHP/MySql Tags: ,