Home > AJAX, Javascript, PHP/MySql > AJAX -ийг Prototype ашиглан хэрэгжүүлэх нь

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

February 11th, 2009 Leave a comment Go to 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-үүд бий.

No related posts.

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

  1. February 11th, 2009 at 23:41 | #1

    Энэ жишээг маш сайн ойлгохын тулд prototype -ийг мэддэг байх хэрэгтэй гэвч ажилуулаад ашиглад үзвэл ойлгохгүй юм байгүй ээ. Миний блогын нэг онцлог нь жишээнүүдээ шууд ажилуулж үзэхээр бас татaж авахаар тавьж байгаа явдал юм. Та бүхэнд амжилт хүсье

  2. February 12th, 2009 at 12:18 | #2

    Энэ загвар чинь харин хамаагүй дээр юм байна. Уншихад ч гэсэн гоё болж. Фонтын хэмжээ том болохоор уншихын тулд хүч гаргаад байх шаардлагагүй болжээ.

    Би prototype ашиглаж байгаа. Тун дажгүй санагдсан. Харин одооноос jQuery-г эффект оруулахдаа ашиглаж эхэлж байгаа.

    Бэлэн сан ашиглах нь нилээн зүйлийг хялбарчилж өгч байгаа шүү.

  3. February 12th, 2009 at 13:04 | #3

    jQuery documentation бас жишээ их сайтай юм байна лээ.

  4. Gaanjaa
    February 12th, 2009 at 17:40 | #4

    odoo neeree unshihad ih amar bolchij nud uvduhgui hehe amjilt!

  5. February 14th, 2009 at 00:21 | #5

    +extjs (www.extjs.com) ene bas hereg bolj magadgui shuu.

  6. tserendorj
    March 13th, 2009 at 11:30 | #6

    Thanks.jQuery-iin jisheenees oruulaach yaj ashiglah talaar ni ch bas.Amjilt hvsiy

  7. May 8th, 2009 at 22:17 | #7

    MRFG extjs -iin grid ene galzuu goyo yumaa. Gehdee hed heden asuudal baina.

    1) License
    2) JS -iinh ni hemjee tom yum 500+ KB baih yum.

    Ternees bish grid, form ene ter bol yarih yum alga.

  8. May 9th, 2009 at 20:18 | #8

    http://www.extjs.com ene ucoz bas yag iim shdee

  9. Baagii
    April 28th, 2010 at 11:46 | #9

    qwerty :http://www.extjs.com ene ucoz bas yag iim shdee

    Uzie

  10. June 21st, 2010 at 09:51 | #10

    Bayarlalaa tanid. Bi odoonoos web programig sudalj uzej yum hiij ehelj bn l da. tanii ene hicheeluud unetei zuwluguu bolson shuu.

  1. No trackbacks yet.