Json教學 » JSON & Ajax

JSON & Ajax

Ajax是非同步JavaScript和XML是用來在用戶端作為一組相互關聯的Web開發技術，以建立非同步Web應用程式。 Ajax模型，Web應用程式可以傳送資料和檢索資料從一個伺服器，而不干擾現有的頁面顯示行為非同步。

許多開發人員使用JSON AJAX更新用戶端和伺服器之間傳遞。網站更新現場直播的體育成績可以被視為一個AJAX例子。如果這些分數在網站上，則它們必須被儲存在伺服器上的網頁，這樣可以檢索在需要時將比分。這是我們可以使用的JSON格式的資料。

可以使用JSON格式儲存在Web伺服器上的任何資料都使用AJAX更新。 Ajax的JavaScript的使用，以便可以檢索這些JSON檔案，必要時，他們解析它們，然後做了兩個：

  • 將變數作進一步處理之前，在網頁上顯示它們的解析值

  • 它直接在網頁中的DOM元素分配資料，這樣它就會顯示在網站上。

範例

下面的程式碼顯示了JSON與Ajax，它儲存在ajax.htm檔案中。這裡載入函式loadJSON()將用於非同步到JSON資料上傳。

<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<script type="application/javascript">
function loadJSON()
{
   var data_file = "/json/data.json";
   var http_request = new XMLHttpRequest();
   try{
      // Opera 8.0+, Firefox, Chrome, Safari
      http_request = new XMLHttpRequest();
   }catch (e){
      // Internet Explorer Browsers
      try{
         http_request = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
         try{
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
         }catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
   http_request.onreadystatechange  = function(){
      if (http_request.readyState == 4  )
      {
        // Javascript function JSON.parse to parse JSON data
        var jsonObj = JSON.parse(http_request.responseText);

        // jsonObj variable now contains the data structure and can
        // be accessed as jsonObj.name and jsonObj.country.
        document.getElementById("Name").innerHTML =  jsonObj.name;
        document.getElementById("Country").innerHTML = jsonObj.country;
      }
   }
   http_request.open("GET", data_file, true);
   http_request.send();
}
</script>
<title>tw511.com JSON</title>
</head>
<body>
<h1>Cricketer Details</h1>
<table class="src">
<tr><th>Name</th><th>Country</th></tr>
<tr><td><div id="Name">Sachin</div></td>
<td><div id="Country">India</div></td></tr>
</table>

<div class="central">
<button type="button" onclick="loadJSON()">Update Details </button>
</body>
</html>

以下是輸入檔案data.json檔案JSON格式的資料將被上傳非同步當我們單擊“Update Details“按鈕，這裡比較簡單，有興趣的朋友可以自己測試一下。

{"name": "brett", "country": "Australia"}

上面的HTML程式碼會產生下面的螢幕，可以檢查AJAX 動作：

Name Country
Sachin
India

當點選“Update Details“按鈕，應該得到的結果如下的東西，也可以嘗試自己測試JSON和AJAX 使用支援Javascript瀏覽器

Name Country
brett
Australia