מדריך / AJAX – תקשורת עם השרת ללא רענון הדף

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

 

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

שפת AJAX נמצאת היום בקידמת טכנולוגיית בניית האתרים הדינאמיים. בעקבות הפתרון שהיא מציעה, שהוא שילוב של מספר אלמנטים בתכנות אתרים על-מנת לתקשר עם השרת באתר האינטרנט ללא רענון הדף, אנו יכולים ליצור כלים דינאמיים רבים, ביניהם טופס צור קשר דינאמי, שליחת תגובות באתר וצפייה מיידית בהן, ואולי הדוגמא הכי טובה, צ’אט מבוסס web בלבד.

אז מה אנחנו צריכים לדעת לפני שאנחנו ניגשים לטכנולוגיית AJAX?

1) שפת סימול לאתרי אינטרנט: HTML
2) שפת תכנות צד-לקוח: כגון JavaScript
3) שפת תכנות צד-שרת: כגון PHP

כיצד עובדת הטכנולוגיה?

 

הסבר:

AJAX מקבלת ערך מהלקוח, שולחת אותו דרך אובייקט XMLHttp שעליו נסביר בהמשך, אל קובץ ה-PHP (שנמצא בצד השרת). בקובץ ה-PHP נמצאת הפונקציה שמטפלת בקלט מצד הלקוח, מחזירה ערך אל אותו XMLHttp. באובייקט XMLHttp ישנה שיטה הנקראת OnReadyStateChange הבודקת אם הערך שבפונקצייה המטפלת בקלט הנמצאת בקובץ ה-PHP השתנה. במידה והוא השתנה, היא מחזירה את הפלט החדש לצד הלקוח.

צד הלקוח:

קוד ה-HTML:

(Example.html)

<html>
<head>
<title>Ajax Sample Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="XMLHttp.js"></script>
</head>
<body>

 

 

 

 

 

הסבר:

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

קוד ה-JavaScript:

(XMLHttp.js)

var req = createXMLHttpRequest();
function createXMLHttpRequest() {
    var ua;
    if(window.XMLHttpRequest) {
        try {
            ua = new XMLHttpRequest();
        }
        catch(e) {
            ua = false;
        }
    }
    else if(window.ActiveXObject) {
        try {
            ua = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e) {
                ua = false;
            }
        }
        return ua;
    }

function ajaxChangeText()
{
    var str = "";
    str = document.getElementById("myDiv").value;
    req.open('GET', 'ServerResponse.php?myDiv='+str);
    req.onreadystatechange = handleResponse;
    req.send(null);
}

function handleResponse() {
    if(req.readyState == 4)
    {
        var response = req.responseText;
        document.getElementById("myDiv").innerHTML = response;
    }
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

הסבר:

הפונקציה createXMLHttpRequest: בחלק הראשון של הפונקציה, אנו מתאימים את אובייקט ה-XMLHttp לדפדפן. אם הדפדפן הוא אינטרנט אקספלורר, אנו צריכים להקצות לו ActiveX בעזרת הפקד Microsoft.XMLHttp. אם הדפדפן שונה, אנו מקצים לו את השיטה XMLHttpRequest הנמצאת באובייקט window. הפונקציה ajaxChangeText: אנו מקבלים את המחרוזת מהדף בעזרת getElementByID ושולחים את הבקשה בעזרת האוביקט req (שורה ראשונה) שיצרנו ע”י הפונקציה createXMLHttpRequest.

בעזרת השיטה onreadystatechange אנו יודעים מתי האובייקט השתנה, וכאשר הוא משתנה אנו קוראים לפונקציה handleResponse. הפונקציה handleResponse: הפונקציה בודקת אם התגובה של השיטה onreadystatechange מקבלת 4, כלומר השינוי שנשלח מקובץ ה-PHP בוצע בהצלחה. במידה וכן, ה-DIV הנקרא “MyDiv” (הטקסט שהולך להשתנות) מקבל את הערך שמוצב ל-response ע”י השיטה responseText.

צד השרת:

קוד ה-PHP:

(ServerResponse.php)

<?php
if(ctype_alpha($_REQUEST['myDiv'])) {
    $string = $_REQUEST['myDiv'];
    $result = "מוהאהא! הטקסט השתנה!";
    print $result;
    }
else {
    die;
    }
?>

 

 

 

 

 

 

הסבר:

הפונקציה ctype_alpha בודקת האם כל התווים שהוגשו לקובץ הם אלפאבתיים, כלומר אם המחרוזת נשלחה בהצלחה. בשורה השנייה אנו מציבים את התווים שהתקבלו למחרוזת בעזרת המשתנה REQUEST, מה שבפועל לא משנה כי אנו מדפיסים תוצאה אחרת לגמרי, אלא רק לשם הלמידה. בשורה השלישית אנו מורים לקובץ להדפיס למשתמש את המחרוזת “מוהאהא! הטקסט השתנה”.

אבישי בר

מנהל מוצר. מפתח Web ו-React Native, חולה גאדג'טים, הולך נגד הזרם ואוהב את כל מה שקשור לגוגל, לאנדרואיד ולקוד פתוח. עיסוקו העיקרי הוא לפרק לחלקים כל צעצוע חדש שמגיע למשרד ואז לכתוב עליו מדריך.

הגב

9 תגובות על "מדריך / AJAX – תקשורת עם השרת ללא רענון הדף"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

סידור לפי:   חדש | ישן | הכי מדורגים
יהודה
Guest

תיקון חשוב, לא מדובר בלוגו של אתר ה-W3C, מדובר באתר בשם W3Schools השייך לחברה נורווגית שאינה קשורה לארגון ה-W3C.

מורן בר
Admin

תודה יהודה. כתבנו למטה שמדובר באתר המלמד את הטכנולוגיה, אבל כדי למנוע בלבול מיד נחליף את התמונה.

יואב
Guest

כמו תפיסתו של בן לאדן – באיחור אופנתי של 10 שנים…

בכל אופן מוטב מאוחר מאשר אף פעם לא

elad
Guest

האתר המוביילי לא מאפשר שליחת תגובה בלי גוף אז הנה

elad
Guest

FAIL רציתי לכתוב שיואב הרג אותי מצחוק :)

איציק יתום
Guest
@יואב @משה עברי, אכן לא טכנולוגיה חדשה, אבל אם תסתכלו על המצב היום ברשת, במיוחד בארץ נראה שרוב המפתחים לא מכירים אותה. הייתי מתייחס קצת יותר ליתרונות וחסרונות, ובאילו מקרים כדאי להשתמש בטכנולוגיה זו. אזכיר כאן מספר חסרונות – 1. חסרון משמעותי הוא העובדה שהתוכן המוחזר מהשרת אינו חשוף למנועי חיפוש, מכיוון שהם לא מריצים ג’אווה סקריפט – עולם שלם של תוכן נעלם מהרדאר. 2. מכיוון שאין ממש החלפת דפים – לא נשמרת הסטוריית גלישה, לא ניתן לנוע אחורה וקדימה בדפדפן, ולא ניתן לחזור למצבים מסויימים בדף, אלא אם כן מטפלים בזה בצורה מפורשת בכתיבת קוד נוסף בצד הלקוח. 3.… Read more »
wpDiscuz

תגיות לכתבה: