Penggunaan Ajax dalam javascript

Apabila aplikasi web menjadi semakin kompleks, teknologi JavaScript dan XML (Ajax) tak segerak semakin digunakan untuk melaksanakan halaman web dinamik. Ajax membolehkan anda mengemas kini halaman web secara dinamik dengan menghantar permintaan tak segerak di latar belakang tanpa perlu memuat semula keseluruhan halaman. Dalam artikel ini, kami akan meneroka cara menggunakan Ajax dalam JavaScript.

1. Buat objek XMLHttpRequest

Objek XMLHttpRequest ialah teras Ajax. Ia bertanggungjawab untuk menghantar permintaan HTTP dan menerima respons pelayan. Dalam JavaScript, anda memulakan permintaan Ajax dengan mencipta objek XMLHttpRequest.

var xhr = new XMLHttpRequest();

Jika penyemak imbas tidak menyokong XMLHttpRequest, anda boleh mempertimbangkan untuk menggunakan ActiveXObject, seperti berikut:

var xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2. Hantar permintaan HTTP

Apabila objek XMLHttpRequest dicipta Selepas itu, anda boleh menetapkan URL dan kaedah permintaan, dan kemudian menghantar permintaan.

xhr.open('GET', 'http://example.com/data', true);
xhr.send();

Dalam kod di atas, kami menggunakan kaedah xhr.open() untuk membuka URL dalam mod GET. Parameter ketiga menunjukkan permintaan tak segerak.

Untuk menunjukkan bahawa permintaan dihantar dalam mod POST, anda boleh menggunakan kod berikut:

xhr.open('POST', 'http://example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('name1=value1&name2=value2');

Dalam kod di atas, kami menggunakan kaedah xhr.setRequestHeader() untuk menetapkan pengepala HTTP maklumat, dan gunakan kaedah send() untuk menghantar permintaan.

3. Hantar data borang

Jika anda perlu menghantar data borang, anda boleh menggunakan objek FormData.

var formData = new FormData();
formData.append('username', 'john');
formData.append('password', 'secret');

xhr.open('POST', 'http://example.com/login');
xhr.send(formData);

Dalam kod di atas, kami menggunakan objek FormData untuk menghantar data borang dan kemudian menggunakan kaedah hantar untuk menghantar permintaan.

4. Mengendalikan respons pelayan

Apabila acara readyStateChange XMLHttpRequest dicetuskan, anda boleh menentukan sama ada permintaan itu berjaya dengan menyemak kod respons HTTP dan teks respons. Berikut ialah beberapa kod status biasa:

• 200: OK
• 404: Halaman tidak ditemui
• 500: Ralat Pelayan

berikut ialah fungsi pengendali mudah:

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};

Dalam kod di atas, kami menggunakan sifat xhr.readyState, yang mengembalikan status objek XMLHttpRequest. Jika readyState ialah 4, respons telah lengkap.

Sifat xhr.status mengembalikan kod status HTTP. Kod status 200 menunjukkan kejayaan.

Harta xhr.responseText mengandungi teks respons pelayan.

5. Mengendalikan Ralat

Jika pelayan membalas dengan kod status HTTP selain daripada 200, permintaan itu dianggap gagal. Apabila ralat berlaku, anda boleh mencuba semula operasi selepas digesa.

xhr.onerror = function() {
  alert('请求失败，请重试');
};

Dalam kod di atas, kami menggunakan atribut xhr.onerror dan kaedah alert() untuk memberikan mesej ralat.

6. Batalkan permintaan

Jika anda perlu membatalkan permintaan Ajax, anda boleh menggunakan kaedah xhr.abort().

xhr.abort();

Dalam kod di atas, kami menggunakan kaedah xhr.abort() untuk membatalkan permintaan.

Ringkasan

Di atas ialah penggunaan asas Ajax dalam Javascript. Ajax membolehkan anda mengemas kini halaman web secara dinamik, menjadikan aplikasi web lebih mudah digunakan dan lebih responsif. Apabila menggunakan Ajax, ingat untuk menggunakan permintaan tak segerak.

Atas ialah kandungan terperinci Penggunaan Ajax dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!