以前上課老師的資料AJAX 簡介

 

*早期AJAX沒有成為標準前是另外一個視窗到螢幕看不到的地方處理完成後再自己關閉
*也些JQuery做的套件處理語法會不太一樣






全名Asynchronous JavaScript And XML
 主要特性
 在網頁載入完成後後容可以從伺服器讀取資料  不需要重新載入即可更新網頁資料
 由背景將資料傳送到伺服器端
 在用戶端執行

客戶端-網頁瀏覽器
1.事件產生
2.JavaScript 建立
XMLHttpRequest
3.送出 HttpRequest

伺服器端
4. 處理 Request 5. 傳回 Response

客戶端-網頁瀏覽器
6. JavaScript 接收資料
7. 更新網頁資料


AJAX 範例
利用AJAX從伺服器中讀取內容並顯示  HTML 部分
<div id="demo">
<h2>目前顯示的文字</h2>
<button type="button" onclick="getNewText()">更改文字
</button> </div>

JavaScript部分
<script type='text/javascript'>
function getNewText() {
// 建立XMLhttpRequest物件
var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() {
// 確定請求順利完成
if (this.readyState == 4 && this.status == 200) {
// 更改網頁內容
document.getElementById("demo").innerHTML = this.responseText;
} };
// 設定請求類型
xhttp.open("GET", "demo.txt", true); // 送出請求
xhttp.send();
} </script>


AJAX Request GET模式
請求格式
xhttp.open("GET", "demo.php", true); xhttp.send();
xhttp.open("GET", "demo.php?no="+Math.random(), true); xhttp.send();
xhttp.open("GET", "demo.php?fname=John&lname=Ford, true); xhttp.send();


AJAX Request POST模式
請求格式
xhttp.open("POST", "demo.php", true); xhttp.send();
xhttp.open("POST", "demo.php", true); xhttp.setRequestHeader("Content-type", "application/x-www-form- urlencoded");
xhttp.send("fname=John&lname=Ford");

AJAX同步模式(不建議使用)
 若伺服器忙碌有可能造成不可預期結果
xhttp.open("GET", "ajax.txt", false); xhttp.send(); document.getElementById("demo").innerHTML = xhttp.responseText;