Web development blog

Өмнө хэлж байсны дагуу энд бичсэн жишээг 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-үүд бий.

No related posts.

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

admin AJAX, Javascript, PHP/MySql AJAX, beginners, Javascript, php

(No Ratings Yet)

 Loading ...