בימיו הראשונים של האינטרנט, דפי אינטרנט היו סטטיים, כלומר כדי לראות תוכן חדש או לשלוח מידע לשרת, היה צורך לטעון מחדש את כל הדף, וזה כמובן פוגע בחוויית המשתמש ובעיקר במהירות האתר, כי אם אנחנו אחרי כל פעולה צריכים לבצע ריענון, זה אומר שכל פעם אנחנו מטעינים מחדש את הדף שלנו. הפתרון היה משהו שנקרא AJAX.
זהו ראשי תיבות של Asynchronous JavaScript And XML, והיא לא שפת תכנות אלא טכניקת פיתוח אתרים המאפשרת לנו לקרוא ולשלוח נתונים לשרת באופן אסינכרוני, מבלי שנצטרך לשבש את חווית המשתמש של הדף הנוכחי כמו לדוגמה ריענון הדף - מה שיוצר חוויית גלישה רציפה ונעימה יותר.
הכל די מובן, אבל מה זה XML? אז XML הוא פורמט לעברת נתונים ברשת בדיוק כמו JSON, פשוט עם הזמן, העדפות המתכנתים התפתחו, והיום נוטים להשתמש יותר בפורמט הנתונים JSON, שהוא פשוט יותר לכתיבה וקריאה.
בעזרת AJAX, מתכנתים יכולים לבצע בקשה לשרת ולקבל תגובה עם נתונים חדשים, כמו פוסטים חדשים שהתווספו לבלוג או עדכוני מלאי בחנות מקוונת, מבלי שהמשתמש ירגיש בתהליך הזה, כלומר הדף נשאר פעיל והמידע מתעדכן ברקע.
נניח שיש לכם רשימה של משימות. עם AJAX, כשמשתמש מוסיף משימה חדשה, היא יכולה להופיע ישירות ברשימה מבלי שיצטרך לחכות שהדף כולו יטען מחדש.
לדוגמה, כשמשתמש ממלא טופס ושולח אותו, AJAX מאפשר לשלוח את המידע לשרת, ובמקביל המשתמש יכול להמשיך בפעולות אחרות באתר ללא הפרעה.
דמיינו שאתם נמצאים בדף אינטרנט שצריך לעדכן את התוכן שלו או לשלוח נתונים על סמך פעולות המשתמש, כגון לחיצה על כפתור. זה מה שקורה מאחורי הקלעים:
משהו קרה בדף, זה יכול להיות לחיצה על כפתור שגרמה ל-event (כלומר לפעולה מסוימת).
יצירת אובייקט מסוג XMLHttpRequest והכנת הבקשה לשרת. בעבר, JavaScript השתמשה באובייקט בשם XMLHttpRequest כדי לשלוח בקשות לשרת ולקבל תגובות ממנו, מבלי לטעון מחדש את הדף. כיום, השימוש ב-XMLHttpRequest נחשב לדרך פחות מודרנית. במקום זאת, מפתחים מעדיפים להשתמש ב-Fetch API, שמספקת גישה פשוטה ונוחה יותר לביצוע בקשות HTTP באופן אסינכרוני.
הבקשה נשלחת מהדפדפן שלנו לשרת. השרת מקבל ומעבד את הבקשה שלנו ושולח בחזרה את התוצאה (response) שמכילה נתונים שנשלחים בחזרה לדפדפן.
כשאנחנו מקבלים את הנתונים, JavaScript קורא את התגובה ומעדכן את דף האינטרנט ללא טעינה מחדש, בהתבסס על הנתונים שקיבלנו מהשרת.
function loadPost(postId) {
var xhr = new XMLHttpRequest(); // Create a new XMLHttpRequest object
xhr.open('GET', `/post?id=${postId}`, true); // Initialize the request
// Define the function to be called when the request is completed
xhr.onreadystatechange = function () {
// Check if the request is complete and was successful
if (xhr.readyState == 4 && xhr.status == 200) {
// Update the postContent element with the response from the server
document.getElementById('postContent').innerHTML = xhr.responseText;
}
};
xhr.send(); // Send the request to the server
}בעוד שהאובייקט XMLHttpRequest עשה פלאים, דפדפנים מודרניים אימצו את Fetch API, אשר מציע דרך חזקה וגמישה יותר לאותן התהליכים. Fetch API משתמש ב-Promises שמספקת דרך נוחה ויעילה לנהל פעולות אסינכרוניות בקוד. בנוסף הוא מפשט את ה-Syntax מה שמקל על הכתיבה והשימוש בו. הנה דוגמה ל-Fetch API:
async function loadPost(postId) {
try {
const response = await fetch(`/post?id=${postId}`);
const data = await response.text();
document.getElementById('postContent').innerHTML = data;
} catch (error) {
console.error('Error:', error);
}
}בעצם ראינו שני דרכים ליישם את העקרונות של AJAX, אחד דרך XMLHttpRequest שהיא כבר נחשבת ליישנה יותר, והשנייה Fetch API שהיא הבחירה המודרנית והמקובלת, אבל שניהן מבצעות מה שנקרא AJAX calls, פשוט היישום שלהם שונה.
AJAX סללה את הדרך לבניית אתרים טבעיים יותר שמשפרים את חווית המשתמש לרמה חדשה לחלוטין. ככל שהטכנולוגיה ממשיכה להתפתח, טכניקות ישנות כמו XMLHttpRequest מתחלפות עם טכניקות ויישום חכם יותר כמו Fetch API. מה שמבטיח שלמתכנתי אתרים יש את הכלים הטובים ביותר ליצירת חוויות חלקות ואינטראקטיביות למשתמשים.