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

Penerangan

onreadystatechange

Fungsi storan (atau Nama fungsi), fungsi ini akan dipanggil apabila sifat readyState berubah.

readyState

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status

200: "OK"
404: 未找到页面

Menyimpan status XMLHttpRequest. Perubahan dari 0 kepada 4.

0: Permintaan tidak dimulakan
1: Sambungan pelayan telah diwujudkan
< /li>
2: Permintaan telah diterima
3: Permintaan sedang diproses
4: Permintaan telah selesai , dan respons sudah sedia

status

200 : "OK"
404: Halaman Tidak Ditemui

Dalam acara onreadystatechange, kami menentukan tugas yang perlu dilakukan apabila respons pelayan sedia untuk diproses.

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

Instance

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/asset/demo.ajax.php?dm=txt&act=getfruits",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>
</body>
</html>

Nota :

onreadystatechange Peristiwa dicetuskan 5 kali (0 - 4), sepadan dengan setiap perubahan dalam 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): <🎜><🎜><🎜>Instance<🎜><🎜>< 🎜>< ;html><🎜><🎜>

<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for 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&act=getfruits",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">通过 AJAX 改变内容</button>
</body>
</html>

<🎜><🎜><🎜>bahagian seterusnya

fail baharu

<!DOCTYPE html>
<html>
<head>
 <meta charset=" utf-8">
 <meta name="author" content="http://www.php.cn/" />
 <title>php中文网</title>
 <script>
 function loadXMLDoc() {
 var xmlhttp;
 if (window.XMLHttpRequest) {
 xmlhttp = new XMLHttpRequest();
 }
 else {
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange = function () {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 document.getElementById("show").innerHTML = xmlhttp.responseText;
 }
 }
 xmlhttp.open("GET", "demo/ajax/net/Async.aspx", true);
 xmlhttp.send();
 }
 window.onload = function () {
 loadXMLDoc();
 var odiv = document.getElementById("content");
 odiv.innerHTML = "由于是异步操作，所以不会阻塞当前内容的显示。";
 }
 </script>
</head>
<body>
<div id="show"><img src="https://img.php.cn/upload/course/000/000/004/580da11647704673.jpg"></div>
<div id="content"></div>
</body>
</html>

serahkan Tetapkan Semula Kod

Operasi automatik

AJAX - acara onreadystatechange

acara onreadystatechange

2: Permintaan telah diterima

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

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