JSON

JSON הוא בסך הכל פורמט להעברת נתונים בין שרת לבין סקריפט של JavaScript אבל אפשר להשתמש בו להעברת נתונים בין שרת לשרת. JSON זה בסך הכל ראשי תיבות של JavaScript Object Notation (לא שזה חשוב לזכור את זה) ומדובר באובייקט JavaScript שיש לו תכונות שונות עם ערכים.

רוצים לראות אובייקט JSON? שימו לב לזה!

{ 
"text":"Hello, I am data from JSON.", 
"created_at":"August 3, 2010, 12:33 pm"
}

סוגריים מסולסלות (שמסמלות אובייקט ב-JavaScript) ותכונות שבאות בפורמט של:
"תכונה" : "ערך",
(שימו לב לפסיק בסוף שנדרש אם יש תכונות נוספות)

וזה הכל! אם רוצים להעביר מערך באמצעות JSON, עושים את זה ככה:

{ 
"text":"Hello, I am data from JSON.", 
"created_at":"August 3, 2010, 12:33 pm",
"some_array" : ["value1", "value2", "value3"]
}

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

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

JavaScript שיוצר JSON

אני יוצר דף HTML ויוצר JavaScript כלשהו שבו יש אובייקט:

var myJsonObject = {
"title" : "myJsonObject",
"value" : "This is my value"
}

הכנה לשליחה ב-AJAX

את האובייקט הזה אני לא יכול לשלוח באמצעות AJAX אלא אני צריך להפוך אותו למחרוזת. איך אני הופך אובייקט JSON למחרוזת? מאד פשוט! יש JavaScript קטן שאחראי לכל נושא ה-JSON, להפיכה מאובייקט למחרוזת וממחרוזת לאובייקט. הסקריפט ניתן להורדה כאן. המשקל שלו כשהוא מכווץ הוא פחות מ-3 קילובייט.

אחרי שהורדתי אותו אני אציב אותו (לפני הסקריפט שלי כמובן) ואבצע את ההפיכה למחרוזת כך:

var myJsonObject = {
"title" : "myJsonObject",
"value" : "This is my value"
}

var myJsonObjectString =  JSON.stringify(myJsonObject);

שליחת המחרוזת באמצעות AJAX

אין כאן יותר מדי חוכמות. מי שמכיר AJAX אמור להכיר את אוסף הפונקציות הזה ומי שלא מכיר מוזמן להכנס למאמר המסביר על AJAX. פונקצית השליחה ל-AJAX היא:

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 handleResponse() {
 if(req.readyState == 4) 
 {
 	recieveJSON();
 }
}

function sendRequest()
{
    var str = myJsonObjectString; 
    req.open('GET', '/internet_files/JSON/json.php?myJSON='+str, true); 
    req.onreadystatechange = handleResponse;  
    req.send(null);
}

בדוגמא הזו אני שולח את אובייקט ה-JSON (לאחר שהפך למחרוזת) אל /internet_files/JSON/json.php.

צד השרת

ועכשיו אל ה-PHP. ה-PHP בעצם מקבל string, וצריך להמיר אותו לאובייקט PHP. זה נעשה בקלות מרובה באמצעות פונקצית json_decode.

< ?php
$myJSON = $_GET['myJSON'];
$obj = json_decode($myJSON, true);
$obj[title] = strrev($obj[title]);
print json_encode($obj);

לא צריך להיות תותח PHP כדי לדעת שכל מה שאני עושה זה לקבל את הסטרינג, לעשות json_decode ואז אני מקבל אובייקט שמה שאני עושה זה לבצע רברס לאחת מהתכונות שלו (title). לבסוף אני לוקח את אובייקט ה-PHP, הופך אותו חזרה לאובייקט JSON באמצעות json_encode ומדפיס אותו.

קבלת תגובה מהשרת והדפסה

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

function recieveJSON() {
var response = req.responseText;
var myObject = JSON.parse(response);
  document.getElementById("results").innerHTML = myObject.title; 
}

כאן אפשר לראות גרסה עובדת

תוצאה:

והנה הקוד במלואו:

JavaScript:

var myJsonObject = {
"title": "myJsonObject",
"value": "This is my value"
}

var myJsonObjectString =  JSON.stringify(myJsonObject);


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 handleResponse() {
 if(req.readyState == 4) 
 {
 	recieveJSON();
 }
}

function sendRequest()
{
    var str = myJsonObjectString; 
    req.open('GET', '/internet_files/JSON/json.php?myJSON='+str, true); 
    req.onreadystatechange = handleResponse;  
    req.send(null);
}

function recieveJSON() {
var response = req.responseText;
var myObject = JSON.parse(response);
  document.getElementById("results").innerHTML = myObject.title; 
}

ו-PHP:

< ?php
$myJSON = $_GET['myJSON'];
$obj = json_decode(stripslashes($myJSON), true);
$obj[title] = strrev($obj[title]);
print json_encode($obj);

אפשר לראות עד כמה JSON קל לשימוש עם PHP. לא עוד XML ו-XML parser אלא פורמט מידע נוח שקל להשתמש בו.

כמה הערות חשובות באדיבות נעם נתיב:

הקפידו להשתמש בגרשיים כפולים. החל מגרסת PHP.5.3.2 השימוש ב-JSON מחייב פורמט תיקני של JSON, שמשתמש בגרשיים כפולים בלבד ולא בגרש יחיד. בנוסף, אסור להכניס פסיק אחרי התכונה האחרונה. במידה וננסה להפעיל את json_decode על JSON לא תקני, אנו נקבל NULL.

אהבתם? לא אהבתם? דרגו!

(4 הצבעות, ממוצע: 4.25 מתוך 5)