Permintaan XHR
Objek XMLHttpRequest digunakan untuk bertukar data dengan pelayan.
Hantar permintaan ke pelayan
Untuk menghantar permintaan ke pelayan, kami menggunakan kaedah open() dan send() objek XMLHttpRequest:
xmlhttp.send();
| Kaedah | Penerangan | ||||||
|---|---|---|---|---|---|---|---|
| terbuka(kaedah< /em>, url,async) |
| ||||||
| hantar(rentetan) | <🎜>Hantar permintaan kepada pelayan. <🎜>
|
DAPATKAN atau POS?
Berbanding dengan POST, GET lebih ringkas dan lebih pantas, dan berfungsi dalam kebanyakan kes.
Walau bagaimanapun, sila gunakan permintaan POST dalam situasi berikut:
Fail cache (mengemas kini fail atau pangkalan data pada pelayan) tidak boleh digunakan
Hantar sejumlah besar data ke pelayan (POST tiada had data)
Apabila menghantar input pengguna yang mengandungi aksara yang tidak diketahui, POST lebih stabil dan boleh dipercayai daripada GET
DAPATkan permintaan
Permintaan GET yang mudah:
Dalam contoh di atas, anda mungkin mendapat hasil cache.
Untuk mengelakkan perkara ini, tambahkan ID unik pada URL:
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
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","/try/ajax/demo_get.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>Jalankan Instance»
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
Jika anda ingin menghantar maklumat melalui kaedah GET, sila tambah maklumat pada URL:
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
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","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<p>Click the button several times to see if the time changes, or if the file is cached.</p>
<div id="myDiv"></div>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat instance dalam talian
Permintaan POST
Permintaan POST mudah:
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
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","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>Jalankan Instance»
Klik butang "Jalankan Instance" " untuk melihat contoh dalam talian
Jika anda perlu SIARAN data seperti borang HTML, sila gunakan setRequestHeader() untuk menambah pengepala HTTP. Kemudian nyatakan data yang anda mahu hantar dalam kaedah send():
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
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("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>Run instance»
Klik butang "Jalankan instance" untuk melihat contoh dalam talian
| Kaedah | Penerangan | ||||
|---|---|---|---|---|---|
| setRequestHeader(header,value ) |
|
url - fail pada pelayan
parameter url kaedah open() ialah alamat fail pada pelayan:
Fail boleh menjadi sebarang jenis fail, seperti .txt dan .xml, atau fail skrip pelayan , seperti .asp dan .php (mampu melaksanakan tugas pada pelayan sebelum menghantar semula respons).
Async - Betul atau Salah?
AJAX merujuk kepada Asynchronous JavaScript dan XML.
Jika objek XMLHttpRequest hendak digunakan untuk AJAX, parameter async kaedah open()nya mesti ditetapkan kepada benar:
Menghantar permintaan tak segerak ialah peningkatan besar untuk pembangun web. Banyak tugas yang dilakukan pada pelayan agak memakan masa. Sebelum AJAX, ini boleh menyebabkan aplikasi hang atau berhenti.
Dengan AJAX, JavaScript tidak perlu menunggu respons daripada pelayan, sebaliknya:
Laksanakan skrip lain sementara menunggu respons daripada pelayan
Proses respons apabila sudah sedia
Async=true
Apabila menggunakan async=true, sila nyatakan bila respons sudah sedia dalam acara onreadystatechange Fungsi yang dilaksanakan dalam status:
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
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("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>Run Instance»
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
Anda akan mengetahui lebih lanjut tentang onreadystatechange dalam bab kemudian.
Async = false
Jika anda perlu menggunakan async=false, sila tukar parameter ketiga dalam kaedah open() kepada false:
<html><!DOCTYPE html>
<html>
<head>
<script>
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","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>Kami tidak 't Adalah disyorkan untuk menggunakan async=false, tetapi untuk beberapa permintaan kecil, ia juga boleh dilakukan.
Ingat bahawa JavaScript akan menunggu sehingga respons pelayan sedia sebelum meneruskan pelaksanaan. Jika pelayan sibuk atau lambat, aplikasi akan hang atau berhenti.
Nota: Apabila anda menggunakan async=false, sila jangan tulis fungsi onreadystatechange - cuma letakkan kod selepas pernyataan send():
Contoh
xmlhttp.open("GET","test1.txt",false);
Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
