Archive

Archive for the ‘Javascript’ Category

Form 3: Form validation

February 26th, 2009 13 comments

Энэ удаагийн form цувралаараа form validation буюу формын талбарууд дээрхи утгууд үнэн зөв, байх ёстой өгөгдлүүд нь байгаа эсэхийг клиент талд нь javascript ашиглан шалгах аргыг авч үзье. Ер нь веб програмчлалд үр бүтээлтэй, найдвартай, хурдан ажилуулахын тулд клиент талд javascript-ийг өргөн ашигладаг. Ийм ч учир javascript хэлний хэрэглээ, түүнийг ашигласан  фрамеворкүүд өнөөдөр хүчээ аван хөгжиж байна.  Энэ үйлдлийг сервер талд маш нарийн хийж болно (хийх ч ёстой). Бүх зүйлийг ганц сервер талд хийх биш клиент талд ядаж байх ёстой утгуудыг шалгачихдаг  байх хэрэгтэй юм. Энэ нь бүх юмыг серверт илгээн шалгуулснаас хурднаас гадна хэрэглэж байгаа хүндээ ч амар байдаг. Read more…

AJAX -ийг Prototype ашиглан хэрэгжүүлэх нь

February 11th, 2009 10 comments

Өмнө хэлж байсны дагуу энд бичсэн жишээг Prototype JavaScript Framework ашиглан хийж үзье. Өмнөх жишээнд хэрэглэгдсэн zurhai.html, ajax_zurhai.php файлууд бүгд хэрэглэгдсэн. Харин zurhai.html дотор prototype.js, pt_ajax.js гэсэн  JS файлуудыг дуудаж ашигласан. prototype.js нь Prototype JS Framework харин pt_ajax.js нь миний бичсэн prototype ашиглан  AJAX бий болгох JS код юм.  зүйлүүдийг тайлбарлая. Энэ нилээд ач холбогдолтой яг ажиллаж байгаа жишээ гэдгийг анхааран үзээрэй.

zurhai.html  доторхи өмнөх жишээнээс өөрчлөгдсөн зарим  чухал зүйлүүдийг тайлбарлая.

1. onchange=” var ord=’ord=’+this.value;  Ajax_Loader(‘ajax_zurhai.php’,’medeelel_haruulah_div’, ord)”  onchange дээр ord гэсэн хувьдагчид сонгофдсон ордны ID -ийг ord=arslan гэх мэтээр олгож байна.

2. <div id=”loading” style=”display:none”><img src=”images/indicator.gif” /> Loading …</div> энэ бол дуудах үед харагдах анимац гаргах DIV. Бусад үед харагдахгүй байна. Харагдуулахгүй байхыг нь style=”display:none”  CSS хийж байна.

3. <script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/pt_ajax.js”></script> энэ 2 мөр бол JS үүдээ дуудаж байгаа хэсэг. pt_ajax.js нь бидний сурч авах хамгийн гол зүйлийг агуулж байгаа JS юм. Ингээд уг JS -ийг тайлбартайгаар хүргэе.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// JavaScript Document
/*
AJAX duudagdah yed zurhai.html dotorhi
<div id="loading" style="display:none"><img src="images/indicator.gif" alt="" /> Loading ...</div>
-ийг харуулана. Харин AJAX дуудагдаад дууссны дараа харагдуулахгүй болгож байна.
*/
var myGlobalHandlers = {
	onCreate: function(){
		Element.show('loading');
	},
 
	onComplete: function() {
		if(Ajax.activeRequestCount == 0){
			Element.hide('loading');
		}
	}
};
 
Ajax.Responders.register(myGlobalHandlers); /* дээрхи handler-ийг protptypte -ийн AJAX -д холбож өгч байна. */
 
/*
Prototype ашигласан AJAX- дуудах универсал функц
ПАРАМЕТРУУД
url: Server дээр байгаа дуудагдах PHP (манай жишээний хувьд) файлын нэр
container: Үр дүнг харуулах DIV эсвэл ямар контайнерын ID. Манай жишээний хувьд medeelel_haruulah_div
param: url-ийн араас залгах url query. Манай жишээний хувьд ord=arslan гэх мэт.
*/
function Ajax_Loader(url,container, param) {
var params = param;
var myAjax = new Ajax.Updater(
					{success: container},
					url,
					{
						method: 'get',
						parameters: params,
						onFailure: reportError
					});
 
}
 
/*  Алдаа гарсан үед энэ функц дуудагдана. */
 
function reportError(request) {
	alert('Sorry. There was an error.');
}

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

Цааашид веб програмчлал сонирхож байгаа залуус prototype-ийн талаар дэлгэрэнүүлэн сайтар судлах шаардлагатай. Ганц энэ ч биш jquery, dojo гэх мэт олон сайхан framework-үүд бий.

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: ,

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

January 12th, 2009 6 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 жишээ байрлуулах болно.

Ajax-ийн тухай товчхон

January 9th, 2009 7 comments

AJAX бол Asynchronous JavaScript and XML гэсэн үгийн товчлол юм. Веб хуудасны ямар нэг хэсэгт сервэрээс ямар нэг хуудасыг асинхрон дуудаж харуулах боломжийг бүрдүүлсэн техник юм. Одоогоор энэ нь вебийн хөгжүүлэлтийн хамгийн сүүлийн үеийн технологид тооцогдогдож байна.Үүнийг ашигласнаар интерактив веб програм хангамжууд мөн бидний ашигладаг десктоп програм шиг веб програм (Rich Internet Application) хийх боломжийг бүрдүүлж байна. Түүхийн хувьд 2005 онд google өөрийн хайлтын системд suggest (санал болгох- нэг үг бичихэд түүнтэй холбоотой үгнүүд гарах) системдээ анх хэрэглэсэн гэж үздэг боловч бүүр 90-ээд оны дундуур веб хуудас дуудагдсны дараа дахин өөр мэдээлэл серверт илгээх, үр дүн буцааж авдаг зүйлийг java хийсэн байдаг бөгөөд энэ нь java applet юм. 1996 онд Микрософт IFRAME -ийг анх HTML -д оруулж ирсэн нь мөн веб хуудасны тодорхой хэсэгт өөр веб хуудас дуудагдаж гарч ирэх боломжтойг харуулсан зүйл болжээ. 1999 он мөн Микрософт XMLHttpRequest гэх одоо AJAX-ийг бий болгож буй гол обьектийг IE 5.0 -д ActiveX хэлбэрээр ажилладагаар бий болгосон байна. Үүний дараа Mozilla болон бусад веб броузер хөгжүүлэгчид энэ обьектийг бий болгосон хэдийн боловч W3C  дөнгөж саяхан 2006 онд өөрийн албан ёсний стандарт болгох гэж анхны драфт стандартыг гаргасан байх юм.

Өнөөдөр энэ технолгод ашиглагдаж байгаа зүйлүүд

  • XHTML, CSS – мэдээллийг гаргаж харуулахад үндсэн суурь
  • Document Object Model (DOM ) – Мэдээллийг динамикаар эсвэл янз бүрийн байдлаар харуулах боломж бүрдүүлэх
  • XML and XSLT сервер ба клиентийн хооронд мэдээлэл дамжуулах
  • XMLHttpRequest – асинхрон холболт бий болгох
  • Javascrit – дээрхи бүх зүйлийг хооронд холбож ажиллуулах програмчлалын орчин болж өгч байна.
Уламжлалт  ба AJAX ашигласан веб програм хангамжуудын ажиллагааны зарчим

Уламжлалт ба AJAX ашигласан веб програм хангамжуудын ажиллагааны зарчим

Веб сайт бүр заавал AJAX хэрэглэх ёстой юу?

Миний хувьд хариулт бол ҮГҮЙ. AJAX өөрийн гэсэн давуу ба сул талуудтай.

Давуу талууд

  • Веб хуудсанд янз бүрийн агуулгыг ер нь л агуулгыг өөр өөр эх үүсвэрээс нэгтгэн дуудаж харуулах. Зөвхөн шаардлагатай  мэдээллийг харуулах боломжтой. Ингэснээрээ веб сайтыг дахин дахин релоад хийхгүй байх, цаашлаад bandwidth -ийг хэмнэх гэх давуу талуудтай
  • Веб хуудсыг маш интерактив болгох. Хэрэглэгчийн оруулсан мэдээллийг шууд серверт илгээн шалгах гэх мэт
  • Веб серверийн ачааллыг багасгана. JS болон CSS үүд нь нэг удаа дуудагдаад л харин агуулга бүхий хэсэг нь солигдоод байх боломжтой.

Сул талууд

  • Веб броузерын history-д бүртгэхдэхгүй учир буцах товч ажиллахгүй. Энэ асуудлыг нэмэлт юм хийж байж шийддэг.
  • Боокмарк хийж чадахгүй. Тухайн хуудас дуудагдсны дараа агуулга нь солигдоод гараад ирэх боломжтой тэр солигдсон мэдээлэл бүхий хуудсыг хэрэглэгч боокмарй хийж чадахгүй.
  • Хайлтын системүүд бүртгэж чадахгүй. Ихэнх хайлтын системүүд JS -ийг ажилуулж үр дүнг нь бүртгэдэггүй. Гэтэл AJAX хуудас JS -ээр дуудагдаж гарч ирдэг.
  • Зарим хэрэглэгчийн компьютер JS ажиллахыг хаасан байдаг. Энэ тохиолдолд ажиллаж чадахгүй.

гэх мэт.

Би дараагийн хэсэгт JS дээр өөрөө AJAX үүсгэх мөн хамгийн өргөн хэрэглэгдэж байгаа Prototype JS framework дээр AJAX -ийг яаж хэрэгжүүлэхийг маш ойлгомжтой жишээн дээр тайлбарлана. Миний жишээнүүд энэ веб дээрээ шууд ажилладаг байхаар хийгдэх болно.

Categories: AJAX, Javascript Tags: , ,

Web development timeline

January 2nd, 2009 No comments

Доорхи зурагнаас веб хөгжүүлэлтийн хэл, хэрэгсэлүүд хирхэн яаж үүсэж, хөгжиж одоо ямар хувилбар дээрээ явааг тодорхой сайхан харж болохоор байна. Вебийн үндэс болон веб програмчлал үзэх гэж байгаа оюутнууд юу үзсэн цаашид юу үзэхээ ёстойгоо клиент ба сервер талаар нь ялган харна уу. Зурган дээр дарж томруулж үзнэ үү.

Web Development Timeline by end of 2008

Web Development Timeline by end of 2008

Categories: CSS, HTML, Javascript, PHP/MySql Tags: , ,