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简单，格式简单，数据量小，读取也简单。
相关文章
spark 无法加载主类 org.apache.spark.deploy.yarn.applicationmasterajax加载json案例ajax响应状态readystateajax回调responsetextajax发送请求sendajax使用方法ajax加载xml案例jquery easyui easyloader 简单加载 mysql 加载示例数据并执行查询php 其它基本扩展 javascript对象符号（json）php json json 序列化接口php deque returns a representation that can be converted to jsonphp map returns a representation that can be converted to jsonphp 函数 returns the legacy extended json representation of a bson valuephp 函数 returns the relaxed extended json representation of a bson valuephp json 简介php json 预定义常量php mongodb bson timestamp returns a representation that can be converted to jsonphp mongodb bson undefined returns a representation that can be converted to jsonphp mongodb bson utcdatetime returns a representation that can be converted to json
关注编程学问公众号