Halaman ini diterjemahkan oleh Cloud Translation API.

Menggunakan JSON dalam Protokol Data Google

Peringatan: Halaman ini membahas API lama Google, yaitu Google Data API; halaman ini hanya relevan dengan API yang tercantum dalam direktori Google Data API, banyak di antaranya telah diganti dengan API yang lebih baru. Untuk informasi tentang API baru tertentu, lihat dokumentasi API baru. Untuk informasi tentang memberi otorisasi permintaan dengan API baru, lihat Autentikasi dan Otorisasi Akun Google.

Artikel ini membahas JSON karena digunakan dalam Protokol Data Google. Untuk informasi selengkapnya tentang protokol, lihat Panduan Developer.

Anda dapat menggunakan JSON dengan bahasa pemrograman apa pun, tetapi contohnya dalam dokumen ini ada di JavaScript.

Tentang feed JSON dan feed XML

Layanan Data Google membuat feed berformat JSON dengan mengonversi feed XML menggunakan aturan berikut:

Basic

Feed direpresentasikan sebagai objek JSON; setiap elemen atau atribut bertingkat direpresentasikan sebagai properti nama/nilai objek.
Atribut dikonversi menjadi properti String.
Elemen turunan dikonversi menjadi properti Objek.
Elemen yang mungkin muncul lebih dari sekali akan dikonversi ke properti Array.
Nilai teks tag dikonversi menjadi properti $t.

Namespace

Jika elemen memiliki alias namespace, alias dan elemen akan digabungkan menggunakan "$". Misalnya, ns:element menjadi ns$element.

XML

Versi XML dan atribut encoding masing-masing dikonversi ke versi dan atribut encoding elemen root.

Contoh berikut menunjukkan versi XML dan JSON dari feed yang sama. Tab untuk memberikan perbandingan yang mudah.

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"}]},
    }]
  }
}

Meminta dan menggunakan feed JSON

Atom adalah format default Google Data. Jika tidak menentukan parameter alt dalam permintaan, Anda akan menerima feed Atom.

Catatan: Library klien Data Google saat ini tidak mendukung JSON.

Output JSON

Untuk meminta respons dalam format JSON, gunakan parameter alt=json.

Misalnya, untuk meminta feed kalender developer Google dalam format JSON, kirim kueri berikut:

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

Output JSON-in-script

Untuk meminta respons yang menggabungkan JSON dalam tag skrip, gunakan parameter alt=json-in-script dan tambahkan fungsi callback dengan menambahkan parameter callback=functionName.

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

Penggunaan fungsi callback memungkinkan Anda mengatasi beberapa masalah keamanan lintas-domain yang mungkin Anda temui di JavaScript sisi klien biasa. Biasanya, browser mencegah Anda memuat file di seluruh domain karena adanya potensi celah keamanan dan serangan lintas-domain yang dapat terjadi.

Format JSON-in-script memungkinkan Anda mengatasi batasan ini dengan memuat respons dalam tag skrip pada klien. Ini berarti Anda dapat menggunakan respons di tempat lain dalam kode JavaScript pada halaman tersebut. Output JSON dimuat saat halaman dimuat; tidak diperlukan trik lain.

Penerapan sederhana di bawah menunjukkan teknik ini:

<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>

Contoh

Untuk contoh cara menggunakan JSON dengan Google Data API, lihat halaman contoh.

Referensi lainnya

Ada beberapa referensi eksternal yang mungkin ingin Anda pelajari untuk mempelajari JSON lebih lanjut dan cara menggunakan JSON dalam aplikasi web.

Kembali ke atas