XMLHttpRequest

(XMLHttpRequest, XHR) XMLHTTP — סט API, משתמש בשפות JavaScript, JScript, VBScript ודומות להן כדי לשלוח נתונים שונים (XML, XHTML, JSON וכו') בפרוטוקול HTTP בין דפדפן ו- שרת אינטרנט. מאפשר לבצע בקשות HTTP לשרת מרוחק ללא צורך בטעינת דף מחדש.

XMLHTTP הוא חלק חשוב של טכנולוגיה AJAX (Asynchronous JavaScript And XML), משתמש באתרים רבים כדי לבנות יישומים דינמיים, המגיבים מהר לבקשות משתמש. לדוגמה, XMLHTTP משתמש באתרים כמו Gmail, Google Suggest, MSN Virtual Earth.
XMLHTTP עובד רק עם קבצים, שנמצאים באותו דומיין, יחד עם דף המשתמש ב- XMLHTTP. כמו במקרה של JavaScript, זה נעשה בגלל ההבטחה (cross-site scripting).

חוץ משליחת XML, דרך XMLHTTP ניתן להחליף נתונים של טופס וגם מחרוזות טקסט.

היסטוריה

בראשונה פותח על ידי חברת Microsoft, נמצא ברכיב של Outlook Web Access של תוכנת Microsoft Exchange Server 2000. נקרא IXMLHTTPRequest. מאוחר יותר פיתוחים נכנסו לתוך MSXML 2.0 בתור אובייקט ActiveX, שנגיש דרך JScript, VBScript, או דרך שפות של סקריפטים אחרות, שנתמכות על ידי דפדפן. MSXML 2.0 נכלל בתוך דפדפן Internet Explorer 5.

תוכניתנים של פרויקט Mozilla אחרי זה פיתחו גרסה משותפת, שנקראת nsIXMLHttpRequest בתוך Mozilla 0.6. גישה לרכיב בוצעה דרך אובייקט JavaScript, שנקרא XMLHttpRequest. אבל, היה ניתן לקבל פונקציונליות מלאה רק ב- Mozilla 1.0. בהמשך אפשרות הזאת גם הייתה מתממשת על ידי חברת Apple החל מ- Safari 1.2, דפדפן אח של Konqueror, על ידי חברת Opera Software החל מ- Opera 8.01, וכנראה גם על ידי אחרים.

גרסה אחרונה רשמית - גרסה 1.0 (XMLHttpRequest גרסה 1.0 מ-19 לנובמבר 2009), יש לה סטטוס של טיוטה לאישור (Last Call Working Draft) וגרסה 2.0 (XMLHttpRequest רמה 2 מ-20 לאוגוסט 2009 ), שיש לה סטטוס של טיוטה.

שיטות של מחלקה XMLHttpRequest

שיטה	תיאור
abort()	מבטלת בקשה נוכחית, מוחקת כל הכתרות, מגדירה טקסט של תשובה של השרת ל- null.
getAllResponseHeaders()	מחזירה רשימה מלאה של כותרות HTTP בתור מחרוזת. כותרות מופרדות עם סימן העברת טקסט (CR+LF). אם דגל של שגיה שווה ל- true, מוחזרת מחרוזת רייקה. אם סטטוס שווה ל-0 או ל-1, מופעלת שגיה INVALID_STATE_ERR.
getResponseHeader(headerName)	מחזירה ערך של כותרת שצוינה. אם דגל של שגיה שווה ל- true, מוחזר null. אם כותרת לא נמצאת, מוחזר null. אם סטטוס שווה ל-0 או ל-1, מופעלת שגיה INVALID_STATE_ERR.
open(method, URL, async, userName, password)	מגדיר שיטה, URL ואופציות אחרות של בקשה; פרמטר async מגדיר, האם עבודה מתבתעת במצב אסינכרוני. שלושה פרמטרים האחרונים הם לא חובה.
send(content)	שולחת בקשה לשרת.
setRequestHeader(label, value)	מוסיפה כותרת HTTP לבקשה.
overrideMimeType(mimeType)	מאפשרת לציין סוג mime של המסמך, אם שרת לא העביר אותו או העביר לא נכון. שימו לב: שיטה לא קיימת ב- Internet Explorer!

תכונות של מחלקה XMLHttpRequest

תכונה	סוג	תיאור
onreadystatechange	EventListener	מטפל אירוע, שמתבצע בכל שינוי של מצב האובייקט. שם חייב להיות רשום באותיות קטנות.
readyState	unsigned short	מצב הנוכחי של האובייקט ( 0 - לא מוגדר, 1 - פתוח, 2 - שליחת נתונים, 3 - קבלת נתונים, 4 - נתונים הועלו )
responseText	DOMString	טקסט של תשובה לבקשה. אם סטטוס לא 3 או 4, מוחזרת מחרוזת רייקה.
responseXML	Document	טקסט תשובה לבקשה בצורת XML, שניתן לשנות אותו באמצעות DOM. אם סטטוס לא 4, מוחזר null.
status	unsigned short	סטטוס HTTP בצורת מספר ( 404 — «Not Found», 200 — «OK», ... )
statusText	DOMString	סטטוס בצורה של מחרוזת («Not Found», «OK», ...). אם סטטוס לא זוהה, דפדפן של המשתמש יפעיל שגיה INVALID_STATE_ERR.

שגיות מופעלות על ידי מחלקה XMLHttpRequest

שם	קוד	תיאור
SECURITY_ERR	18	מופעלת בניסיון לסיים בקשה, שאסורה בהגדרות הבטחה של דפדפן משתמש.
NETWORK_ERR	101	מופעלת בשגיה ברשת ( בזמן בקשה סינכרונית ) .
ABORT_ERR	102	מופעלת בהפסקת בקשה על ידי המשתמש ( בזמן בקשה סינכרונית ).

דוגמאות שימוש

תוכנית עבודה עם אובייקט XMLHttpRequest ניתן להציג בצורה הבאה:

יצור מופע של האובייקט XMLHttpRequest
הגדרת מטפל אירוע
פתיחת חיבור ושליחת בקשה

יצור מופע של האובייקט XMLHttpRequest

בשלב הזה דרוש יישום שונה לדפדפנים שונים. מבנה יצור של האובייקט שונה: ב- IE 5 - IE 6 הוא בוצע דרך ActiveXObject, בדפדפנים שונים (IE 7 ומתקדמות יותר, Mozilla, Opera, Chrome, Netscape ו- Safari) — כי אובייקט מובנה מסוג XMLHttpRequest.

בקשה עבור גרסאות מוקדמות של Internet Explorer:

var req = new ActiveXObject("Microsoft.XMLHTTP");

בדפדפנים אחרים:

var req = new XMLHttpRequest();

כלומר, כדי לספק התאמה של קוד בדפדפנים שונים, יש לבדוק קיום אובייקטים window.XMLHttpRequest ו- window.ActiveXObject, ותלוי באיזה אובייקט קיים, להשתמש בו.

בתור פיתרון אוניברסלי אנחנו מצעים להשתמש בפונקציה הבאה:

function createRequestObject()
{
if (XMLHttpRequest == undefined) {

  XMLHttpRequest = function() {
    try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }

      catch(e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }

      catch(e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP"); }

      catch(e) {}
    try { return new ActiveXObject("Microsoft.XMLHTTP"); }

      catch(e) {}
    throw new Error("This browser does not support XMLHttpRequest.");

  };
}
    return null;
}

הגדרת מטפל אירוע, פתיחת חיבור ושליחת בקשה

הפעלות האלה נראות ככה:

req.open(<"GET"|"POST"|...>, <url>, <asyncFlag>);

req.onreadystatechange = processReqChange;

אחרי הגדרות של כל הפרמטרים של בקשה נשאר רק לשלוח. זה מתבצע באמצעות פונקציה send(). אם נדרש לשלוח לשרת נתונים POST, יש לשים אותם בתור פרמטר של הפונקציה. נתוני POST צריכים להקבץ במחרוזת URL-escaped (קידוד UTF-8) והוספה כותרת

req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

במילים אחרות מחרוזת הזאת תראה למה שאנחנו רגילים, שהתרגלנו לראות בשורת סטטוס של דפדפן, בשליחת נתונים בשיטה GET. בשליחת בקשה GET עבור גרסה ללא ActiveX יש לציין פרמטר null, במקרים אחרים ניתן לא לציין אף פרמטר. לא תהיה טעות, אם לכל ה- GET תמיד יצוין פרמטר null:

req.send(null);

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

var req;
 
function loadXMLDoc(url)
{
    req = null;

    if (window.XMLHttpRequest) {
        try {
            req = new XMLHttpRequest();

        } catch (e){}
    } else if (window.ActiveXObject) {

        try {
            req = new ActiveXObject('Msxml2.XMLHTTP');

        } catch (e){
            try {
                req = new ActiveXObject('Microsoft.XMLHTTP');

            } catch (e){}
        }
    }

 
    if (req) {       
        req.open("GET", url, true);

        req.onreadystatechange = processReqChange;
        req.send(null);

    }
}
 
function processReqChange()
{
  try { // Important!

    // only for status "complete"
    if (req.readyState == 4) {

        // for status "OK"
        if (req.status == 200) {

            // answer processing
        } else {
            alert("Unable to get data:n" +

                req.statusText);
        }
    }
  }
  catch( e ) {

      // alert('Caught Exception: ' + e.description);
      // In connection with the bug XMLHttpRequest in Firefox have to catch a bug
      // Bugzilla Bug 238559 XMLHttpRequest needs a way to report networking errors
      // https://bugzilla.mozilla.org/show_bug.cgi?id=238559
  }
}

בעיות ידועות

בעיה עם מטמון ב- Microsoft Internet Explorer

Internet Explorer מכניס בתוך המטמון בקשות GET. מחברים שלא מכירים את תהליך מטמון של HTTP, מצפים, שבקשות GET לא במטמון, או שמטמון ניתן להקוף, כמו במקרה של לחיצה עח כפתור חידוש המסך. במספר מקרים הימנעות ממטמון זאת שגיה. אחת מהפתרונות היא שימוש בשיטה POST, שאף פעם לא במטמוןף אבל הוא מיועד למטרות אחרות. פתרון אחר הוא שימוש בשיטה GET, שמכילה מחרוזת ייחודית עבור כל בקשה, כפי שהוצג להלן:

req.open("GET", "xmlprovider.php?hash=" + Math.random());

יש לזכור, שיטה הזות מפוצצת מטמון. עדיף להשתמש בהגדרת כותרת Expires לתאריך שעבר בסקריפט שלכם, שיוצר תוכן XML. ב-PHP זה יהיה ככה:

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // disable IE caching
header("Last-Modified: " . gmdate( "D, d M Y H:i:s") . " GMT"); 
header("Cache-Control: no-store, no-cache, must-revalidate"); // HTTP/1.1
header("Pragma: no-cache"); // HTTP/1.0

בסרבלטים של Java זה יהיה ככה:

response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "must-revalidate");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Cache-Control", "no-store");
response.setDateHeader("Expires", 0);

אחרת ניתן לחייב אובייקט XMLHttpRequest תמיד להוציא תוכן חדש, ללא שימוש במטמון.

req.open("GET", "xmlprovider.php");
req.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
req.send(null);

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

האם מידע זה היה מועיל?

כן לא