การใช้ JSON ในโปรโตคอลข้อมูลของ Google

คําเตือน: หน้านี้เกี่ยวกับ API แบบเก่าของ Google ซึ่งก็คือ Google Data API โดยเกี่ยวข้องกับ API ที่แสดงอยู่ในไดเรกทอรี Google Data API เท่านั้น โดยหลาย API ถูกแทนที่ด้วย API ที่ใหม่กว่า สําหรับข้อมูลเกี่ยวกับ API ใหม่โดยเฉพาะ โปรดดูเอกสารประกอบของ API ใหม่ ดูข้อมูลเกี่ยวกับการให้สิทธิ์คําขอด้วย API ใหม่ได้ที่การตรวจสอบสิทธิ์และการให้สิทธิ์บัญชี Google

บทความนี้ครอบคลุมเนื้อหา JSON ตามที่ใช้ภายในโปรโตคอลข้อมูลของ Google ดูข้อมูลเพิ่มเติมเกี่ยวกับโปรโตคอลดังกล่าวได้ที่คู่มือสําหรับนักพัฒนาซอฟต์แวร์

คุณสามารถใช้ JSON กับภาษาโปรแกรมใดก็ได้ แต่ตัวอย่างในเอกสารฉบับนี้เป็น JavaScript

เกี่ยวกับฟีด JSON และฟีด XML

บริการข้อมูลของ Google จะสร้างฟีดรูปแบบ JSON โดยการแปลงฟีด XML โดยใช้กฎต่อไปนี้

พื้นฐาน

  • ฟีดจะแสดงเป็นออบเจ็กต์ JSON องค์ประกอบหรือแอตทริบิวต์ที่ซ้อนกันแต่ละรายการจะแสดงเป็นพร็อพเพอร์ตี้ชื่อ/ค่าของออบเจ็กต์
  • ระบบจะแปลงแอตทริบิวต์เป็นพร็อพเพอร์ตี้สตริง
  • ระบบจะแปลงองค์ประกอบย่อยเป็นพร็อพเพอร์ตี้ออบเจ็กต์
  • องค์ประกอบที่อาจปรากฏมากกว่า 1 ครั้งจะแปลงเป็นพร็อพเพอร์ตี้ Array
  • ค่าข้อความของแท็กแปลงเป็นพร็อพเพอร์ตี้ $t

เนมสเปซ

  • หากองค์ประกอบมีชื่อแทนเนมสเปซ ชื่อแทนและองค์ประกอบจะต่อกันโดยใช้ "$" เช่น ns:element จะกลายเป็น ns$element

XML

  • เวอร์ชัน XML และแอตทริบิวต์การเข้ารหัสจะแปลงเป็นแอตทริบิวต์เวอร์ชันและการเข้ารหัสขององค์ประกอบรากตามลําดับ

ตัวอย่างต่อไปนี้แสดงเวอร์ชัน XML และ JSON ของฟีดเดียวกัน และจะมีแท็บให้บริการเพื่อให้เปรียบเทียบได้ง่าย

XML

<?xml version="1.0" encoding="UTF-8" ?>
<feed xmlns="http://www.w3.org/2005/Atom"
    xmlns:openSearch="http://a9.com/-/spec/opensearchrss/1.0/"
    xmlns:gd="http://schemas.google.com/g/2005"
    xmlns:gCal="http://schemas.google.com/gCal/2005">
  <id>...</id>
  <updated>2006-11-12T21:25:30.000Z</updated>
  <title type="text">Google Developer Events</title>
  <subtitle type="text">The calendar contains information about upcoming
    developer conferences at which Google will be speaking, along with
    other developer-related events.</subtitle>
  <link rel="http://schemas.google.com/g/2005#feed"
    type="application/atom+xml" href="..." />
  <link rel="self" type="application/atom+xml" href="..." />
  <author>
    <name>Google Developer Calendar</name>
    <email>developer-calendar@google.com</email>
  </author>
  <generator version="1.0"
    uri="http://www.google.com/calendar">Google Calendar</generator>
  <openSearch:startIndex>1</openSearch:startIndex>
  <openSearch:itemsPerPage>25</openSearch:itemsPerPage>
  <gCal:timezone value="America/Los_Angeles" />
    
  <entry>
    <id>...</id>
    <published>2006-11-12T21:25:30.000Z</published>
    <updated>2006-11-12T21:25:30.000Z</updated>
    <category scheme="..." term="..." />
    <title type="text">WebmasterWorld PubCon 2006:
      Google Developer Tools in General</title>
    <content type="text">Google is sponsoring at 
      <a href="http://www.pubcon.com/">WebmasterWorld PubCon 2006</a>. Come and
      visit us at the booth or join us for an evening demo reception where we
      will be talking "5 ways to enhance your website with Google Code". 
      After all, it is Vegas, baby! See you soon.</content>
    <link rel="alternate" type="text/html" href="..." title="alternate" />
    <link rel="self" type="application/atom+xml" href="..." />
    <author>
      <name>Google Developer Calendar</name>
      <email>developer-calendar@google.com</email>
    </author>
    <gCal:sendEventNotifications value="true" />
    <gd:comments>
       <gd:feedLink href="..." />
    </gd:comments>
    <gd:transparency value="..." />
    <gd:eventStatus value="..." />
    <gd:where valueString="3150 Paradise Road, Las Vegas, NV 89109" />
    <gd:when startTime="2006-11-15" endTime="2006-11-17">
      <gd:reminder minutes="10" />
    </gd:when>
  </entry>
  ...
</feed>

JSON

{
  "version": "1.0",
  "encoding": "UTF-8",
  "feed": {
    "xmlns": "http://www.w3.org/2005/Atom",
    "xmlns$openSearch": "http://a9.com/-/spec/opensearchrss/1.0/",
    "xmlns$gd": "http://schemas.google.com/g/2005",
    "xmlns$gCal": "http://schemas.google.com/gCal/2005",
    "id": {"$t": "..."},
    "updated": {"$t": "2006-11-12T21:25:30.000Z"},
    "title": {
      "type": "text",
      "$t": "Google Developer Events"
    },
    "subtitle": {
      "type": "text",
      "$t": "The calendar contains information about upcoming developer 
       conferences at which Google will be speaking, along with other 
       developer-related events."
    },
    "link": [{
      "rel": "...",
      "type": "application/atom+xml",
      "href": "..."
      },{
      "rel": "self",
      "type": "application/atom+xml",
      "href": "..."
    }],
    "author": [{
      "name": {"$t": "Google Developer Calendar"},
      "email": {"$t": "developer-calendar@google.com"}
    }],
    "generator":{
      "version": "1.0",
      "uri": "http://www.google.com/calendar",
      "$t": "Google Calendar"
    },
    "openSearch$startIndex": {"$t": "1"},
    "openSearch$itemsPerPage": {"$t": "25"},
    "gCal$timezone": {"value": "America/Los_Angeles"},

    "entry": [{
      "id": {"$t": "..."},
      "published": {"$t": "2006-11-12T21:25:30.000Z"},
      "updated": {"$t": "2006-11-12T21:25:30.000Z"},
      "category": [{
        "scheme": "...",
        "term": "..."
      }],
      "title":{
        "type": "text",
        "$t": "WebmasterWorld PubCon 2006: Google Developer Tools in General"
      },
      "content": {
        "type": "text",
        "$t": "Google is sponsoring at
          <a href="http://www.pubcon.com/">WebmasterWorld PubCon 2006</a>.
          \nCome and visit us at the booth or join us for an evening demo
          reception where we will be talking "5 ways to enhance your website
          with Google Code".\nAfter all,\nit is Vegas, baby! See you soon."
      },
      "link": [{
        "rel": "alternate",
        "type": "text/html",
        "href": "...",
        "title": "alternate"
        },{
        "rel": "self",
        "type": "application/atom+xml",
	    "href": "..."
      }],
      "author": [{
        "name": {"$t": "Google Developer Calendar"},
        "email": {"$t": "developer-calendar@google.com"}
      }],
      "gd$transparency": {"value": "http://schemas.google.com/g/2005#event.opaque"},
      "gd$eventStatus": {"value": "http://schemas.google.com/g/2005#event.confirmed"},
      "gd$comments": {"gd$feedLink": {"href": "..."}},
      "gCal$sendEventNotifications": {"value": "true"},
      "gd$when": [{
        "startTime": "2006-11-15",
        "endTime": "2006-11-17",
        "gd$reminder": [{"minutes": "10"}]
      }],
      "gd$where": [{"valueString": "3150 Paradise Road,Las Vegas,NV 89109"}]},
    }]
  }
}

คําขอและใช้ฟีด JSON

Atom เป็นรูปแบบเริ่มต้นของ Google Data หากไม่ระบุพารามิเตอร์ alt ในคําขอ คุณจะได้รับฟีด Atom

หมายเหตุ: ปัจจุบันไลบรารีของไคลเอ็นต์ข้อมูล Google ไม่รองรับ JSON

เอาต์พุต JSON

หากต้องการขอการตอบกลับในรูปแบบ JSON ให้ใช้พารามิเตอร์ alt=json

ตัวอย่างเช่น หากต้องการขอฟีดปฏิทินของนักพัฒนาซอฟต์แวร์ของ Google ในรูปแบบ JSON ให้ส่งคําค้นหาต่อไปนี้

http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full?alt=json

เอาต์พุต JSON-in-script

หากต้องการขอการตอบกลับที่มี JSON ในแท็กสคริปต์ ให้ใช้พารามิเตอร์ alt=json-in-script และเพิ่มพารามิเตอร์เรียกกลับโดยการเพิ่มพารามิเตอร์ callback=functionName

http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full?alt=json-in-script&callback=myFunction

การใช้ฟังก์ชันเรียกกลับช่วยให้คุณทราบถึงปัญหาด้านความปลอดภัยข้ามโดเมนที่อาจพบใน JavaScript ฝั่งไคลเอ็นต์ทั่วไป โดยทั่วไปเบราว์เซอร์จะป้องกันไม่ให้โหลดไฟล์ข้ามโดเมนเนื่องจากช่องโหว่ด้านความปลอดภัยที่อาจเกิดขึ้นและการโจมตีข้ามโดเมนซึ่งอาจส่งผลให้เกิด

รูปแบบ JSON-in-script ช่วยให้คุณหลีกเลี่ยงข้อจํากัดเหล่านี้ได้โดยโหลดการตอบกลับในแท็กสคริปต์ในไคลเอ็นต์ ซึ่งหมายความว่าคุณจะใช้การตอบกลับในตําแหน่งอื่นๆ ในโค้ด JavaScript ในหน้านั้นได้ ระบบจะโหลดเอาต์พุต JSON เมื่อหน้าเว็บโหลดขึ้นมา ไม่ต้องใช้เทคนิคอื่นๆ

แอปพลิเคชันที่ใช้งานง่ายด้านล่างจะแสดงเทคนิคนี้

<h3>Upcoming Google Developer Events</h3>

<div id="agenda"></div>

<script>
  function listEvents(root) {
    var feed = root.feed;
    var entries = feed.entry || [];
    var html = ['<ul>'];

    for (var i = 0; i < entries.length; ++i) {
      var entry = entries[i];
      var title = (entry.title.type == 'html') ? entry.title.$t : escape(entry.title.$t);
      var start = (entry['gd$when']) ? entry['gd$when'][0].startTime : "";	

      html.push('<li>', start, ' ', title, '</li>');
    }

    html.push('</ul>');
    document.getElementById("agenda").innerHTML = html.join("");
  }
</script>

<script src="http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full?alt=json-in-script&callback=listEvents">
</script>

ตัวอย่าง

ดูตัวอย่างเกี่ยวกับการใช้งาน JSON ด้วย Google Data API ในหน้าตัวอย่าง

แหล่งข้อมูลเพิ่มเติม

มีแหล่งข้อมูลภายนอกมากมายที่คุณอาจอยากลองดูข้อมูลเพิ่มเติมเกี่ยวกับ JSON และการใช้ JSON ในเว็บแอปพลิเคชัน

กลับไปด้านบน