ajax加载json案例

下面的例子将演示网页如何使用 AJAX 来读取来自json字符串的信息(json可以是一个文件中的字符串，也可以是java,php等服务端程序返回来的json)：




ajax加载json案例代码

当用户点击上面的按钮，就会执行 loadJSONRequest 函数。

loadJSONRequest 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，并将请求发送到服务器。

当服务器响应就绪时，会构建一个 HTML 表格，从json中提取信息，最后填充更新 txtCDInfo 中的内容：


loadJSONRequest方法代码如下：

function loadJSONRequest(url)
{
var xmlhttp;
var txt,xx,x,i;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    txt="<table border='1'><tr><th>姓名</th><th>年龄</th></tr>";
    x=xmlhttp.responseText;
 x=eval( "(" + x + ")" );
 
    for (i=0;i<x.length;i++)
      {
      txt=txt + "<tr><td>" + x[i].name + "</td><td>" + x[i].age + "</td></tr>";
      }
    txt=txt + "</table>";
    document.getElementById('txtCDInfo').innerHTML=txt;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}

服务器返回的json如下：
[{name:"张三",age:20},{name:"李四",age:30},{name:"王五",age:20}]

提示：建议还是用json的吧，json简单，格式简单，数据量小，读取也简单。
相关文章
scala json字符串转case class对象discuz去掉discuz.gtimg.cn导致的页面加载时间变慢长javascript 动态加载js css文件并加载完成回调java如何解决不同运行方式 加载 图片资源路径不一致的问题ajax教程ajax介绍ajax加载json案例ajax响应状态readystateajax加载xml案例jquery.parsejson json jqueryjquery $.parsejson json php 其它基本扩展 javascript对象符号（json）php json 函数 返回最后发生的错误php 函数 returns the bson representation of a json valuephp 函数 returns the canonical extended json representation of a bson valuephp 函数 returns the legacy extended json representation of a bson valuephp mongodb bson objectid returns a representation that can be converted to jsonphp mongodb bson regex returns a representation that can be converted to jsonphp mongodb bson symbol returns a representation that can be converted to jsonphp mongodb bson timestamp returns a representation that can be converted to json
关注编程学问公众号