Operasi AJAX
Operasi AJAX
Operasi AJAX adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 1. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar jQuery Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus jQuery Academy mencakup 1 pelajaran total.
Pendahuluan
Halo,
Dalam pelajaran ini, kita akan mempelajari cara berinteraksi dengan server jarak jauh menggunakan metode AJAX jQuery.
AJAX (Asynchronous Javascript And XML) adalah teknologi yang memungkinkan transfer data dengan Server secara asinkron tanpa memuat ulang halaman web.
Pengalaman pengguna menjadi lebih baik, terutama karena data dapat ditransfer tanpa memuat ulang halaman.
Contoh Ajax
Secara khusus, aplikasi web paling populer di dunia seperti Facebook, Gmail, dan Youtube sering menggunakan teknologi AJAX.
Sebenarnya, alih-alih menganggap AJAX sebagai teknologi baru, Anda dapat menganggapnya sebagai metode yang menyediakan transfer data asinkron antara server dan klien menggunakan Javascript.
Baiklah, mari kita lihat contoh fungsi yang menggunakan AJAX.
Misalnya, Anda menonton video di youtube.com lalu mengeklik tombol suka. Dalam kasus ini, peristiwa suka kita dikirim ke server Youtube di latar belakang sebelum halaman Youtube dimuat ulang.
Inilah proses yang berlangsung melalui permintaan AJAX.
Contoh Ajax
Mari kita membuat contoh permintaan AJAX.
Di bawah ini adalah kode permintaan GET yang dibuat dengan AJAX ke https://api.coddykit.com/api/coddy-test
Contoh ini dibuat dengan Vanilla Javascript dan sintaksnya agak rumit, seperti yang dapat Anda lihat.
<div id="result"></div>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4
&& this.status == 200) {
//we are writing the AJAX request response
//to div element that has result id
var result = document.getElementById('result');
result.innerHTML = JSON.stringify(this.responseText);
}
};
xhttp.open("GET", "https://api.coddykit.com/api/coddy-test", true);
xhttp.send();
</script>Peringatan
Seperti yang telah kita katakan sebelumnya, jQuery adalah pustaka modifikasi DOM yang juga menyediakan metode untuk mempermudah operasi AJAX.
Metode Ajax
Kita memiliki metode yang cukup sederhana untuk mengelola permintaan AJAX menggunakan jQuery.
Dengan metode ajax(), kita dapat dengan mudah menggunakan metode HTTP yang umum digunakan di dunia Web, seperti get, post, atau put.
Sintaks metode Ajax adalah sebagai berikut.
$.ajax ({
url: 'remote URL'.
data: 'Data that we will send',
method: 'HTTP Method - Default GET',
success: 'Here, we should define function that work when Ajax get success result',
dataType: 'Interaction data type'
});
Mari kita membuat contohnya
<div id="result"></div>
<script>
$.ajax ({
url: 'https://api.coddykit.com/api/coddy-test',
success: function(data){
$('#result').text(JSON.stringify(data));
}
});
</script>Contoh AJAX
Permintaan get AJAX
Sekarang mari kita kembangkan contoh kita.
Pada contoh di bawah ini, permintaan ajax telah dikirim ke URL (https://api.coddykit.com/api/coddy-test)
Jika tidak ada metode HTTP yang ditentukan, permintaan GET akan dibuat secara bawaan.
const https = require('https');
function ajax(url) {
const callbacks = { success: [], fail: [], always: [] };
const req = https.get(url, (res) => {
let data = '';
res.on('data', chunk => data += chunk);
res.on('end', () => {
callbacks.success.forEach(cb => cb(data));
callbacks.always.forEach(cb => cb());
});
});
req.on('error', (err) => {
callbacks.fail.forEach(cb => cb(err));
callbacks.always.forEach(cb => cb());
});
return {
done: function(cb) { callbacks.success.push(cb); return this; },
fail: function(cb) { callbacks.fail.push(cb); return this; },
always: function(cb) { callbacks.always.push(cb); return this; }
};
}
var ajaxReq = ajax("https://api.coddykit.com/api/coddy-test")
.done(function() {
//success callback
/*
If our get request is sent to
the server with success (HTTP 2xx),
this function is called.
*/
})
.fail(function() {
/* This function works
if the AJAX request fails.
*/
})
.always(function() {
/*
This function works in all cases when
the AJAX request is
successful or unsuccessful.
*/
});metode get
Metode $.get() dan Permintaan Get
Kita dapat menggunakan metode $.get() untuk mengirim permintaan get HTTP ke server kita.
Metode ini disediakan oleh jQuery dan memungkinkan kita mengirim permintaan GET dengan menulis kode yang lebih ringkas dan mudah dibandingkan Vanilla Javascript.
Mari kita membuat contoh dan perhatikan betapa singkatnya kode tersebut.
<div id="result"></div>
<script>
$.get("https://api.coddykit.com/api/coddy-test",
function(response) {
$('#result').text(JSON.stringify(response));
})
</script>Metode post
Metode $.post() dan Permintaan post
Kita dapat menggunakan metode $.post() untuk mengirim permintaan HTTP post ke server kita.
Mari kita buat contohnya dan perhatikan betapa singkatnya kode tersebut.
Kita akan sering menggunakan permintaan post, terutama saat mengirimkan formulir web ke server.
<div id="result"></div>
<script>
$.post("https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Post Request
{name:'Coddy', age: 3},
function(response) {
$('#result').text(JSON.stringify(response));
})
</script>Metode Put
Permintaan Put
Kita dapat menggunakan metode $.put() untuk mengirim permintaan Put HTTP ke server kita.
Mari kita membuat contohnya.
<div id="result"></div>
<script>
$.ajax({
method:'PUT',
url:"https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Put Request
data: {name:'Coddy', age: 3},
success: function(response) {
$('#result').text(JSON.stringify(response));
}})
</script>Metode Delete
Permintaan Delete
Kita dapat menggunakan metode $.delete() untuk mengirim permintaan Delete HTTP ke server kita.
Mari kita membuat contohnya
<div id="result"></div>
<script>
$.ajax({
method:'DELETE',
url:"https://api.coddykit.com/api/coddy-test",
success: function(response) {
$('#result').text(JSON.stringify(response));
}})
</script>Tautan
Anda dapat menemukan contoh dan memperoleh informasi terperinci tentang metode AJAX melalui tautan di bawah ini.
Selamat
Selamat 🎉
Pada bagian ini, kita telah mempelajari AJAX dengan jQuery
Terima kasih telah bergabung bersama kami selama Kursus jQuery untuk Pemula 🎉🎉🎉
Sekarang Anda dapat mengikuti ujian dan memperoleh sertifikat untuk kursus Tutorial jQuery untuk Pemula 🚀🚀🚀
Belajar JavaScript dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 22
- Pelajaran
- 48
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Operasi AJAX” gratis?
Ya — teks lengkap “Operasi AJAX” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus jQuery Academy, upgrade ke CoddyKit PRO. Kursus jQuery Academy mencakup 1 pelajaran total.
Apa yang akan aku pelajari di “Operasi AJAX”?
Operasi AJAX Kamu berlatih jQuery Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai jQuery Academy?
Tidak diperlukan pengalaman sebelumnya. jQuery Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 1.
Berapa lama pelajaran “Operasi AJAX” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran jQuery Academy ini?
Ya. Setiap pelajaran jQuery Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.