iT邦幫忙

DAY 25
4

遭遇PHP之經驗分享系列 第 25

[鐵人賽Day25]AJAX基礎入門(搭配使用PHP示範)

在最近幫公司做會員系統時,有用到jQuery的AJAX做提示的功能
而目前越接近完賽感覺題目越來越難找,有種彈盡援絕的感覺
在這當下,才想到我在先前自己的點部落(OS隨手筆記)有發過兩篇AJAX的文章,就讓我把它拿出來與大家分享一下吧

今天要說的是AJAX基礎入門(搭配使用PHP示範)

AJAX是「Asynchronus JavaScript and XML」的簡寫,即非同步JavaScript與XML技術。
一般的Web應用是用戶端填寫表單並送出,送出時就向伺服器傳送一個請求,而伺服器接收請求並處理傳來的表單後,再回傳一個新的頁面。
同時,每次操作都需要向伺服器傳送請求並更新頁面,這使得伺服器的負荷量增加了不少。

而使用AJAX的最大好處是不用更新頁面,向伺服器傳送出請求的資料,並取回必須的資訊。
以達到提高網頁的互動性、速度效率,也因此減少了伺服器的負荷量。
接下來,會以搭配PHP的方式做示範。

「ajax_select.html」

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="./ajax_select.js"></script>
        <title>Untitled</title>
    
    
        選項:
        <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>
    

可以從看到當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");

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

成果如下:


上一篇
[鐵人賽Day24]PHP搭配MySQL-實作目前線上人數功能
下一篇
[鐵人賽Day26]jQuery AJAX部分的應用
系列文
遭遇PHP之經驗分享30

尚未有邦友留言

立即登入留言