יום שישי, 12 באוגוסט 2011

כיצד Ajax עובד?

בקידוד מסורתי של JavaScript, אם אתה רוצה לקבל מידע כלשהו ממסד נתונים או קובץ בשרת, או לשלוח מידע משתמש לשרת, תצטרך לעשות טופס HTML ו-GET או POST נתונים לשרת. המשתמש ילחץ על הכפתור "שלח" כדי לשלוח/לקבל את המידע, להמתין עד שהשרת יגיב, ואז יטען דף חדש עם התוצאות.
בגלל שהשרת טוען דף חדש בכל פעם שהמשתמש שולח קלט, יישומי האינטרנט המסורתי נוטים לרוץ לאט ולהיות פחות ידידותיים למשתמש. עם AJAX, ה-JavaScript מתקשר ישירות עם השרת, דרך האובייקט XMLHttpRequest של ה-JavaScript.
עם בקשת HTTP, דף אינטרנט יכול לשלוח בקשה, ולקבל תשובה משרת אינטרנט, בלי לטעון מחדש את הדף. המשתמש ישאר באותו עמוד, ולא ישים לב לתסריטי הבקשה, או לשליחת הנתונים לשרת שברקע.

תמונת המחשה לאיך ש-Ajax עובד:


המשתמש שולח בקשה אשר מבצעת פעולה ואת תגובת הפעולה הוא רואה בתוך שכבה (div), מזוהה לפי id, מבלי לטעון מחדש את הדף המלא. לדוגמה שכבה עם id זה:

<div id=”ajaxResponse”></div>

בשלבים הבאים נוכל לראות כיצד ליצור XMLHttpRequest ולקבל תגובה מהשרת.

1.) יצירת XMLHttpRequest :

דפדפנים שונים משתמשים בשיטות שונות כדי ליצור את אובייקט ה-XMLHttpRequest, אקספלורר משתמש ב-activeXObject, ואילו דפדפנים אחרים משתמשים באובייקט JavaScript מובנה שנקרא XMLHttpRequest.

function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e)
{
alert(“Your browser does not support AJAX!”);
return false;
}
}
}
2.) שליחת בקשה לשרת:

כדי לשלוח את הבקשה לשרת, אנו משתמשים בשיטה open() method ובשיטה send() method.
השיטה open() method לוקחת שלוש טענות. הטענה הראשונה אשר היא מגדירה שיטה להשתמש בעת שליחת הבקשה (GET או POST). בטענה השניה מצוין את כתובת ה-URL של סקריפט בצד של השרת. בטענה השלישית מצוין כי יש לטפל בבקשה באופן אסינכרוני. השיטה send() method שולחת את הבקשה לשרת.

xmlHttp.open(“GET”,”time.asp”,true);
xmlHttp.send(null);


3. כתיבת סקריפט צד השרת:
ResponseText יאחסן את הנתונים חזרה מהשרת. כאן אנו רוצים לשלוח בחזרה את השעה הנוכחית. הקוד "time.asp" נראה כך:

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open(“GET”,”time.asp”,true);
xmlHttp.send(null);
}
5. השלם את הקוד:

עכשיו אנחנו צריכים להחליט מתי הפונקציה AJAX "מוצאת להורג" (executed). אנו נאפשר הפעלת פונקציית "מאחורי הקלעים" כאשר המשתמש יקליד משהו בשדה הטקסט שם משתמש. הקוד המלא נראה כך:

<html>
<body>

<script type=”text/javascript”>
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e)
{
alert(“Your browser does not support AJAX!”);
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open(“GET”,”time.asp”,true);
xmlHttp.send(null);
}
</script>
<form name=”myForm”>
Name: <input type=”text”
onkeyup=”ajaxFunction();” name=”username” />
Time: <input type=”text” name=”time” />
</form>
</body>
</html>

אין תגובות: