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简单，格式简单，数据量小，读取也简单。
相关文章
javascript ajax 完整实现代码案例jquery实现ajax提交form表单的方法ajax async异步请求和同步请求ajax加载json案例ajax是什么ajax加载xml案例ajax xmlhttp参考手册jquery.ajax url settings jqueryphp pair returns a representation that can be converted to jsonphp priorityqueue returns a representation that can be converted to jsonphp queue returns a representation that can be converted to jsonphp 类/对象 函数 尝试加载未定义的类php php 选项/信息 函数 检查一个扩展是否已经加载php php 选项/信息 函数 返回所有编译并加载模块名的 arrayphp json 安装／配置php jsonserializable 指定需要被序列化成 json 的数据php mongodb bson binary returns a representation that can be converted to jsonspark写入mongo 按多维度提取分层jsonspark读取zip压缩文件中的json文本fastjson JSON字符串转 List Map
关注编程学问公众号