Belajar Menggunakan AJAX dan Web Api
Daftar Isi Konten
+++++ Request XMLHTTP =FETCH -AXIOS +++++
Bukan hanya melakukan request melalui browser akan tetapi request melakukan javascript. Jadi request ini bisa dibilang sebagai AJAX dan request ini dibilang dalam sisi programing
Request ini datanya dalam bentuk format JSON dan request tersebut untuk mendapatkan data tertnetu saja dan data tersebut dapat diolah dan ditampilkan
++++ Mengenal Api +++++
Request yang diambil dalam server sebagai data penting yang sering disebut dengan WEB API atau Apliccation Programing Interface.
API awal mula dibuat untuk monukasi antar komputer dengan software dengan melakukan layanan antar fungsi di dalam software. request untuk menampilkan data HTMLAllCollection, javascript, JSON, XML atau yang lainnya yang akan diolah oleh front end developer atau aplikasi client yang dimuat untuk buat data penting. Komunikasi data antar software yang perlu diolah lagi antar website atau yang lainnya.
Contohnya:
{
"ticker" : {
"base" : "BTC"
"target" : "IDR"
"price" : "343068000.00000000"
"volume" : "24.03937869"
"change": "1000.00000000"
},
"timestamp": 1674454623,
"succes": true,
"eror": ""
}
++++ Mengenal Apa Itu JSON ++++
XML ini isinya key anda value dan beberapa tag dengan value yang dapat diambil dengan format ajax lagi akan tetapi AJAJ dengan tipe data JSON.
JSON sendiri singkatan dari JavaScript Object Notation yang berisi key and value. JSON walaupun javascript ada beberapa perbedaan dengan tipe datanya. Dimana ia menentukan standar untuk tipe valuenya. yang terdiri dari object, array, string, number, true, false, null yang berbeda dengan tipe data object javascrip karena memiliki tipe valuenya sendiri yaitu string yang dibuka tutup dengan menggunakan doble Quote = ” ” bukan single Quote pada tipe data string. Baik element value dan key pada string menggunakan doble quote bisa anda lihat di contoh atas atau jika anda menggunakan single quote bisa di compiler seharunya di json formatter di link // https://jsonformatter.org/
Bagaimana cara memasukan data json yang sudah kita ambil dan kita masukkan ke dalam data yang kita miliki dengan memanggil object biasa apakah nanti bisa atau tidak? ternyata tidak bisa hanya dianggap data saja. bagaimana caranya agar masuk ke data. bisa menggunakan json parse
const data = '{
"ticker" : {
"base" : "BTC"
"target" : "IDR"
"price" : "343068000.00000000"
"volume" : "24.03937869"
"change": "1000.00000000"
},
"timestamp": 1674454623,
"succes": true,
"eror": ""
}';
const res = JSON.parse(data)Untuk object json tidak bisa dipanggil seperti javascrip dan perlu menambahkan tipe data parse.
Ada satu fungsi yang bisa mengubah object javascript yang diubah ke JSON yang akan dikirim ke server dan server hanya bisa menerima dalam format JSOn akan tetapi sever hanya menrima JSON sedangkan objek yang dibuat harus menggunakan format Stringfy
const person ={
nama: 'topik'
gender: 'male'
}
JSON.stringify (person)+++ Lebih Mudah Akses Web Api Dengan Postman Dan Hoppscotch +++++
Dua website tools yang sangat bermanfaat untuk digunakan untuk request API yaitu Postman Dan Hoppscotch yang digunakan untuk webdeveloper bukan pengguna saja untuk melihat rerspon dan mengambil data. Jika tidak mau register di Postman bisa langsung download di Hoppscotch.
Untuk cara penggunaannya memang seperti yang lainnya yaitu ada web API bisa menggunakan method yang mana salah satunya ada web apinya catfact.ninja ada juga swapi.dev ada juga pokeapi.co dan masih banyak lagi open api yang bisa digunakan dengan contoh
Catfact dengan this is line get dengan url //(https://catfact.ninja/fact) yang dapat dikopi anda bisa buka di hoppscoth urlnya dan kemudian anda pilih get dan send anda bisa melihat responnya baik dari halaman web (boddy) sampai dengan JSON selain itu bisa anda menggunakan Postman untuk capy paste urlnya
+++++ Mengenal Http Verb atau Http Method ++++++
Untuk melakukan request di dalam website API di laman postman dan Hoppscotch dengan berbagai metode GET dan yang lainnya atau yang disebut HTTP Verb Apakah kita akan mengambil suatu data dari url yang diakses, dan anda bisa mengirimkan data dengan metode POST dan beberapa metode lain yang bisa dibutuhkan di laman lain ada beberapa metode lainnya.
https://catfact.ninja/fact jika metodenya tidak sama maka tidak akan dapat diambil alias eror karena tidak ada. Dan pastikan anda melihat metode apa yang digunakan sehingga anda bisa request dengan menggunakan token atau key yang ada di suatu data sebagai integrasi atau jembatan penghubung antar suatu software
++++++ Penjelasan Kode Angka Dari Respon Http ++++++
Status respons yang ada dalam web API Postman ketika anda mengakses url API yang anda butuhkan dengan status 200 ok atau 100 ok jika nantinya tidak ada api di dalam situs maka akan ada status 404. dan Anda biasa melihat 400- 499 range dengan status client eror response sedangkan untuk range 500 -599 maka yang eror adalah server eror respons juga biasa yang eror disisi program front end maupun back endnya
Untuk status 200 ok biasanya suksesnya pada sisi metod Get, Head, Put or postMessage, serta trace. Untuk 201 yang dibuat dalam database biasa merespon dengan status 201.
Status 300 akan terjadi redirection massage sedangkan eror data kurang unauthorizede maka akan ada eror 401, 403 untuk forbidden dan 404 status not found, sedangkan untuk 500 status internal server eror, 503 service unavailabel biasa badwith habis dan masih banyak lagi yang bisa anda lihat kode kodenya yang bisa lebih lanjutnya lihat di https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
++++ Mengenal Base Url Dan Query String Di Web Api +++++
Base Url dan Query String biasanya ada domain sekaligus pathnya slas apa setelahnya dan sering disebut dengan paramater atau data yang perlu dikirimkan yang berada di base url
Untuk mendapatkan people dari seluruh starrs wars anda bisa langsung menggunakan people sebagai parameternya dengan contoh paramaternya swapi.dev/api/people dan seluruh orang yang ada akan di request dan anda juga bisa menentukan satu orang saja atau orang yang spesifiknya dengan menggunakan bisa menggunakan id dengan end pointnya swapi.dev/api/people/16 atau bisa menambahkan dengan titik dua swapi.dev/api/people/:id/
Dan kadang juga melihat setelah domain anda lihat paramaeter dengan contoh sebagai berikut yang kita nggak paham
google.com/search?q=http+query+string&rlz=1C1CHBD_idID1038ID1038
Dan biasa kita lihat setelah query string atau domain dengan tambahan tanda tanya sesuai dengan contoh
?sort=desc&price=1000
dan diatas disebut dengan Query String untuk penggunaannya berbagai macam dan anda bisa lihat cari di kolom pencarian javascrip maka anda akan lihat di urlnya dan penggunaannya bisa anda lihat endpoint di tvmaze yang bisa anda copy paste di web api seperti postman dengan url https://api.tvmaze.com/search/shows?q=girls
atau bisa mencari di web Api postmannya https://api.tvmaze.com/schedule/web?date=2020-05-29&country=US
+++++ Mengenal Data Di Http Header +++++
Di dalam postman ada Param dan Header dan jika anda menegtahuinya bisa lihat halaman di jaringan dan anda bisa main page di jaringan Header disisi pengguna tidak berguna namun untuk disisi API sangat berguna.
Anda bisa copy paste halaman yang akan anda cari API nya yaitu icanhadzajoke.com dengan metode GET kemudian anda pilih header dan inputkan keynya dengan inputan Accept dan Valuenya dimasukkan dengan inputan application/json dan anda juga bisa merlihat text/html valuenya
bisa anda bisa tambah keynya content-type dengan value application/json dan anda bisa menambahkan key dan value lainnya
+++++ Melakukan Request Dengan Xmlhttprequest +++++++
Xmlhttprequest ini fungsi original dengan menggunakan jafascript atau disisi programing sendiri dan tidak mendukung promise dan hanya bisa menggunakan callback yang memungkinkan ada call back hell dan namanya susah diketik karena besar kecilnya dengan cara kerja sebagai berikut dengan object
const reg = new XMLHttpRequest();
let data;
req.onload = function (){
cons data = JSON.pasrse (this.responseText);
console.log (data);
};
req.onerror = function (){
console.log ('eror',this);
};
req.open ('get','https://swapi.dev/api/people/16',true);
myReq.setRequestHeader ('Accept','application/json')
req.send();silahkan anda buat html dengan src yang diarahkan ke JSnya.
+++++ Melakukan Request Dengan Fetch ++++
cara baru melakukan request menggunakan javascript yang dapat mendukung promise dan tidak mendukung sebuah browser yang bernama Internet Explore
fetch ('https://swapi.dev/api/people/16')
.then ((res)=>{
if(!res,ok){
throw Error('could not fetch the data for that resource');
}
return res.json();
});
.then((data)=>{
console.log ('json',data);
});
.catch((err)=>{
console.log ('error',err);
});kalau mau request lagi bisa menggunakan call back seperti dibawah ini
fetch ('https://swapi.dev/api/people/16')
.then ((res)=>{
if(!res,ok){
throw Error('could not fetch the data for that resource');
}
return res.json();
});
.then((data)=>{
console.log ('json',data);
return fetch ('https://swapi.dev/api/people/2')
});
.then((res)=>{
console.log ('request 2');
if(!res,ok){
throw Error('could not fetch the data for that resource');
}
return res.json();
});
.then((data) => {
console.log (data);
});
.catch((err)=>{
console.log ('error',err);
});akan terlalu banyak then dan catch akan lebih baik dari call back
const loadPeople = async () => {
const res = await fetch ('https://swapi.dev/api/people/16');
const data = await res.json();
console.log (data);
};
loadPeople();bisa anda lakukan load lebih dari satu
const loadPeople = async () => {
const res = await fetch ('https://swapi.dev/api/people/2');
const data = await res.json();
console.log (data);
const res2 = await fetch ('https://swapi.dev/api/people/2');
const data 2= await res2.json();
console.log (data2);
};
loadPeople();karena belum ada heandling eror bisa memasukkannya di try and catch
const loadPeople = async () => {
try {
const res = await fetch ('https://swapi.dev/api/people/2');
const data = await res.json();
console.log (data);
const res2 = await fetch ('https://swapi.dev/api/people/2');
const data 2= await res2.json();
console.log (data2);
} catch (err) {
console.log ('error', err);
}
};
loadPeople();+++++ Request Dengan Library Axios +++++
Axios merupakan library pihak ketiga untuk melakukan request http
library memiliki kumpulan kode yang telah disederhanakan supaya menggunakannya lebih mudah, untuk mendapatkan respons data atau respons erornya dan anda bisa searh link githubnya di Axios jika ingin menggunakan javascrip pada sisi backend sedangkan kita masih di sisi broswer maka kita meletakkan cdn
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
dan diletakkan sebelum file src app js
axios.get ('https://swapi.dev/api/people/2').then ((res)=>{
console.log (res.data);
}).catch ((err)=>{
console.log (err);
alert(err.massage)
});kita juga bisa memasukkan ke data variabel async await dengan handler try catch sebagai berikut
const getPeople = async(id){
try {
const res = await axios.get ('https://swapi.dev/api/people/${id}')
console.log (res.data);
} catch (error) {
console.log (error);
console.log (error.massage);
console.log (error.respons.status);
console.log (error.response.data);
}
};+++ Menambahkan Data Headers Di Request Menggunakan Axios +++
Membuat komponen untuk html yang berisi header button dan list dan dibawahnya akan muncul jokenya
<h1>Klik disini untuk buat joke bapak-bapak</h1> <button> klik</button> <ul id="jokes"></ul>
dan silahkan dibuat jsnya sebagai berikut
const jokes = document.querySelector('#jokes');
const button = document.querySelector('button');
const addJoke = async () => {
const jokeText = await getJokes();
const newLI = document.createElement('LI');
newLi.append(jokeText);
jokes.append(newLI);
};
const getJokes = async () => {
try {
const config = {
headers: {
Accept: 'application/json',
},
};
const res = await axios.get ('https://icanhazdadjoke.com/',config);
return (res,data.jokes);
} catch (error) {
return 'no jokes available';
}
};
buat function untuk generate elementnya
button.addEventListener ('click',addJoke);+++ Menampilkan daftar acara TV dengan Axios +++++
menampilkan request dengan menggunakan api tvmaze, bisa anda tampilkan acara tv, jadwal atau daftar acara tv dan lainnya dengan membuat indeks html seperti biasanya. dan yang terpenting mengimport file cdn axios dan jsnya
pertama anda membuat htmlnya terlebih dahulu
<h1>TV Show Finder</h1> <form id="search-Form" action=""> <input id="" name="query" type="text" /> <button>Find</button>
dan anda juga membuat file jsnya seperti dibawah
const form = document.querySelector ('#search-form')
form.addEventListener('submit', async (e) => {
e.preventDefault();
document.querySelectorAll('img').forEach((img) => img.remove());
const keyword = form.elements.query.value;
const config = {
params : { q:keyword, },
};
const res = axios.get('https://api.tvmaze.com/shows',config)
getImages (res.data)
form.elements.query.value ='';
});
const getImages = (shows) => {
for (let result of shows){
if(result.show.image){
const img = document.createElement ('img');
img.src = result.show.image.medium;
document.body.append(img);
}
}
}
Penutup
Semoga dengan sedikit ilmu yang kami pelajari bisa membantu anda dalam belajar AJX dan WEB APi terima kasih.
Tinggalkan Balasan