מדריך ל- AJAX

מדריך ודוגמאות לשליחת מידע ב-AJAX ל-PHP והדפסתו חזרה בדף.

רן בר-זיק
יוני 2, 2009
קטגוריה: פתרונות ומאמרים על פיתוח אינטרנט
תגיות: AJAX, סקריפטים

חשוב! המאמר הזה מאוד מיושן, עדיף להשתמש היום ב-fetch. קישור למאמר על fetch

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

אני מניח שיש לקוראים ידע בסיסי ב-PHP, JavaScript ו-HTML. במידה ולא, ישנם שפע של מדריכים בעברית בנושאים האלו שיכולים להביא אתכם לנקודה שבה תבינו את המדריך הזה.

ל-AJAX יש שני צדדים, צד ה-client (ה-HTML וה-JavaScript) וצד ה-server (צד השרת, ה-PHP במקרה שלנו). AJAX הוא ניהול תקשורת עם השרת דרך אובייקט JavaScript שנקרא xmlhttp object שמאפשר ל-JavaScript לשלוח ולקבל דרכו מידע.

הדוגמא שאנו נשתמש בה הוא טופס HTML פשוט ששולח באמצעות AJAX מחרוזת טקסט באנגלית כמו 'hello' והשרת מחזיר מחרוזת טקסט הפוכה. הסקריפט שלנו גם צריך להציג את התשובה וכל זאת כמובן בלי ריפרושים.

צד השרת

לשרת לא ממש אכפת מול מי הוא עובד. הכנת צד השרת לעבודה עם AJAX אינה שונה במקרה שלנו מהכנה שלו לעבודה מול טוםס שאינו אג'אקסי. אנחנו מניחים שהוא מקבל פרמטר ב-post או ב-get מבצעים רוטינות אבטחה קצרה ומדפיס חזרה את התגובה המבוקשת שבמקרה שלנו היא היפוך של מחרוזת הטקסט שאנו שולחים. הנה הקוד הפשוט למדי של ה-PHP:


<?php
if(ctype_alpha($_REQUEST['myName']))
{
	$string =$_REQUEST['myName'];
	$result = strrev($string);
	print $result;
}
else
{
	die;
}
?>

נשמור את הקוד תחת ajax.php ונעלה אותו לשרת הפיתוח שלנו. ו… זהו! אם אתם לא סגורים על מה זה העלאה לשרת פיתוח, אז פשוט תשתמשו ב-WAMP (ב-coders יש מדריך קצר שיסייע לכם בכך).

צד לקוח: הכנת ה-HTML

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


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test page</title>

    
</head>
<body>
    <form>
	    <fieldset>
		    <label>
		    	Text One:
		    </label>
		    <input type="text" name="myName" id="myName" title="required">
	    </fieldset>
	    <input type="button" value="go and test me" onclick="sendRequest()">
    </form>
    <div id="results" > 
    </div>
</body>
</html>

הטופס הזה שונה מטופס רגיל בכמה מובנים. ראשית, אין ל-form שום action או method כמו בטפסים סטנדרטיים. שנית, אין כפתור submit אלא סתם כפתור שמפעיל פונקציה שנקראת sendRequest ששולחת אותנו לפונקצית JavaScript. פונקצית ה-JavaScript היא זו שאחראית על הוודו של שליחת המידע שיש בטופס, קבלתו ואחרי כן הדפסתו בדף עצמו. ההדפסה תתקיים ב-div שה-id שלו הוא result.

צד לקוח: הכנת ה-JavaScript

יצירת ה-JavaScript גם היא פשוטה למדי ונחלקת ל-3 שלבים. השלב הראשון הוא לקבוע את דפדפן הגולש על מנת להבין באיזה XMLHttpRequest להשתמש. השלב השני הוא שליחת המידע דרך אובייקט XMLHttpRequest והשלב השלישי הוא קבלת התוצאה והדפסתה. זה פשוט בדיוק כמו שזה נשמע. הדוגמא שהכנתי היא רזה מאד ומעבירה רק פרמטר אחד כ-string. שימו לב להערות שיש בקוד להבנה נוספת:


<script type="text/javascript">
    // קביעת משתנה על מנת שיהיה האובייקט שלנו
    var req = createXMLHttpRequest();
//תחילת פונקציה 1: בדיקת דפדפן המשתנה שמשמש כאובייקט מקבל את התוצאה של הפונקציה הזו
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;
}
// סוף פונקציה 1

// תחילת פונקציה 2, זו שכפתור השליחה בטופס קורא לה
function sendRequest()     
{
    var str = ""; // הגדרת משתנה שיהיה מחרוזת טקסט
    str = document.getElementById("myName").value; // לוקחים את המשתנה הזה ונותנים לו ערך מתוך הטופס
    req.open('GET', 'ajax.php?myName='+str); // שליחת המידע לשרת
    req.onreadystatechange = handleResponse;  // זו התגובה מהשרת שעוברת לפונקציה שלוש. ברגע שיש מצב 4 אז פונקציה 3 עובדת
    req.send(null);// חיוני
}
// סוף פונקציה 2
// תחילת פונקציה 3 מקבלת את הפלט מהשרת מצב 4 ויורה את המידע חזרה
function handleResponse() {
 if(req.readyState == 4) //מצב 4 זה כאשר הבקשה חזרה בהצלחה
 {
 var response = req.responseText;
  document.getElementById("results").innerHTML = response; // הדפסה פשוטה של התוצאות
 }
}
// סוף פונקציה 3
</script>

וזהו, שמים את ה-script ב-head ובודקים את הכל. העליתי גם את הגרסה הזו לשרת שלי כדי שתוכלו להתרשם ולבדוק.

ב-AJAX יש הרבה יותר! מה שהראיתי פה הוא דוגמא פשוטה לחלוטין שרק מראה את העקרון. הפונקציה הראשונה היא סטנדרטית ומשמשת כמעט כל אפליקצית AJAX. את שאר הפונקציות אפשר (וצריך) לשנות על מנת לשלוח ולקבל הרבה יותר מידע ובאופן הרבה יותר מורכב.

כדאי לזכור ש-AJAX, בדומה ל-JavaScript כפוף לCross domain restriction. על מנת ליצור AJAX שיקיים תקשורת עם דומיין אחר, יש להשתמש בפרוקסי. לקריאת מאמר שמסביר על AJAX עם פרוקסי ב-PHP.

מפתחים מתקדמים יותר יוכלו לנסות שימוש ב-JSONP על מנת לקיים תקשורת עם דומיין אחר או להשתמש בפלאש (הנה דוגמא המשתמשת ב-flXHR).

מומלץ לעיין ב-jQuery AJAX המיועד להסבר כיצד לעשות AJAX עם jQuery וכן במדריך המסביר כיצד לעשות טופס יצירת קשר עם AJAX ו-jQuery.