本次實驗資料以Json的格式傳輸和處理。下面有兩種產生json字串的方式。
PHP內建json_encode()和json_decode()方法。但是解碼的那個方法並不常用，這是由瀏覽器的自身工作原理決定的。在產生Json 串的時候，我們只需要將要編碼的資料傳給json_encode()即可。
$obj = arr("first"=>"first_value","second"=>"second_value","three"=>"three_value");$encode_data = json_encode($arr);var_dump($encode_data);
相較於第一種方式，第二種方式就顯得不那麼自動化了，因為是手工產生的，但是對於小型資料量的處理而言，速度還是很快的。
注意：使用第二種方式一定要注意字串外邊使用單引號，內部索引值對資料使用雙引號。
<?phpheader("Content-Type:text/html;charset=utf-8");// 製作一個Json資訊echo '{"city":"大連","temp":"27°C","WD":"東南風"}';?>
這裡為了示範的方便，採用了第二種方式。
何為搬運工？ 在這裡就是向伺服器請求資料，然後將獲得的資料返還給請求所在的用戶端。Ajax在這裡就是這麼一個功能。
下面的這段代碼就示範了如何建立一個ajax對象並讓其工作。
<script> function f1(){ alert('即將彈出資料'); var ajax; if(window.XMLHttpRequest){ ajax = new XMLHttpRequest(); }else{ ajax = new ActiveObject("Microsoft.XMLHTTP"); } // 給Ajax設定事件 ajax.onreadystatechange = function(){ if(ajax.readyState==4){ alert(ajax.responseText); document.getElementById('response').innerHTML=ajax.responseText; } } // 如果以GET請求方式請求資料的話，為了防止特殊字元，及中文的幹擾我們要使用JavaScript的一個encodeURIComponent(raw_data);進行安全編碼 ajax.open('get','./forajax.php'); // 使用POST請求方式的時候，其原理是類比表單提交，所以需要加上頭資訊,但是要放到open方法後面 ajax.setRequestHeader("content-type","application/x-www-urlencoded"); ajax.send(null); } </script>
有了資料之後，剩下的工作就是讓資料呈現出一種易於觀察的樣子。這樣資料才有了存在的價值。
這裡我們利用ajax擷取到的資料是一個字串資料，但是我們要想使用這些資料，怎麼辦呢？
難道是手動的分割這些資訊嗎？但是要怎麼分割呢？···
所以我們要藉助eval函數
// 這樣我們就能將字串成功的轉化為一個物件類型的資料eval("var obj="+result);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>使用Ajax擷取資料，交給JavaScript處理</title><script> function getWeather() { var ajaxclient; if(window.XMLHttpRequest){ ajaxclient = new XMLHttpRequest(); }else { ajaxclient = new ActiveObject("Microsoft.XMLHTTP"); } // 當資料完整返回的時候觸發 ajaxclient.onreadystatechange = function() { if(ajaxclient.readyState==4){ // 使用eval函數來把字串轉換為一個對象 eval("var result=" + ajaxclient.responseText); //alert("伺服器返回的資訊為："+result); document.getElementById("city").innerHTML=result.city; document.getElementById("temp").innerHTML=result.temp; document.getElementById("wd").innerHTML=result.WD; } } // 開始發送請求 ajaxclient.open('get','./forjson.php'); ajaxclient.send(null); }</script> </head><body><h1>使用Ajax非同步擷取天氣資料，再使用JavaScript處理資料 </h1><button name="btn" onclick="getWeather()">擷取並顯示資料</button> <p><table width="200" border="1" summary="使用ajax無重新整理擷取資料，在使用JavaScript處理資料。"> <caption> 詳細資料 </caption> <tr> <td>城市</td> <td>溫度</td> <td>風向</td> </tr> <tr> <td><span id="city"></span></td> <td><span id="temp"></span></td> <td><span id="wd"></span></td> </tr></table></p></body></html>
我們不難發現，頁面上的連結根本沒有發生變化，這就是無重新整理實現的頁面載入！
這樣，我們的實驗就算完成了。我們可以看出要想給使用者提供一個更好的使用者體驗，Ajax絕對是必經之路。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
