AJAX - 向伺服器發送一個請求
要想把請求傳送到伺服器,我們就需要使用 open() 方法和 send( ) 方法。
open() 方法需要三個參數:
第一個參數定義發送要求所使用的方法(GET 還是 POST)。
與 POST 相比,GET 更簡單也更快,並且在大部分情況下都能使用。
然而,在以下情況中,請使用POST 請求:
無法使用快取檔案(更新伺服器上的檔案或資料庫)向伺服器發送大量資料(POST 沒有資料量限制)發送包含未知字元的使用者輸入時,POST 比GET 更穩定也更可靠
第二個參數規定伺服器端腳本的URL(該檔案可以是任何類型的文件,例如.txt 和.xml,或者伺服器腳本文件,例如.asp 和.php (在傳迴響應之前,能夠在伺服器上執行任務))。
第三個參數規定應當對請求進行非同步地處理(true(非同步)或 false(同步))。
send() 方法可將請求送到伺服器。如果我們假設HTML 檔案和ASP 檔案位於相同的目錄,那麼程式碼是這樣的:
#xmlHttp.open("GET","time.asp",true) ;
xmlHttp.send(null);
#GET 還是POST?
與 POST 相比,GET 更簡單也更快,並且在大部分情況下都能使用。
然而,在以下情況中,請使用POST 請求:
無法使用快取檔案(更新伺服器上的檔案或資料庫)向伺服器發送大量資料(POST 沒有資料量限制)發送包含未知字元的使用者輸入時,POST 比GET 更穩定也更可靠
一個簡單的GET 請求:
xmlhttp.open("GET","demo_get.html",true); xmlhttp.send();
您可能得到的是快取的結果。
為了避免這種情況,請在URL 中新增一個唯一的ID:
xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true); xmlhttp.send();
如果您希望透過GET 方法發送訊息,請向URL 新增訊息:
xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true); xmlhttp.send();
完整程式碼:
<!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()">请求数据</button> <div id="myDiv"></div> </body> </html>
一個簡單POST 請求:
xmlhttp.open("POST","demo_post.html",true); xmlhttp.send();
如果需要像HTML 表單那樣POST 數據,請使用setRequestHeader() 來新增HTTP 頭。然後在 send() 方法中規定您希望傳送的資料
xmlhttp.open("POST","ajax_test.html",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");
語法:
setRequestHeader(header,value) 新增 HTTP 頭。
header: 規定頭的名稱
value: 規定頭的值
完整程式碼:
<!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 - 伺服器上的檔案
open() 方法的 url 參數是伺服器上檔案的位址:
xmlhttp.open("GET","ajax_test.html",true);
該文件可以是任何類型的文件,例如.txt 和.xml,或伺服器腳本文件,例如.asp 和.php (在傳回回應之前,能夠在伺服器上執行任務)。
非同步 - True 或 False?
AJAX 指的是非同步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
XMLHttpRequest 物件如果要用於AJAX 的話,其open() 方法的async 參數必須設定為true:
xmlhttp.open("GET","ajax_test.html" ,true);
對於web 開發人員來說,發送非同步請求是一個巨大的進步。很多在伺服器執行的任務都相當費時。 AJAX 出現之前,這可能會導致應用程式掛起或停止。
透過AJAX,JavaScript 不需要等待伺服器的回應,而是:
在等待伺服器回應時執行其他腳本當回應就緒後對回應進行處理
Async=true
當使用async=true 時,請規定在回應處於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
#如需使用async= false,請將open() 方法中的第三個參數改為false:
xmlhttp.open("GET","test1.txt",false);
我們不建議使用 async=false,但是對於一些小型的請求,也是可以的。
請記住,JavaScript 會等到伺服器回應就緒才繼續執行。如果伺服器繁忙或緩慢,應用程式會掛起或停止。
注意:當您使用async=false 時,請不要寫onreadystatechange 函數- 把程式碼放到send() 語句後面即可:
xmlhttp.open("GET","ajax_info.txt",false); xmlhttp.send(); document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
#實例:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>实例</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 ); 后端传来的格式是一个数组里面很多条json 自己可以测试下 var data = JSON.parse( xhr.responseText ); // 将后台获取的内容转为json类型 每一个json里面有两个键:title和date var oUl = document.getElementById('ul1'); //获取显示新闻列表的节点 var html = ''; for (var i=0; i<data.length; i++) { // 循环所有的json数据,并把每一条添加到列表中 html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>'; } oUl.innerHTML = html; //把内容放在页面里 } else { alert('出错了,Err:' + xhr.status); } } } } } </script> </head> <body> <input type="button" value="按钮" id="btn" /> <ul id="ul1"></ul> </body> </html>
建立一個new.php檔案:
<?php header('content-type:text/html;charset="utf-8"'); error_reporting(0); $news = array( array('title'=>'女总理默克尔滑雪时摔倒 骨盆断裂','date'=>'2014-1-6'), array('title'=>'驻英外交官撰文互称对方国家为"伏地魔"','date'=>'2014-1-6'), array('title'=>'安倍:望与中国领导人会面 中方:你关闭了大门','date'=>'2014-1-6'), array('title'=>'揭秘台湾驻港间谍网运作 湖北宜昌副市长被查','date'=>'2014-1-6'), array('title'=>':嫦娥三号是货真价实的中国创造','date'=>'2014-1-6'), ); echo json_encode($news); ?>