Melihat lebih dekat AJAX: mendedahkan skop penuh sifatnya-tutorial js-php.cn

Melihat lebih dekat AJAX: mendedahkan skop penuh sifatnya

王林

Lepaskan： 2024-01-30 10:11:17

asal

568 orang telah melayarinya

Melihat lebih dekat AJAX: mendedahkan skop penuh sifatnya

Pemahaman mendalam tentang AJAX: untuk meneroka gambaran penuh sifatnya, contoh kod khusus diperlukan

Pengenalan:
Dalam bidang pembangunan web, AJAX (JavaScript Asynchronous dan XML) ialah teknologi yang biasa digunakan, yang tidak menyegarkan keseluruhan halaman , dengan menukar data dengan pelayan di latar belakang, fungsi mengemas kini halaman secara tidak segerak direalisasikan. Artikel ini akan meneroka sifat AJAX secara mendalam, termasuk memahami prinsip kerjanya, sifat dan kaedah yang biasa digunakan, dan menyediakan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik aplikasi AJAX.

1. Cara AJAX berfungsi
Prinsip kerja AJAX boleh diringkaskan dalam langkah berikut:

Cipta objek XMLHttpRequest: Gunakan JavaScript untuk mencipta objek XMLHttpRequest, yang bertanggungjawab untuk berkomunikasi dengan pelayan.
Wujudkan sambungan dengan pelayan: Gunakan kaedah terbuka objek XMLHttpRequest untuk menentukan alamat pelayan dan kaedah komunikasi (GET atau POST) untuk disambungkan.
Hantar permintaan: Gunakan kaedah hantar objek XMLHttpRequest untuk menghantar permintaan ke pelayan.
Terima respons pelayan: Pantau status respons pelayan melalui kaedah onreadystatechange objek XMLHttpRequest Setelah status respons pelayan berubah, fungsi pemprosesan acara yang sepadan akan dicetuskan.
Memproses respons pelayan: Dalam fungsi pemprosesan acara, gunakan atribut responseText atau responseXML objek XMLHttpRequest untuk mendapatkan data yang dikembalikan oleh pelayan.
Kemas kini kandungan halaman: Gunakan JavaScript untuk mengemas kini bahagian halaman yang sepadan berdasarkan data yang diperoleh. .

status: Menunjukkan kod status HTTP bagi respons pelayan termasuk 200 menunjukkan kejayaan, 404 menunjukkan sumber tidak ditemui, 500 menunjukkan ralat pelayan dalaman, dsb.

ResponseText: Mengembalikan data respons pelayan dalam bentuk rentetan.

responseXML: Mengembalikan data respons pelayan dalam bentuk objek XML.
Kaedah:
buka(kaedah, url, async): Memulakan permintaan Kaedah parameter mewakili kaedah komunikasi, yang biasa digunakan ialah GET dan url POST mewakili alamat pelayan; lalai adalah benar.
send(data): Hantar permintaan kepada pelayan Data parameter mewakili data yang perlu dihantar ke pelayan.
setRequestHeader(header, value): Tetapkan atribut dan nilai pengepala permintaan HTTP, biasanya digunakan untuk menetapkan sifat seperti Content-Type dan Authorization.
abort(): Batalkan permintaan yang sedang dilaksanakan.
3 Contoh kod khusus
Berikut ialah contoh kod yang menggunakan AJAX untuk mendapatkan data pelayan dan mengemas kini kandungan halaman:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>AJAX示例</title>
</head>
<body>
  <button onclick="loadData()">加载数据</button>
  <div id="result"></div>
  <script>
    function loadData() {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var response = JSON.parse(xhr.responseText);
          document.getElementById("result").innerHTML = "数据：" + response.data;
        }
      };
      xhr.open("GET", "http://example.com/api/data", true);
      xhr.send();
    }
  </script>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, fungsi loadData dipanggil dengan mengklik butang, mencipta objek XMLHttpRequest xhr. , dan menetapkan fungsi pengendalian acara onreadystatechangenya. Kemudian kaedah GET ditentukan untuk meminta data pelayan melalui kaedah terbuka, dan akhirnya permintaan dihantar dan data tindak balas diperolehi. Dalam fungsi pengendalian acara, data respons pelayan dihuraikan ke dalam objek JSON dan kandungan elemen div dengan id "hasil" dalam halaman dikemas kini.
Kesimpulan:

Atas ialah kandungan terperinci Melihat lebih dekat AJAX: mendedahkan skop penuh sifatnya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!