Web Service -> JSON -> JavaScript. קל פשוט ונהדר
מיום ליום אני מתעצבן פחות על ה java script, ואני מגלה עוד דברים נהדרים שאפשר לעשות איתו.
כאן אני רוצה להראות, עד כמה זה פשוט מ JavaScript לפנות ל Web Service, לקבל מידע ב JSON, ולעבוד איתו.
שלב ראשון, נכתוב WebService.
1 public class Student
2 {
3 public string Name { get; set; }
4 public string Address { get; set; }
5 public string Phone { get; set; }
6 public int Age { get; set; }
7 }
8 [WebService(Namespace = "http://tempuri.org/")]
9 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
10 [ToolboxItem(false)]
11 [ScriptService]
12 public class JsonWebService : WebService
13 {
14
15 [WebMethod]
16 public Student[] GetAllStudent()
17 {
18 return new Student[]
19 {
20 new Student(){ Name = "Shlomo",
21 Age = 24,
22 Phone = "123456",
23 Address = "Elad"},
24
25 new Student(){ Name = "Yossi",
26 Age = 23,
27 Phone = "543256",
28 Address = "Beni brak"},
29
30 new Student(){ Name = "Tomer",
31 Age = 30,
32 Phone = "0000000",
33 Address = "Tel Aviv"}
34 };
35 }
36 }
37 }
הגדרנו class כלשהו, ואנחנו מחזירים מערך שלו במתודה של web service.
כעת נכתוב מתודה ב JavaScript, שיודעת לפנות לשרת ולהחזיר JSON, (במחרוזת)
את הקוד הבא העתקתי (עם קצת שינויים)
מכאן:
38 function GetSynchronousJSONResponse(url, postData) {
39 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
40
41 //false means synchronous
42 xmlhttp.open("POST", url, false);
43 xmlhttp.setRequestHeader("Content-Type",
44 "application/json; charset=utf-8");
45
46 xmlhttp.send(postData);
47 var responseText = xmlhttp.responseText;
48 return responseText;
49 }
המתודה מקבלת url של web Service + web method, ו postData שזה פרמטרים עבור המתודה.
מייצרים אובייקט של xmlhttp,
מגדירים את כל ההגדרות, ומצפים לתשובה.
כעת נראה את הקריאה למתודה.
50 function GetData() {
51 var url = 'http://localhost/jsondemp/JsonWebService.asmx/GetAllStudent';
52 var result = GetSynchronousJSONResponse(url, null);
53
54 }
במידה ונעשה alert למה שחוזר, נראה את הדבר הבא:
כעת מה שנשאר, זה להפוך את המחרוזת הזאת לאובייקט JSON, שאפשר לעבוד איתו.
נכתוב את הקוד הבא:
55 function GetData() {
56 var url = 'http://localhost/jsondemp/JsonWebService.asmx/GetAllStudent';
57 var result = GetSynchronousJSONResponse(url, null);
58 //alert(result);
59 result = eval('(' + result + ')');
60
61 for (var i = 0; i < result.d.length; i++) {
62 var person = result.d[i];
63
64 var name = person.Name;
65 var phone = person.Phone;
66
67
68 }
69 }
כמו שאתם רואים ה eval מקמפל את המחרוזת לאובייקט שמכיל persons,
וכעת אנחנו יכולים לעבוד עם זה בקלות.