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 onreadystatechange页面加载状态事件extjs ext.require动态加载js文件ajax async异步请求和同步请求ajax案例ajax兼容源代码ajax加载json案例ajax加载xml案例jquery.ajax url settings jqueryjquery $.ajax url settings php set returns a representation that can be converted to jsonphp stack returns a representation that can be converted to jsonphp vector returns a representation that can be converted to jsonphp php 选项/信息 函数 取得已加载的 php.ini 文件的路径php 类与对象 类的自动加载php mongodb bson dbpointer returns a representation that can be converted to jsonphp mongodb bson decimal128 returns a representation that can be converted to jsonphp mongodb bson int64 returns a representation that can be converted to jsonphp yaf request http 是否为ajax请求jquery lazyload 网页图片延迟 懒加载 案例解决MappingJackson2HttpMessageConverter忽略json多余未知属性问题
关注编程学问公众号