现在位置:首页 > Java技术 > 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>tutorialspoint.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

本站文章除注明转载外,均为本站原创或编译
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,传播学习教程;
转载请注明:文章转载自:易百教程 [http://www.yiibai.com]
本文标题:JSON & Ajax
转载请保留原文链接:http://www.yiibai.com/html/json/2013/0907258.html
上一篇:JSON & Java      下一篇:没有了
网友评论(共0条评论)
理智评论文明上网,拒绝恶意谩骂 发表评论/共0条评论