AJAX - XMLHttpRequest

Objek XMLHttpRequest digunakan untuk berkomunikasi dengan server.

Kirim permintaan ke server

Untuk mengirim permintaan ke server, kami menggunakan objek XMLHttpRequest open() dan send() Metode:

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：lokasi server (berkas)
  • async：true（asinkron）atau false（sinkron）
send() Kirim permintaan ke server (digunakan untuk GET)
send(string) Kirim permintaan ke server (digunakan untuk POST)

GET atau POST?

GET lebih mudah dan cepat daripada POST, dapat digunakan di sebagian besar situasi.

Walaupun demikian, selalu gunakan POST di situasi berikut:

  • Berkas cache bukan opsi (update berkas atau database di server)
  • Kirim data besar ke server (tidak ada batas ukuran untuk POST)
  • Kirim input pengguna (dapat mengandung karakter yang tak dikenal), POST lebih kuat dan aman daripada GET

Permintaan GET

Permintaan GET sederhana:

实例

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

亲自试一试

Dalam contoh di atas, anda mungkin mendapatkan hasil pengecualian. Untuk menghindari hal ini, tambahkan ID unik ke URL:

实例

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

亲自试一试

Jika anda ingin mengirimkan informasi melalui metode GET, tambahkan informasi ini ke URL:

实例

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

亲自试一试

Permintaan POST

Permintaan POST sederhana:

实例

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

亲自试一试

Jika anda ingin mengirim data seperti formulir HTML, gunakan setRequestHeader() Tambahkan header HTTP. Silakan send() Peraturan dalam metode ini mengatakan data yang perlu anda kirimkan:

实例

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

亲自试一试

Metode Deskripsi
setRequestHeader(header, value)

Tambahkan header HTTP ke permintaan

  • header：Tentukan nama header
  • value：Tentukan nilai header

url - Berkas di server

metode open() url parameter, adalah alamat berkas di server:

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

Berkas ini dapat berupa berbagai jenis berkas, seperti .txt dan .xml, atau berkas skrip server seperti .asp dan .php (mereka dapat dijalankan di server sebelum mengirim tanggapan).

Asinkron - true atau false?

Jika ingin mengirim permintaan asinkron:open() metodenya async parameter harus diatur ke true：

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

Pengiriman permintaan asinkron adalah kemajuan besar bagi para pengembang web. Banyak tugas yang dijalankan di server sangat lama. Sebelum AJAX, operasi ini dapat menyebabkan aplikasi menghentikan atau berhenti.

Dengan pengiriman asinkron, JavaScript tidak perlu menunggu tanggapan server, melainkan dapat:

  • Melaksanakan skrip lain saat menunggu tanggapan server
  • Menangani tanggapan saat tanggapan siap

Properti onreadystatechange

Dengan objek XMLHttpRequest, Anda dapat mendefinisikan fungsi yang akan dijalankan saat permintaan menerima tanggapan.

Fungsi ini berada di dalam objek XMLHttpResponse onreadystatechange yang didefinisikan dalam properti:

实例

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

亲自试一试

Anda akan belajar lebih banyak tentang onreadystatechange di bab yang akan datang.

Permintaan sinkron

Jika ingin melaksanakan permintaan sinkron, silakan taruh open() 方法中的第三个参数设置为 false：

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

有时 async = false 用于快速测试。你也会在更老的 JavaScript 代码中看到同步请求。

由于代码将等待服务器完成，所以不需要 onreadystatechange 函数：

实例

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

亲自试一试

我们不推荐同步的 XMLHttpRequest (async = false)，因为 JavaScript 将停止执行直到服务器响应就绪。如果服务器繁忙或缓慢，应用程序将挂起或停止。

同步 XMLHttpRequest 正在从 Web 标准中移除，但是这个过程可能需要很多年。

现代开发工具被鼓励对使用同步请求做出警告，并且当这种情况发生时，可能会抛出 InvalidAccessError 异常。