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>gitbook.net 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