JSON & Ajax - Json教程

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>yiibai.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

上一篇： JSON & Java 下一篇：哥，这回真没有了

实例

微信关注