Bagaimana untuk Memaparkan Data Spesifikasi W3C menggunakan API Webnya

Pemenang anugerah Emmy® W3C adalah organisasi standard antarabangsa untuk World Wide Web. Ia mewujudkan piawaian web baru dan menyemaknya secara berterusan untuk memastikan ia konsisten dan relevan di seluruh dunia.

Pelayar dan laman web telah menjadi standard yang mematuhi tahap yang lebih tinggi dengan masa, ini membolehkan laman web untuk membuat dan bekerja seragam di semua pelayar pelbagai. Salah satu sumber paling berguna yang boleh didapati secara umum ialah dokumentasi Spesifikasi W3C di w3c.org.

Baru-baru ini, W3C membuat datanya tersedia melalui API Web, halaman projek yang ada di Github. Pengenalan API ini dari halaman projeknya adalah seperti berikut:

“Sebagai tindak balas kepada permintaan daripada pemaju di komuniti kami yang ingin berinteraksi dengan data W3C, Pasukan Sistem W3C telah membangunkan API Web. Melaluinya, kami menyediakan data mengenai Spesifikasi, Kumpulan, Organisasi dan Pengguna.”

Dalam jawatan hari ini kita akan lihat bagaimana untuk mendapatkan data Spesifikasi melalui API W3C. Anda akan menemui pelbagai permintaan yang anda boleh siarkan untuk mengambil data Spesifikasi dan yang lain di https://api.w3.org/doc, ia juga dilengkapi dengan kotak pasir untuk setiap permintaan untuk menguji API, tetapi anda memerlukan Kunci API.

Mari lihat dulu bagaimana untuk mendapatkan kunci API.

1. Masuk ke akaun W3C anda atau buat satu.
2. Kemudian pergi ke Urus Kekunci API di halaman profil anda.
3. Klik Kunci API Baru dan beri nama untuk menjana kunci anda.
4. Kemudian jika anda mahu, anda boleh copy-paste ke dalam api api kotak teks pada awal laman web https://api.w3.org/doc untuk menguji API di dalam kotak pasir.

Untuk jawatan ini, kita akan melihat permintaan yang menggunakan nama pendek untuk memaparkan URL Spesifikasi, keterangan dan status dokumen. Permintaannya kelihatan seperti ini:

https://api.w3.org/Specifications/shortname?apikey=apikey&_format=json 

Sebagai contoh, permintaan spec HTML5 akan menjadi seperti ini;

https://api.w3.org/Specifications/html5?apikey=apikey&_format=json 

Sekarang, mari fokus pada HTML yang akan kami gunakan untuk memaparkan data yang diambil melalui API. Untuk ini saya telah memutuskan untuk menggunakan Template HTML. Templat HTML digunakan untuk memegang kod HTML yang dihuraikan tetapi tidak diberikan sehingga mereka ditambahkan ke halaman menggunakan JavaScript.

 
W3C SPECS
 
  

Templat sudah siap. Sekarang, ke JavaScript yang akan membuat permintaan HTTP dan memaparkan data JSON tindak balas dalam HTML. Inilah set pembolehubah global yang akan bermula dengan:

var shortnames = ['html5', 'selectors4', 'status battery', 'fullscreen'], xmlhttp = new XMLHttpRequest (), w3cSpecsEle = document.querySelector ('# w3cSpecs'), templateEle = document.querySelector (' '); 

nama pendek adalah pelbagai nama pendek daripada Spesifikasi yang ingin kami paparkan di laman web kami; jika anda ingin mencari nama pendek dari Spesifikasi melihat URL W3C dan anda akan dapat melihatnya pada akhirnya.

Walau bagaimanapun, tidak dijamin bahawa anda akan dapat semua Spesifikasi seperti ini; tidak ada senarai pasti nama pendek dan Spesifikasi yang tersedia melalui API lagi.

Gelung melalui nama pendek pelbagai dan menyiarkan permintaan HTTP untuk setiap satu, dan mengambil respons.

untuk (var i = 0; i 
The responseText adalah rentetan JSON dan perlu dihuraikan untuk mendapatkan objek JSON. paparanSpec adalah fungsi yang akan menggunakan data JSON dan memaparkannya dalam HTML.
 
Berikut ialah teks tindak balas JSON sampel untuk Spesifikasi HTML5 dan selepas kod untuk paparanSpec. 
 
 
fungsi displaySpec (json) if ('content' in templateEle) / * get content Template * / templateEleContent = templateEle.content; / * tambahkan tajuk spec ke h2 header * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * tambahkan URL spec ke pautan * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * tambah keterangan spec * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * tambahkan status spec dan warna berdasarkan nilai * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('tanda'); var status = json._links ["latest-version"]. title; W3cSpecLatestVerStatus.textContent = status; switch (status) case 'Recommendation': W3cSpecLatestVerStatus.className = "recommendation"; pecah; 'Draf Kerja' kes: W3cSpecLatestVerStatus.className = 'draf'; pecah; kes 'Bersara': W3cSpecLatestVerStatus.className = 'bersara'; pecah; kes 'Cadangan Calon': W3cSpecLatestVerStatus.className = 'candidateRecommendation'; pecah;  / * menambah salinan kandungan Template ke div utama * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * add JS code untuk membuat unsur secara individu * / 
 
jika ('kandungan' dalam templateEle) adalah untuk memeriksa jika Template HTML disokong oleh penyemak imbas, jika tidak, buat semua elemen HTML dalam JS itu sendiri. Dan apabila ada sokongan, isi elemen HTML yang berada di dalam kandungan Template dengan data masing-masing dari JSON dan akhirnya, tambah satu salinan kandungan Template kepada utama # w3cSpecs div.
 
Itu sahaja. Dengan sedikit stylings CSS, outputnya kelihatan seperti ini: