Native JSON Support in IE8
עבודה עם פורמט JSON ב - IE8
בהמשך לפוסטים שלי על
IE8 נראה הפעם אילו חידושים קבלנו ב - IE8.
כדי לעבוד עם JSON ב - javascript אנחנו צריכים להכיר את שלושת המתודות הבאות
-
JSON.stringify
-
JSON.parse
-
toJSON
בעזרת stringify נוכל לקחת אובייקט ולהמיר אותו למחרוזת בפורמט JSON.
לדוגמא:
הדוגמא הבאה מדגימה קריאה ל - WebService ושליחת אובייקט שטוח בפורמט JSON
נניח שיש לנו WebService עם מתודה שנראת כך:
[WebMethod]
public void HelloWorld(string person)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
Person x = serializer.Deserialize<Person>(person);
}
נוכל לקרוא לה מ - javascript בצורה הבאה:
function stringifyDemo() {
var Person = new Object();
Person.Name = 'Shlomo';
Person.Age = 25;
var xhr = new XMLHttpRequest();
var url = "WebService1.asmx/HelloWorld?person=" + JSON.stringify(Person);
xhr.open("GET", url, true);
xhr.send('');
}
כמו שאפשר לראות קריאה פשוטה ל - JSON.stringify מקבלת אובייקט וממירה אותו למחרוזת.
המתודה stringify יודעת גם לקבל פונקצייה להפעלה בזמן ההמרה.
הדוגמא הבאה מדגימה איך ניתן לשלוח מערך של מחרוזות בפורמט JSON כשכולם עוברים המרה לאותיות גדולות
function stringifyDemoReplaceToUpper() {
var data = new Array();
data[0] = "a";
data[1] = "ab";
data[2] = "edwqe";
data[3] = "dfvgd vf";
var xhr = new XMLHttpRequest();
var url = "WebService1.asmx/GetArray?data=" + JSON.stringify(data,
function replaceToUpper(key, value) {
for (var i = 0; i < value.length; i++) {
value[i] = value[i].toString().toUpperCase();
}
return value;
});
xhr.open("GET", url, true);
xhr.send('');
}
במדה והאובייקט שממירים אותו בעזרת stringify מכיל מתודה בשם toJSON המתודה תופעל בצורה אוטומטית.
בדוגמא רואים כיצד קריאה ל - stringify על אובייקט מסוג Person מחזיר למעשה מחרוזת שמייצג אובייקט מסוג PersonJ (שלא מכיל מאפיין בשם Name)
function toJSONDemo() {
var Person = new Object();
Person.FirstName = 'Shlomo';
Person.Age = 25;
Person.LastName = 'Goldberg';
Person.Name = Person.FirstName + " " + Person.LastName;
Person.toJSON = function(key) {
var PersonJ = new Object();
PersonJ.FirstName = this["FirstName"];
PersonJ.Age = this["Age"]; ;
PersonJ.LastName = this["LastName"];
return PersonJ;
}
var xhr = new XMLHttpRequest();
xhr.open("GET", "WebService1.asmx/Person2?data=" + JSON.stringify(Person), true);
xhr.send('');
}
בעזרת JSON.parse נוכל להמיר מחרוזת לאובייקטים.
לדוגמא, ה - WebService הבא מחזיר אובייקט שטוח
[WebMethod]
public string GetPerson()
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
return serializer.Serialize(new Person() { Age = 25, Name = "Shlomo" });
}
כשבצד הלוקח נוכל לקרוא לה כך
function JSONParseDemo() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "WebService1.asmx/GetPerson", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var person = JSON.parse(xhr.responseXML.text);
}
}
xhr.send('');
}