tutorial pengembangan web terbaru
 

AJAX - Kirim Permintaan Untuk Server

❮ Sebelumnya Berikutnya Bab ❯

Objek XMLHttpRequest digunakan untuk pertukaran data dengan server.

Kirim Permintaan Untuk Server

Untuk mengirim permintaan ke server, kita menggunakan open() dan send() metode dari objek XMLHttpRequest:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
metode Deskripsi
open(method, url, async) Menentukan jenis permintaan

method : jenis permintaan: GET atau POST
url : server (file) lokasi
async : true (asynchronous) atau false (sinkron)
send() Mengirimkan permintaan ke server (digunakan untuk GET )
send(string) Mengirimkan permintaan ke server (digunakan untuk POST )

GET atau POST ?

GET lebih sederhana dan lebih cepat dari POST , dan dapat digunakan dalam banyak kasus.

Namun, selalu menggunakan POST permintaan saat:

  • Sebuah file cache bukanlah pilihan (memperbarui file atau database di server).
  • Mengirimkan sejumlah besar data ke server ( POST tidak memiliki keterbatasan ukuran).
  • Mengirim input pengguna (yang dapat berisi karakter yang tidak diketahui), POST lebih kuat dan aman daripada GET .

GET Permintaan

Sebuah sederhana GET permintaan:

Contoh

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
Cobalah sendiri "

Dalam contoh di atas, Anda mungkin mendapatkan hasil cache. Untuk menghindari hal ini, menambahkan unik ID to the URL: ID to the URL:

Contoh

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
Cobalah sendiri "

Jika Anda ingin mengirim informasi dengan GET metode, menambahkan informasi ke URL:

Contoh

xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
Cobalah sendiri "

POST Permintaan

Sebuah sederhana POST permintaan:

Contoh

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
Cobalah sendiri "

Untuk POST data yang seperti bentuk HTML, menambahkan HTTP header dengan setRequestHeader() . Menentukan data yang ingin Anda kirim di send() metode:

Contoh

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
Cobalah sendiri "

metode Deskripsi
setRequestHeader(header, value) Menambahkan header HTTP untuk permintaan

header : menentukan nama tajuk
value : menentukan nilai tajuk

url - Sebuah File Pada Server

The url parameter open() metode, adalah sebuah alamat ke file di server:

xhttp.open("GET", "ajax_test.asp", true);

File dapat jenis file, seperti .txt dan xml, atau file server yang scripting seperti ASP dan .php (yang dapat melakukan tindakan pada server sebelum mengirim respon kembali).

Asynchronous - True atau False ?

AJAX adalah singkatan dari Asynchronous JavaScript dan XML, dan untuk objek XMLHttpRequest untuk berperilaku sebagai AJAX, yang async parameter dari open() metode harus diatur ke benar:

xhttp.open("GET", "ajax_test.asp", true);

Mengirim permintaan asynchronous adalah perbaikan besar untuk pengembang web. Banyak tugas yang dilakukan pada server sangat memakan waktu. Sebelum AJAX, operasi ini bisa menyebabkan aplikasi untuk menggantung atau berhenti.

Dengan AJAX, JavaScript tidak harus menunggu respon dari server, tapi malah dapat:

  • mengeksekusi skrip lain sambil menunggu respon server
  • berurusan dengan respon ketika respon siap

Async=true

Bila menggunakan class = "notranslate" async = true, tentukan fungsi untuk mengeksekusi ketika respon siap dalam acara onreadystatechange:

Contoh

xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("demo").innerHTML = xhttp.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Cobalah sendiri "

Anda akan belajar lebih banyak tentang onreadystatechange pada bab berikutnya.

Async=false

Untuk menggunakan async=false , mengubah parameter ketiga dalam open() metode untuk palsu:

xhttp.open("GET", "ajax_info.txt", false);

Menggunakan async=false tidak dianjurkan, tapi untuk permintaan kecil beberapa ini bisa ok.

Ingat bahwa JavaScript TIDAK akan terus mengeksekusi, sampai respon server siap. Jika server sibuk atau lambat, aplikasi akan hang atau berhenti.

Catatan: Bila Anda menggunakan async=false , jangan menulis fungsi onreadystatechange - hanya menempatkan kode setelah send() pernyataan:

Contoh

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
Cobalah sendiri "

❮ Sebelumnya Berikutnya Bab ❯