AJAX - 向伺服器發送請求
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);
?>
