AJAX - XMLHttpRequest 对象

Objek XMLHttpRequest adalah asas AJAX.

  1. 创建 XMLHttpRequest 对象
  2. 定义回调函数
  3. Buka objek XMLHttpRequest
  4. Hantar permintaan ke pelayan

XMLHttpRequest 对象

Semua pelayar moden mendukung XMLHttpRequest 对象。

Objek XMLHttpRequest boleh digunakan untuk menghantakan data dengan pelayan Web di belakang. Ini bermakna bahawa sebahagian daripada kandungan laman web boleh diubah tanpa memuat semula seluruh laman.

创建 XMLHttpRequest 对象

所有现代浏览器（Chrome、Firefox、IE、Edge、Safari、Opera）都有内置的 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable = new XMLHttpRequest();

定义回调函数

回调函数是作为参数传递给另一个函数的函数。

在这种情况下，回调函数应包含响应准备就绪时要执行的代码。

xhttp.onload = function() {
  // 当响应准备就绪时要做什么
}

发送请求

如需向服务器发送请求，您可以使用 XMLHttpRequest 对象的 open() 和 send() 方法：

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

Example

// 创建 XMLHttpRequest 对象
const xhttp = new XMLHttpRequest();
// 定义回调函数
xhttp.onload = function() {
  // 您可以在这里使用数据
}
// 发送请求
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

Try It Yourself

跨域访问（Access Across Domains）

出于安全原因，现代浏览器不允许跨域访问。

这意味着网页和它尝试加载的 XML 文件必须位于同一台服务器上。

CodeW3C.com 上的例子都打开位于 CodeW3C.com 域中的 XML 文件。

如果您想在自己的网页之一上使用上面的例子，您加载的 XML 文件必须位于您自己的服务器上。

XMLHttpRequest 对象方法

方法 Deskripsi
new XMLHttpRequest() 创建新的 XMLHttpRequest 对象。
abort() 取消当前请求。
getAllResponseHeaders() 返回头部信息。
getResponseHeader() 返回特定的头部信息。
open(method, url, async, user, psw)

规定请求。

  • method：请求类型 GET 或 POST
  • url：文件位置
  • async：true（异步）或 false（同步）
  • user：可选的用户名
  • psw：可选的密码
send() 向服务器发送请求，用于 GET 请求。
send(string) 向服务器发送请求，用于 POST 请求。
setRequestHeader() 将标签/值对添加到要发送的标头。

XMLHttpRequest 对象属性

Atribut Deskripsi
onload 定义接收到（加载）请求时要调用的函数。
onreadystatechange 定义当 readyState 属性发生变化时调用的函数。
readyState

Simpan status XMLHttpRequest

  • 0: Permintaan belum diinisialisasi
  • 1: Koneksi server telah dibangun
  • 2: Permintaan telah diterima
  • 3: Sedang memproses permintaan
  • 4: Permintaan telah selesai dan tanggapan siap
responseText Kembalikan data tanggapan dalam bentuk string
responseXML Kembalikan data tanggapan dalam bentuk data XML
status

Kembalikan status nomor permintaan

  • 200: "OK"
  • 403: "Dilarang"
  • 404: "Tidak Ditemukan"

Untuk daftar penuh silakan kunjungi Panduan Rujukan Pesan Http
statusText Kembalikan teks status (seperti "OK" atau "Tidak Ditemukan")

Atribut onload

Dengan menggunakan objek XMLHttpRequest, Anda dapat mendefinisikan fungsi callback untuk dieksekusi saat tanggapan diterima

Silakan definsikan fungsi callback dalam objek XMLHttpRequest onload Fungsi ini didedefiniskan dalam atribut:

Example

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

Try It Yourself

Banyak fungsi callback

Jika ada beberapa tugas AJAX di situs web, maka harus dibuat fungsi untuk melaksanakan objek XMLHttpRequest dan untuk setiap tugas AJAX dibuat fungsi callback

Panggilan fungsi harus mengandung URL serta fungsi yang akan dieksekusi saat tanggapan siap

Example

loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {cFunction(this);}
  xhttp.open("GET", url);
  xhttp.send();
}
function myFunction1(xhttp) {
  // Di sini adalah tindakan
}
function myFunction2(xhttp) {
  // Di sini adalah tindakan
}

Atribut onload

readyState Atribut menyimpan status XMLHttpRequest

onreadystatechange Atribut mendefinisikan fungsi callback yang dieksekusi saat atribut readyState berubah

status Atribut dan statusText Atribut menyimpan status objek XMLHttpRequest

Atribut Deskripsi
onreadystatechange Definisi fungsi yang dipanggil saat atribut readyState berubah
readyState

Simpan status XMLHttpRequest

  • 0: Permintaan belum diinisialisasi
  • 1: Koneksi server telah dibangun
  • 2: Permintaan telah diterima
  • 3: Sedang memproses permintaan
  • 4: Permintaan telah selesai dan tanggapan siap
status

Kembalikan status nomor permintaan

  • 200: "OK"
  • 403: "Dilarang"
  • 404: "Tidak Ditemukan"

Untuk daftar penuh silakan kunjungi Panduan Rujukan Pesan Http
statusText statusText

Returns status text (e.g. "OK" or "Not Found").

onreadystatechange function is called each time readyState changes. 4 and status is 200 when response is ready:

Example

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

Try It Yourself

onreadystatechange event triggered four times (1-4), readyState changes each time.