הקדמה ל-AJAX

‏ • 12 בדצמבר, 2005

לאחרונה אפשר לראות באינטרנט סוג "חדש" של אפליקציות שחלקן מהוות תחליף לאפליקציות שולחן העבודה ויוצרות חווית משתמש חדשה. הן נקראות אפליקציות AJAX.

מה זה AJAX?

AJAX זה ר"ת של Asynchronous JavaScript And XML, "שיטה" (Method) עבור יצירת קשר בין הלקוח לשרת לפי בקשת המשתמש (דהיינו לא בו זמנית עם טעינת העמוד), AJAX אינה טכנולוגיה חדשה ולמעשה היא מורכת משילוב של שימושים שונים בטכנולוגיות ושפות שונות. השם ל"שיטה" זו ניתן ע"י חברת Adaptive Path בפברואר 2005. אפליקציות כמו Instant Yahoo, Google Earth הן אפליקציות AJAX העונות על מס' דרישות:

  1. התצוגה תהיה תקינה – שימוש ב-XHTML+CSS,
  2. התצוגה תהיה דינמית ואינטראקטיבית עם המשתמש בעזרת DOM,
  3. העברה וניתוח של מידע ע"י שימוש ב-XML ו-XSLT,
  4. החזרת מידע באופן אסינכרוני ע"י שימוש באובייקט XMLHttpRequest,
  5. שימוש ב-JS כדי לאחד הכל.

בשוק קיימים דפדפנים רבים (אקספלורר, פיירפוקס, אופרה, ספארי,…) וכל דפדפן מיישם באופן שונה את הDOM ה-CSS וה-JavaScript מהאחר, למרות שקיים תקן עבור שפות אלו (למעט אובייקט XMLHttpRequest). ולכן נוצר צורך לכתוב קודי התאמה בין הדפדפנים השונים, לרוב עוטפים אותם במחלקות כדי ליישם מחזוריות של קוד. כדי שלא כל מתכנת יצטרך לכתוב בעצמו קוד התאמה לדפדפנים ובכך לבזבז זמן פיתוח של הפרוייקט עליו הוא עובד – קמו אנשים וכתבו ספריות לשימוש (ושחררו אותם תחת רישיון של קוד פתוח), כך צמחו ספריות כמו Prototype ו-Dojo Toolkit. כל מתכנת יכול לבחור את הספרייה הנוחה עבורו.

אחד הדגשים ששמים לרוב באפליקציות AJAX היא שמישות הממשק משתמש, כיוון שבאפליקציות AJAX אין מעברי עמוד – העמוד מתפקד כמו תוכנה (ישנם אפילו אפליקציות AJAX שמנסות להיראות כמו אפליקציות שולחן עבודה – Writely ודומים אחרים), ולכן אם הממשק משתמש לא יהיה שמיש האפליקצייה לא תצליח. עקב כך צמחו ספריות כמו Rico Prototype או script.aculo.us שמספקות אפקטים ופקדים מתקדמים ומבוקשים כמו Drag N' Drop ,Sliders וכו' אשר מותאמים למס' דפדפנים ובנויים על גבי ספריות ההתאמה שדוברו לעיל ( script.aculo.us ו-Rico למשל נבנו על גבי Prototype).

ישנם מתכנתי צד שרת שלא יודעים או לא מעוניינים לדעת (מסיבות שונות) JavaScript – אבל כן רוצים לבנות אפליקציות AJAX – ולכן נבנו ספריות שונות עבור אותם מתכנתים. קוד צד הלקוח נעשה עבורם והם רק צריכים להגדיר איפה ועל מה הם רוצים להשתמש ב-AJAX וליצור את העמוד שמעבד ומחזיר את המידע בסגנון XML.

במה זה שונה?

במודל המסורתי של בניית אתרים המשתמש עובר מעמוד לעמוד כלומר מתקיים מצב של העברה-עצירה-העברה-עצירה והתעבורה גודלת. כאשר בונים אפליקציית AJAX המצב משתנה. טוענים "שכבה" אחת שמקשרת בין הלקוח לשרת – מנוע ה-AJAX, ואת קבצי העיצוב והתוכן הבסיסיים. בכל פעולה של משתמש ביכולתך לטעון חלקים של מידע שרלוונטיים לבקשת המשתמש, אתה מעביר רק את המידע ולא שום דבר אחר (המידע יכול להיות בתצורת XML או טקסט רגיל) ומציגים אותו ללקוח (בין הפעולות אפשר להוסיף גם סטטוס של הפעולה – כמו "טעינה…" וכו'), ובכך אנו מקטינים את התעבורה של האתר ע"י טעינה מוקדמת של הספריות לזכרון המטמון ה-Cache) של הדפדפן.ע"י עשיית פעולות אלה אנו משיגים:

  • אחדות ממשק משתמש.
  • הקטנת תעבורה.
  • הפרדת תוכן מתצוגה וקוד.

קישורים עניינים:

  • כל ספריות ה-AJAX הקיימות מחולקות לפי קטגוריות.
  • Ajaxian – בלוג שאוסף תכנים על אפליקציות וספריות של AJAX, ודיונים פתוחים לגבי השיטה ואיך מתמודדים עם קשיים שונים.
  • ההכרזה על שיטת AJAX ע"י חברת Adaptive Path, מומלץ לקריאה.
  • איפה להשתמש? – איפה כדאי להשתמש ביכולות ה-Ajax ואיפה ממש לא כדאי להשתמש ב-Ajax. מומלץ לקריאה.

במאמרים הבאים אני אסביר על איך יוצרים Wrapper אישי עבור תאימות הדפדפנים, שימוש בספריית Prototype ועל סוגי שימושים ב-AJAX.

תגיות: ,

ניר טייב

בונה אתרים ומתכנת בשפות:HTML, CSS, JavaScript, PHP 5, JSP&Servlets ורובי.

תגובות בפייסבוק