[JavaScript]AJAX基礎入門(搭配使用PHP示範)

摘要:[JavaScript]AJAX基礎入門(搭配使用PHP示範)

AJAX是「Asynchronus JavaScript and XML」的簡寫,即非同步JavaScript與XML技術。
 
一般的Web應用是用戶端填寫表單並送出,送出時就向伺服器傳送一個請求,而伺服器接收請求並處理傳來的表單後,再回傳一個新的頁面。
同時,每次操作都需要向伺服器傳送請求並更新頁面,這使得伺服器的負荷量增加了不少。
 
而使用AJAX的最大好處是不用更新頁面,向伺服器傳送出請求的資料,並取回必須的資訊。
以達到提高網頁的互動性、速度效率,也因此減少了伺服器的負荷量。
 


接下來,會以搭配PHP的方式做示範。

首頁 ajax_select.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="./ajax_select.js"></script>
        <title>Untitled</title>
    </head>
    <body>
        選項:
        <select id="select_op" onchange="check()";>
            <option  value="" selected="selected">請選擇</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <br />
        回應訊息:<div id="message"></div>
    </body>
</html>

可以從看到當Select標籤的選項被選取時,會觸發一個JavaScript函式。
 



JavaScript的部分ajax_select.js

var xmlHTTP;

function $_xmlHttpRequest()
{   
    if(window.ActiveXObject)
    {
        xmlHTTP=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)
    {
        xmlHTTP=new XMLHttpRequest();
    }
}

function check()
{  
    var select_op=document.getElementById("select_op").value;
    
    $_xmlHttpRequest();
    xmlHTTP.open("GET","ajax_check.php?select_op="+select_op,true);
    
        xmlHTTP.onreadystatechange=function check_user()
        {
            if(xmlHTTP.readyState == 4)
            {
                if(xmlHTTP.status == 200)
                {
                    var str=xmlHTTP.responseText;
                    document.getElementById("message").innerHTML=str;
                }
            }
        }
        xmlHTTP.send(null);
    }

現今所有的瀏覽器均支援XMLHttpRequest物件(IE5、IE6僅支援ActiveXObject)

使用XMLHttpRequest物件語法:xmlHTTP=new XMLHttpRequest();
使用ActiveX物件語法:xmlHTTP=new ActiveXObject("Microsoft.XMLHTTP");

將請求傳送到伺服器,使用XMLHttpRequest物件的open()和send()方法
(此範例是用GET方法,把值傳送到ajax_check.php)
使用方法:
(可參考:http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp)
open(method,url,async) 規定請求的類型、URL 以及是否異步處理請求。
method:請求的類型 GET 或 POST
url:文件在服務器上的位置
async:true(異步)或 false(同步)
send(string) 將請求發送到服務器。
string:僅用於 POST 請求

 

onreadystatechange 事件
(可參考:http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp)

每當readyState 改變時,就會觸發onreadystatechange 事件。
readyState 屬性存有XMLHttpRequest 的狀態信息。
下面是XMLHttpRequest 對象的三個重要的屬性:
readyState
存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成,且回應已就緒
status
200: "OK"
404: 未找到頁面
 
接著使用XMLHttpRequest物件的responseText屬性,將伺服端的字串回應值,並回傳到指定的id位置。

上述內碼也可以寫成這樣:document.getElementById("message").innerHTML=xmlHTTP.responseText;
 



JavaScript程式碼內,open( )內url位置 ajax_check.php

<?php    
    header("Content-Type:text/html;charset=utf-8");
   $select_op=$_GET['select_op'];

    if($select_op != ""){
        if($select_op == "1"){
            echo "你選擇到1的選項";
        }else if($select_op == "2"){
            echo "你選擇到2的選項";
        }else if($select_op == "3"){
            echo "你選擇到3的選項";
        }
    }else{
        echo "請選擇一個選項";
    }
?>

 


 
成果如下: