AJAX - Hantar permintaan ke pelayan
AJAX - Hantar permintaan ke pelayan
Untuk menghantar permintaan ke pelayan, kita perlu menggunakan kaedah open() dan hantar( ) kaedah. Kaedah
open() memerlukan tiga parameter:
Parameter pertama mentakrifkan kaedah yang digunakan untuk menghantar permintaan (GET atau POST).
Berbanding dengan POST, GET lebih ringkas dan lebih pantas, dan berfungsi dalam kebanyakan kes.
Walau bagaimanapun, sila gunakan permintaan POST dalam situasi berikut:
Tidak mungkin untuk menghantar sejumlah besar data ke pelayan menggunakan fail cache (mengemas kini fail atau pangkalan data pada pelayan) (POST tidak mempunyai had saiz data). POST adalah lebih stabil dan boleh dipercayai daripada GET apabila input pengguna mengandungi aksara yang tidak diketahui
Parameter kedua menentukan URL skrip sebelah pelayan (fail boleh menjadi sebarang jenis fail, seperti sebagai .txt dan .xml, atau fail skrip Pelayan seperti .asp dan .php (boleh melaksanakan tugas pada pelayan sebelum menghantar semula respons)).
Parameter ketiga menentukan bahawa permintaan harus diproses secara tak segerak (benar (tak segerak) atau palsu (segerak)). Kaedah
send() menghantar permintaan kepada pelayan. Jika kita menganggap bahawa fail HTML dan fail ASP terletak dalam direktori yang sama, maka kodnya adalah seperti ini:
xmlHttp.open("GET","time .asp",true) ;
xmlHttp.send(null);
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:
Tidak mungkin untuk menghantar sejumlah besar data ke pelayan menggunakan fail cache (mengemas kini fail atau pangkalan data pada pelayan) (POST tidak mempunyai had saiz data). POST adalah lebih stabil dan boleh dipercayai daripada GET apabila input pengguna mengandungi aksara yang tidak diketahui
Permintaan GET yang mudah:
xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();Anda mungkin mendapat hasil cache.
Untuk mengelakkan perkara ini, tambahkan ID unik pada URL:
xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();Jika anda ingin menghantar maklumat melalui kaedah GET, tambahkan maklumat pada URL:
xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();Kod lengkap:
<!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()">請(qǐng)求數(shù)據(jù)</button>
<div id="myDiv"></div>
</body>
</html>Permintaan POST yang mudah:
xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();Jika anda perlu SIARAN data seperti borang HTML, sila gunakan setRequestHeader() untuk menambah pengepala HTTP. Kemudian nyatakan data yang ingin anda hantar dalam kaedah send()
xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");Sintaks:
setRequestHeader(header,value) Menambahkan pengepala HTTP pada permintaan.
pengepala: menentukan nama pengepala
nilai: menentukan nilai pengepala
Kod penuh:
<!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>url - fail pada pelayan
Parameter url kaedah open() ialah alamat fail pada pelayan:
xmlhttp.open("GET","ajax_test.html" ,true);
Fail boleh terdiri daripada sebarang jenis fail, seperti .txt dan .xml, atau fail skrip pelayan, seperti .asp dan .php (yang boleh 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:
xmlhttp.open("GET"," ajax_test.html" ,true);
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 sambil menunggu respons pelayan.
Async=true
Apabila menggunakan async=true, sila nyatakan fungsi yang akan dilaksanakan sebagai tindak balas kepada keadaan sedia dalam acara onreadystatechange:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();Async = false
Jika anda perlu menggunakan async= false, sila tukar parameter ketiga dalam kaedah open() kepada false:
xmlhttp.open("GET","test1.txt",false) ;
Kami tidak mengesyorkan menggunakan async=false, tetapi untuk beberapa permintaan kecil, ia juga boleh dilakukan.
Ingat bahawa JavaScript akan menunggu sehingga respons pelayan sedia sebelum meneruskan. Jika pelayan sibuk atau lambat, aplikasi akan hang atau berhenti.
Nota: Apabila anda menggunakan async=false, sila jangan tulis fungsi onreadystatechange - hanya letakkan kod selepas pernyataan send():
xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;Contoh:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>實(shí)例</title>
<script>
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open('get','new.php',true); //引入new.php文件
xhr.send();
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
//alert( xhr.responseText ); 后端傳來(lái)的格式是一個(gè)數(shù)組里面很多條json 自己可以測(cè)試下
var data = JSON.parse( xhr.responseText ); // 將后臺(tái)獲取的內(nèi)容轉(zhuǎn)為json類型 每一個(gè)json里面有兩個(gè)鍵：title和date
var oUl = document.getElementById('ul1'); //獲取顯示新聞列表的節(jié)點(diǎn)
var html = '';
for (var i=0; i<data.length; i++) { // 循環(huán)所有的json數(shù)據(jù)，并把每一條添加到列表中
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html; //把內(nèi)容放在頁(yè)面里
} else {
alert('出錯(cuò)了,Err：' + xhr.status);
}
}
}
}
}
</script>
</head>
<body>
<input type="button" value="按鈕" id="btn" />
<ul id="ul1"></ul>
</body>
</html>Buat fail.php baharu:
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$news = array(
array('title'=>'女總理默克爾滑雪時(shí)摔倒 骨盆斷裂','date'=>'2014-1-6'),
array('title'=>'駐英外交官撰文互稱對(duì)方國(guó)家為"伏地魔"','date'=>'2014-1-6'),
array('title'=>'安倍:望與中國(guó)領(lǐng)導(dǎo)人會(huì)面 中方:你關(guān)閉了大門','date'=>'2014-1-6'),
array('title'=>'揭秘臺(tái)灣駐港間諜網(wǎng)運(yùn)作 湖北宜昌副市長(zhǎng)被查','date'=>'2014-1-6'),
array('title'=>'：嫦娥三號(hào)是貨真價(jià)實(shí)的中國(guó)創(chuàng)造','date'=>'2014-1-6'),
);
echo json_encode($news);
?>
