Terangkan keadaan kesediaan yang berbeza untuk permintaan dalam AJAX

AJAX adalah singkatan dari Asynchronous JavaScript dan XML. Ia adalah satu set teknologi pembangunan web untuk mencipta aplikasi web interaktif. AJAX membenarkan halaman web untuk berkomunikasi dengan pelayan tanpa memuatkan semula halaman.

Keadaan sedia adalah bahagian penting dalam mengendalikan permintaan AJAX. Status sedia permintaan menunjukkan status permintaan kepada pelayan dan membolehkan pelanggan menjejaki kemajuan permintaan.

Di bawah ini kami memperincikan keadaan kesediaan AJAX yang berbeza.

Tidak Dihantar Status (0)

Ini adalah keadaan sedia pertama AJAX. Ia diwakili oleh integer 0. Apabila membuat permintaan AJAX, permintaan berada dalam keadaan "tidak dihantar" sehingga kaedah hantar() dipanggil. Ini bermakna permintaan itu masih belum dihantar ke pelayan, menunjukkan bahawa permintaan itu masih perlu dihantar. Keadaan ini juga dipanggil XMLHttpRequest.UNSENT.

Tatabahasa

http.onreadystatechange = function () {
   if (this.readyState == 0) {
      
      //put your code here
      console.log('This is UNSET state')
   }
}

Status terbuka (1)

Ini adalah keadaan sedia kedua AJAX. Diwakili oleh integer 1. Keadaan terbuka permintaan AJAX ialah apabila permintaan dihantar ke pelayan, tetapi respons belum diterima. Ini biasanya merupakan langkah pertama dalam kitaran permintaan AJAX dan biasanya dicetuskan oleh tindakan pengguna seperti klik butang atau penyerahan borang. Ini menunjukkan bahawa permintaan telah dibuka dan pengepala permintaan telah dihantar.

Sebagai contoh, apabila pengguna mengklik butang untuk menyerahkan borang, permintaan AJAX dihantar ke pelayan, yang kemudiannya memproses permintaan dan menghantar semula respons. Penyemak imbas kemudian memproses respons dan mengemas kini halaman dengan sewajarnya. Contoh lain ialah apabila pengguna mengklik pautan untuk memuatkan lebih banyak kandungan, permintaan AJAX dihantar ke pelayan untuk mendapatkan kandungan tambahan dan kemudian memaparkannya pada halaman.

Tatabahasa

http.onreadystatechange = function () {
   if (this.readyState == 1) {
      
      //put your code here
      console.log('This is OPENED state')
   }
}

KEPALA_TERIMA status (2)

Ini adalah keadaan sedia ketiga AJAX. Ia diwakili oleh integer 2. Pengepala Diterima ialah status permintaan dalam AJAX yang berlaku apabila permintaan dihantar dan pelayan bertindak balas dengan pengepalanya. Pelayan telah menerima permintaan dan sedang menyediakan respons, menunjukkan bahawa pengepala respons telah diterima.

Sebagai contoh, apabila pengguna menghantar permintaan untuk melihat halaman web, pelayan akan bertindak balas dengan menghantar semula pengepala halaman. Pengepala ini mengandungi maklumat seperti jenis kandungan, panjang halaman dan tarikh halaman terakhir diubah suai.

Contoh lain ialah apabila pengguna menghantar permintaan kepada pelayan untuk memuat turun fail. Pelayan akan bertindak balas dengan menghantar kembali pengepala fail, seperti saiz dan jenis fail dan tarikh terakhir ia diubah suai.

Tatabahasa

http.onreadystatechange = function () {
   if (this.readyState == 2) {
      
      //put your code here
      console.log('This is HEADERS_RECEIVED state')
   }
}

Memuatkan status (3)

Keadaan pemuatan permintaan dalam AJAX ialah apabila permintaan dihantar ke pelayan dan respons diterima. Pada masa ini, status permintaan adalah "dimuatkan", menunjukkan bahawa badan respons sedang diterima.

Sebagai contoh, apabila pengguna mengklik butang untuk menyerahkan borang, keadaan pemuatan ialah apabila borang diserahkan dan respons (seperti mesej kejayaan atau ralat) dikembalikan daripada pelayan.

Contoh lain ialah apabila pengguna mengklik pautan untuk menavigasi ke halaman baharu. Keadaan pemuatan ialah apabila pautan diklik dan halaman baharu dimuatkan.

Tatabahasa

http.onreadystatechange = function () {
   if (this.readyState == 3) {
      
      //put your code here
      console.log('This is LOADING state')
   }
}

Status lengkap (4)

Status penyelesaian permintaan dalam AJAX ialah apabila permintaan telah dilengkapkan dan respons telah diterima. Pada ketika ini pelayan telah menjawab permintaan dan data tersedia untuk pemprosesan selanjutnya. Ini menunjukkan bahawa permintaan telah selesai dan respons telah diterima.

Tatabahasa

http.onreadystatechange = function () {
   if (this.readyState == 4) {
      
      //put your code here
      console.log('This is DONE state')
   }
}

Contoh

Dalam contoh ini kita akan membuat panggilan AJAX dan melihat keadaan kesediaan yang berbeza. Kami akan mengemas kini halaman web negeri yang berbeza dengan status semasa mereka. Kami tidak boleh melakukan keadaan UNSENT kerana keadaan ini hanya tersedia sebelum panggilan AJAX dihantar. Kami menggunakan pengendali acara klik butang untuk mencetuskan panggilan AJAX.

<html>
<body>
   <h2>Different <i>Ready State</i> of AJAX</h2>
   <button onclick = "ajaxCall()">Trigger AJAX Call</button>
   <div id = "root" style = "border: 1px solid black; padding: 1%"></div>
   <script>
      let root = document.getElementById('root')
      function ajaxCall() {
         root.innerHTML = 'AJAX Call Started! <br /><br />'
            
         //AJAX Call
         let http = new XMLHttpRequest()
         http.onreadystatechange = function () {
            if (this.readyState == 1) {
               root.innerHTML += 'This is OPENED state <br />'
            }
            if (this.readyState == 2) {
               root.innerHTML += 'This is HEADERS_RECEIVED state <br />'
            }
            if (this.readyState == 3) {
               root.innerHTML += 'This is LOADING state <br />'
            }
            if (this.readyState == 4) {
               root.innerHTML += 'This is DONE state <br />'
            }
         }
         http.open('GET', 'https://jsonplaceholder.typicode.com/posts/', true)
         http.onload = function () {
            root.innerHTML += '<br />AJAX Call Completed!'
         }
         http.send()
      }
   </script>
</body>
</html>

Kesimpulan

Dalam JavaScript, permintaan AJAX mempunyai empat keadaan kesediaan berbeza: Tidak Dihantar, Terbuka, Pengepala Diterima dan Selesai. Status yang tidak dihantar bermakna permintaan itu masih belum dihantar ke pelayan. Keadaan terbuka ialah apabila permintaan telah dihantar ke pelayan tetapi respons belum diterima. Keadaan pengepala diterima ialah apabila pelayan telah membalas dengan pengepalanya dan sedang menyediakan respons. Status siap bermakna permintaan telah selesai dan respons telah diterima. Setiap keadaan sedia ini boleh diakses melalui sifat readyState objek XMLHttpRequest. Ia berguna untuk menjejaki kemajuan permintaan AJAX dan mengendalikan respons dengan sewajarnya.

Atas ialah kandungan terperinci Terangkan keadaan kesediaan yang berbeza untuk permintaan dalam AJAX. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!