DOM XMLHttpRequest

Objek XMLHttpRequest

Objek XMLHttpRequest membolehkan anda mengemas kini sebahagian daripada halaman web tanpa memuatkan semula keseluruhan halaman.

Objek XMLHttpRequest

Objek XMLHttpRequest digunakan di belakang tabir untuk bertukar-tukar data dengan pelayan. Objek

XMLHttpRequest ialah impian pembangun kerana anda boleh:

Kemas kini halaman web tanpa memuatkan semula halaman
Minta data daripada pelayan selepas halaman dimuatkan
Terima data daripada pelayan selepas halaman dimuatkan
Hantar data ke pelayan di latar belakang

Buat objek XMLHttpRequest

Semua pelayar moden (IE7+, Firefox, Chrome, Safari dan Opera) mempunyai Create an XMLHttpRequest objek.

Sintaks untuk mencipta objek XMLHttpRequest

xmlhttp=new XMLHttpRequest();

Versi lama Internet Explorer (IE5 dan IE6) menggunakan objek ActiveX:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

Untuk mengendalikan semua penyemak imbas moden, termasuk IE5 dan IE6, sila semak sama ada penyemak imbas menyokong objek XMLHttpRequest. Jika disokong, buat objek XMLHttpRequest, jika tidak, buat objek ActiveX:

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
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","xmlhttp_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>Using the XMLHttpRequest object</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

Running Instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Hantar permintaan ke pelayan

Untuk menghantar permintaan ke pelayan, kami menggunakan objek XMLHttpRequest Kaedah open() dan send():

xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();

Kaedah

Penerangan

terbuka(kaedah,url,async)

Menentukan jenis permintaan, URL , sama ada permintaan itu perlu diproses secara tak segerak.

方法	描述
open(method,url,async)	规定请求的类型，URL，请求是否应该进行异步处理。 method：请求的类型：GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	发送请求到服务器。 string：仅用于 POST 请求

<🎜>kaedah: Jenis permintaan: GET atau POST <🎜>url: Lokasi fail pada pelayan <🎜>async< /em >: true (asynchronous) atau false (synchronous)

hantar(rentetan)

Hantar permintaan kepada pelayan. <🎜><🎜>rentetan: hanya digunakan untuk permintaan POST

DAPATKAN atau POS?

GET lebih ringkas dan lebih pantas daripada POST dan boleh digunakan dalam kebanyakan situasi.

Walau bagaimanapun, sentiasa gunakan permintaan POST dalam kes berikut:

Fail cache bukan pilihan (mengemas kini fail atau pangkalan data pada pelayan)
Jumlah data yang dihantar ke pelayan adalah besar (POST tiada had saiz)
Menghantar input pengguna (boleh mengandungi aksara yang tidak diketahui), POST lebih berkuasa dan lebih berkuasa daripada GET Security

URL - Fail pada pelayan

Parameter url kaedah open() ialah alamat fail pada pelayan :

xmlhttp.open("GET","xmlhttp_info.txt",true);

Fail boleh menjadi sebarang jenis fail (seperti .txt dan .xml), atau fail Skrip pelayan (seperti .html dan .php yang melakukan tindakan pada pelayan sebelum menghantar balasan kembali).

Asynchronous - True or False?

Untuk menghantar permintaan secara tak segerak, parameter async kaedah open() mesti ditetapkan kepada benar:

xmlhttp. open("GET","xmlhttp_info.txt",true);

Menghantar permintaan tak segerak ialah peningkatan besar untuk pembangun web. Banyak tugas yang dilakukan pada pelayan sangat memakan masa.

Dengan menghantar secara tak segerak, JavaScript tidak perlu menunggu respons daripada pelayan, tetapi boleh digantikan dengan:

Semasa menunggu respons daripada pelayan, laksanakan skrip lain
Mengendalikan respons apabila respons sedia

Async=true

Apabila menggunakan async =true, ia dinyatakan dalam acara onreadystatechange apabila respons sedia Fungsi untuk dilaksanakan:

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
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","xmlhttp_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>Using the XMLHttpRequest object</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

Run Instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Async=false

Untuk menggunakan async=false, sila tukar parameter ketiga kaedah open() kepada false:

xmlhttp.open("GET","xmlhttp_info.txt",false);

Ia bukan disyorkan untuk menggunakan async=false, tetapi masih OK jika anda mengendalikan beberapa permintaan kecil.

Ingat bahawa JavaScript tidak akan meneruskan pelaksanaan sehingga respons pelayan sedia. Jika pelayan sibuk atau lambat, aplikasi akan hang atau berhenti.

Nota: Jangan tulis onreadystatechange apabila anda menggunakan async=false Fungsi - hanya letakkan kod selepas penyataan send():

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.open("GET","xmlhttp_info.txt",false);
  xmlhttp.send();
  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}
</script>
</head>
<body>

<h2>Using the XMLHttpRequest object</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

Run Instance»

Klik Butang "Jalankan Instance" untuk melihat contoh dalam talian

Respons pelayan

Untuk mendapatkan respons daripada pelayan, gunakan sifat responseText atau responseXML bagi objek XMLHttpRequest.

属性	描述
responseText	获取响应数据作为字符串
responseXML	获取响应数据作为 XML 数据

sifat responsText

Gunakan sifat responseText jika respons daripada pelayan bukan XML. Sifat

responseText mengembalikan respons sebagai rentetan, anda boleh menggunakannya dengan sewajarnya:

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
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","xmlhttp_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>Using the XMLHttpRequest object</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

Jalankan instance »

Klik butang "Run Instance" untuk melihat contoh dalam talian

atribut responseXML

Jika respons daripada pelayan adalah bukan XML dan anda mahu Untuk menghuraikannya ke dalam objek XML, gunakan atribut responseXML:

Instance

Minta fail cd_catalog.xml dan huraikan respons:

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
      xmlDoc=xmlhttp.responseXML;
      var txt="";
      x=xmlDoc.getElementsByTagName("ARTIST");
      for (i=0;i<x.length;i++)
        {
        txt=txt + x[i].childNodes[0].nodeValue + "<br>";
        }
      document.getElementById("myDiv").innerHTML=txt;
        }
      }
  xmlhttp.open("GET","cd_catalog.xml",true);
  xmlhttp.send();
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}
</script>
</head>
<body>

<h2>My CD Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

onreadystatechange event

Apabila permintaan dihantar ke Pelayan, kami ingin melakukan beberapa tindakan berdasarkan respons.

acara onreadystatechange dicetuskan setiap kali readyState berubah.

atribut readyState memegang status XMLHttpRequest.

Tiga atribut penting objek XMLHttpRequest:

Atribut

Penerangan

onreadystatechange

Fungsi storan (atau nama fungsi) dipanggil secara automatik setiap kali atribut readyState berubah

readyState

menyimpan status XMLHttpRequest. Tukar daripada 0 kepada 4:

属性	描述
onreadystatechange	存储函数（或函数的名称）在每次 readyState 属性变化时被自动调用
readyState	存放了 XMLHttpRequest 的状态。从 0 到 4 变化： 0：请求未初始化 1：服务器建立连接 2：收到的请求 3：处理请求 4：请求完成和响应准备就绪
status	200："OK" 404：找不到页面

0: Permintaan tidak dimulakan <🎜> 1: Pelayan mewujudkan sambungan <🎜> 2: Permintaan diterima <🎜> 3: Memproses permintaan <🎜> 4: Permintaan selesai dan respons sedia

status

200: "OK" <🎜> 404: Halaman tidak ditemui

Dalam acara onreadystatechange, kami menentukan perkara yang berlaku apabila respons pelayan sedia untuk diproses.

Apabila readyState ialah 4 atau status ialah 200, penyediaan respons:

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
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","xmlhttp_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>Using the XMLHttpRequest object</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

Jalankan instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Nota: Acara onreadystatechange dicetuskan setiap kali readyState berubah, sebanyak empat kali.

Lagi contoh

Dapatkan maklumat pengepala melalui getAllResponseHeaders()
Dapatkan sumber (fail ) maklumat tajuk.

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
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('p1').innerHTML=xmlhttp.getAllResponseHeaders();
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>

<p id="p1">The getAllResponseHeaders() function returns the header information of a resource, like length, server-type, content-type, last-modified, etc.</p>
<button onclick="loadXMLDoc('xmlhttp_info.txt')">Get header information</button>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Dapatkan semula maklumat pengepala yang ditentukan melalui getResponseHeader()
Dapatkan semula maklumat pengepala yang ditentukan bagi sumber (fail).

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
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('p1').innerHTML="Last modified: " + xmlhttp.getResponseHeader('Last-Modified');
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>

<p id="p1">The getResponseHeader() function is used to return specific header information from a resource, like length, server-type, content-type, last-modified, etc.</p>
<button onclick="loadXMLDoc('xmlhttp_info.txt')">Get "Last-Modified" information</button>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Dapatkan semula kandungan fail ASP
Cara halaman web berkomunikasi dengan pelayan web apabila pengguna menaip aksara dalam medan input.

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
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("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<h3>Start typing a name in the input field below:</h3>
<form action=""> 
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p> 

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Dapatkan semula kandungan daripada pangkalan data
Cara halaman web mengekstrak maklumat daripada pangkalan data melalui objek XMLHttpRequest.

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }  
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("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getcustomer.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form action=""> 
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Dapatkan semula kandungan fail XML
Buat XMLHttpRequest untuk mendapatkan semula data daripada fail XML dan memaparkan data dalam jadual HTML.

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
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)
    {
    txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
    for (i=0;i<x.length;i++)
      {
      txt=txt + "<tr>";
      xx=x[i].getElementsByTagName("TITLE");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
      xx=x[i].getElementsByTagName("ARTIST");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
      txt=txt + "</tr>";
      }
    txt=txt + "</table>";
    document.getElementById('txtCDInfo').innerHTML=txt;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="txtCDInfo">
<button onclick="loadXMLDoc('cd_catalog.xml')">Get CD info</button>
</div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

DOM XMLHttpRequest

Objek XMLHttpRequest

Objek XMLHttpRequest

Buat objek XMLHttpRequest

Instance

Hantar permintaan ke pelayan

DAPATKAN atau POS?

URL - Fail pada pelayan

Asynchronous - True or False?

Async=true

Instance

Async=false

Instance

Respons pelayan

sifat responsText

Instance

atribut responseXML

Instance

onreadystatechange event

Instance

Lagi contoh

Instance

Instance

Instance

Instance

Instance

Laman web PHP Cina