AJAX - acara onreadystatechange

acara onreadystatechange

Apabila permintaan dihantar ke pelayan, kami perlu melaksanakan beberapa tugas berasaskan respons.

Apabila readyState berubah, acara onreadystatechange akan dicetuskan.

Atribut readyState menyimpan maklumat status XMLHttpRequest.

Berikut ialah tiga atribut penting objek XMLHttpRequest:

Atribut readystatechange Menyimpan fungsi (atau nama fungsi) yang akan dipanggil apabila sifat readyState berubah. readyState

Menyimpan status XMLHttpRequest. Perubahan dari 0 kepada 4.

0: Permintaan tidak dimulakan

1: Sambungan pelayan telah diwujudkan 2: Permintaan telah diterima

3 : Permintaan sedang diproses

                                                                                                                                                                                                              Permintaan telah dilengkapkan dan respons sedia peraturan Tugas dilakukan apabila respons pelayan sedia untuk diproses.

Apabila readyState bersamaan dengan 4 dan status ialah 200, ini bermakna respons sudah sedia:

xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

Nota: Acara onreadystatechange dicetuskan 5 kali (0 - 4), sepadan dengan setiap perubahan readyState.

Menggunakan fungsi panggil balik

Fungsi panggil balik ialah fungsi yang dihantar sebagai parameter kepada fungsi lain.

Jika anda mempunyai berbilang tugas AJAX di tapak anda, anda harus menulis fungsi standard untuk mencipta objek XMLHttpRequest dan memanggil fungsi itu untuk setiap tugas AJAX.

Panggilan fungsi ini harus mengandungi URL dan tugas yang perlu dilakukan apabila peristiwa onreadystatechange berlaku (mungkin berbeza untuk setiap panggilan):

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <script> var xmlhttp; function loadXMLDoc(url,cfunc) { if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 代码 xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=cfunc; xmlhttp.open("GET",url,true); xmlhttp.send(); } function myFunction() { loadXMLDoc("/asset/demo.ajax.php?dm=txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); } </script> </head> <body> <div id="myDiv"><h2>修改文本内容</h2></div> <button type="button" onclick="myFunction()">点击</button> </body> </html>
  • Cadangan kursus
  • Muat turun perisian kursus