AJAX ו-MooTools

במאמר הקודם למדנו על אפקטים ואנימציה ב-MooTools. במאמר הזה אנו נלמד על AJAX באמצעות MooTools.

על מנת ללמוד איך עושים AJAX ב-MooTools, צריך לדעת מה זה AJAX. הנה קישור למדריך AJAX שכתבתי.

צד השרת שלנו הוא ajax.php שכל מה שהוא עושה זה לקבל פרמטר בשם myName ולהחזיר אותו הפוך. קוד צד השרת נראה כך:

<?php
if(ctype_alpha($_REQUEST['myName']))
{
	$string =$_REQUEST['myName'];
	$result = strrev($string);
	print $result;
}
else
{
	die;
}

אני שולח מחרוזת (באנגלית בלבד) ומקבל אותה חזרה הפוכה. ה-AJAX שלי צריך לקחת מחרוזת טקסט מסוימת ואז לשלוח אותה באמצעות AJAX אל דף ה-PHP. כאשר אני מקבל תגובה מוצלחת, אני אקפיץ אותה ב-alert.

הנה הדוגמא החיה:

אם תפעילו פיירבאג או WireShark תוכלו לראות את הבקשה יוצאת ואת תגובת השרת. הקוד של הג'אווהסקריפט נמצא פה:

function sendMe() {
	var myInput1 = $('myInput1').get('value'); //get string from input
	
	var myRequest = new Request({method: 'get', .//creating request
	url: 'https://internet-israel.com/internet_files/ajax_example/ajax.php', 
	data: 'myName='+myInput1,
	onSuccess: function(txt){ //onSuccess
			alert(txt);
		},
	});

	myRequest.send();
}


window.addEvent('domready', function() {
    $('myButton1').addEvent('click', sendMe);
});

בתחתית הקוד נמצא הקוד שאחראי לפעולת הכפתור שמפעיל את פונקצית sendMe.
פונקצית sendMe היא זו שבה ה-AJAX מתרחש. ראשית אני לוקח את הטקסט משדה ה-Input באמצעות get פשוט שלמדנו עליו כבר במאמר על אובייקטים של MooTools
שליחת ה-AJAX מתבצעת באמצעות class שנקרא Request. אותו class מקבל בקונסטרקטור אובייקט של אפשרויות. במקרה הזה בחרתי לכלול את האפשרויות url (הקישור שאליו נשלחת הבקשה), data (המידע שנשלח) ו-onsuccess שמכיל את הפונקציה שפועלת כאשר הבקשה מצליחה ומגיעה תשובה. ב-onsuccess אני מבצע את ה-alert שלי.

ישנן מספר אפשרויות ל-Request וכולן חשובות:
1. url – הכתובת שאליה בקשת ה-AJAX נשלחת.
2. method סוג המשלוח GET או POST (בדיפולט זה POST).
3. data – מחרוזת של טקסט (בדיפולט זה ").
4. link – מה לעשות כאשר בקשה נוספת של AJAX מגיעה בזמן שהבקשה הזו מתרחשת. אפשר להכניס לשם ignore (שזה הדיפולט) – להתעלם. אפשר להכניס cancel (לבטל את הבקשה הנוכחית) ואפשר להכניס chain (לבצע את הבקשה מיד אחרי הבקשה הקיימת).
5. async – בדיפולט זה true. אם אנחנו רוצים שזה יהיה סינכרוני (כלומר קפיאה של הדפדפן עד שהבקשה מתקבלת), נשנה ל-false ואז נקבל בעצם SJAX.
6. encoding – לשנות את הקידוד, בדיפולט זה utf-8 אבל אפשר להכניס איזה קידוד שרוצים.
7. headers אובייקט להכנסה ל-header של הבקשה. למשל:

headers: {'X-Request': 'JSON'}

8.evalScripts – בדיפולט הוא false. במידה והוא true, אז כל קוד שמגיע מהשרת שיש בין תגיות script יופעל (שימו לב! מדובר בסכנת אבטחה).
9. evalResponse בדיפולט הוא false. במידה והוא true כל הקוד שמגיע מהשרת יופעל (שימו לב! מדובר בסכנת אבטחה).
10. noCache בדיפולט הוא false, במידה והוא true אז מתווסף ערך noCache לבקשה כל פעם על מנת למנוע caching.

בנוסף לאפשרויות האלו יש לנו אירועים
onSuccess: זה אירוע שקורה כאשר יש לנו תגובה 200 של השרת. האירוע מעביר שני ארגומנטים – הראשון הוא התגובה מהשרת והשני הוא ה-XML שמגיע מהשרת.
onRequest: אירוע שקורה כאשר הבקשה לשרת מתרחשת.
onComplete: אירוע שקורה כאשר תהליך הבקשה לשרת מסתיים (לפני שקיבלנו תגובה).
onCancel: אירוע שקורה כאשר תהליך הבקשה מבוטל.
onFailure: אירוע שקורה כאשר אנו לא מקבלים תגובה 200 של השרת אלא תגובה אחרת (404, 500 וכו'). האירוע מעביר ארגומנט של אובייקט ה-XHR שאותו אפשר לבדוק ולראות מה קרה בדיוק.

אלו כל האפשרויות והאירועים של Request.

לשליחת בקשת ה-AJAX השתמשתי במתודה שנקראת send. היא יכולה להיות בלי ארגומנטים או עם ארגומנטים של אפשרויות שזהות לאפשרויות של הקונסטרקטור של Request.

למשל:

זה עושה בדיוק את אותו הדבר, אבל הפעם, אני לא יוצר Request חדש בכל קריאה אלא רק פעם אחת ואת ה-data אני מעביר באמצעות מתודת request.

var genRequest = new Request({method: 'get', 
	url: 'https://internet-israel.com/internet_files/ajax_example/ajax.php', 
	onSuccess: function(txt){ //onSuccess
			alert(txt);
		},
	});

function sendMeShort() {
	var myInput2 = $('myInput2').get('value');
	genRequest.send({data: 'myName='+myInput2});
}

מתודה נוספת שקיימת היא מתודת cancel שמבטלת את הבקשה.

עד כאן בנוגע ל-AJAX. ישנן עוד שני classים שיורשים מ-Request וגם הם קשורים ל-AJAX. אני אדבר על אחד מהם שמטפל בקריאת JSON.

JSON

Request.JSON מאפשר לנו לקבל אובייקט JSON בחזרה. הוא מקבל את כל האפשרויות של Request בנוסף לאפשרות נוספת שנקראת secure (בדיפולט true) שמריצה איזו בדיקת אבטחה על הפלט.

הנה דוגמא לקריאה לשרת שמחזיר אובייקט JSON כזה:

{ "text":"Hello, I am data from JSON.", "created_at":"August 3, 2010, 12:33 pm"}

לחיצה על הכפתור תבצע קריאה לאובייקט ה-JSON ותדפיס את שתי התכונות שלו:

איך עשיתי את זה? עם הקוד הבא:

	var myRequest = new Request.JSON({
	url: 'https://internet-israel.com/internet_files/ajax_example/json.php', 
	onSuccess: function(jsonObject){ //onSuccess
			alert("Text is : " + jsonObject.text + "\n" +
			"Created : " + jsonObject.created_at);
		},
	});

	myRequest.send();

חשוב לזכור שכל בקשות ה-AJAX הן במגבלות ה-Same Domain. כלומר, אי אפשר לעשות בקשת AJAX לדומיין אחר. אם אנו רוצים לבצע בקשת AJAX לדומיין אחר אנו צריכים להשתמש באחת מהטכניקות (proxy או flXHR או JSONP).

זהו המדריך האחרון בסדרת המדריכים על MooTools. ישנם עוד הרבה דברים שכדאי ללמוד על MooTools ובמדריך זה למדנו רק את הבסיס. הדוקומנטציה של MooTools וגם אתר הדוגמאות של MooTools יכולים לסייע מאד בלימוד הפינות השונות.