אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » JSON

JSON

רן בר-זיק אוגוסט 22, 2010 8:08 am 2 תגובות

הסבר על JSON וכיצד להשתמש ב-JSON יחד עם AJAX ו-PHP

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
AJAX JSON PHP

2 תגובות

  1. משתמש אנונימי (לא מזוהה) הגב דצמבר 16, 2018 בשעה 3:37 pm

    איך אפשר לשלוח עבור NET.

  2. יוסי הגב יוני 16, 2022 בשעה 12:06 pm

    האם יש אפשרות לקבוע בJS אם התשובה תתקבל בJSON או XML ? למשל ב Content-Type ?

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד