לוגו אלי סאסי

כיצד אוכל לבצע בקשת HTTP ב-Javascript?

תוכן עניינים

ב-JavaScript, אתה יכול לבצע בקשת HTTP באמצעות פונקציית האחזור המובנית או האובייקט הישן יותר של XMLHttpRequest (XHR). הנה דוגמה לשימוש באחזור:

fetch('https://example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

קוד זה שולח בקשת GET לכתובת ה-URL https://example.com/data ומקבל תשובה.
לאחר מכן, התגובה מנותחת כ-JSON והנתונים המתקבלים מתועדים למסוף. אם מתרחשת שגיאה במהלך הבקשה, היא נתפסת ונרשמת למסוף.

אם ברצונך לשלוח נתונים יחד עם הבקשה, תוכל להעביר אובייקט אפשרויות כארגומנט השני לשליפה. לדוגמה:

fetch('https://example.com/data', {
method: 'POST',
body: JSON.stringify({ name: 'John', age: 30 }),
headers: { 'Content-Type': 'application/json' }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

קוד זה שולח בקשת POST לאותה כתובת URL, כאשר נתוני ה-JSON { name: 'John', age: 30 } בגוף הבקשה והכותרת Content-Type מוגדרת ל-application/json. התגובה מטופלת באותו אופן כמו בדוגמה הקודמת.

לחלופין, אתה יכול להשתמש באובייקט XMLHttpRequest הישן יותר, הנתמך על ידי דפדפנים ישנים יותר:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data');
xhr.onload = () => console.log(xhr.responseText);
xhr.onerror = () => console.error(xhr.statusText);
xhr.send();

קוד זה יוצר אובייקט XMLHttpRequest חדש, מגדיר את שיטת הבקשה ואת כתובת ה-URL באמצעות השיטה הפתוחה, מגדיר מטפלי אירועים עבור אירועי הטעינה והשגיאה, ושולח את הבקשה בשיטת השליחה. כאשר התגובה מתקבלת, המטפל באירועי הטעינה רושם את טקסט התגובה למסוף, ואם מתרחשת שגיאה, מטפל אירועי השגיאה רושם את טקסט הסטטוס למסוף.