XMLHttpRequest 异步处理Json格式数据的典型应用

最新推荐文章于 2025-09-11 22:10:09 发布

转载最新推荐文章于 2025-09-11 22:10:09 发布 · 89 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/johan/archive/2010/03/05/1948007.html

文章标签：

#json #javascript #ViewUI

本文介绍了一种使用XMLHttpRequest获取本地JSON文件数据，并将其转换为JavaScript对象进行解析的方法。通过实例展示了如何操作XMLHttpRequest对象，以及如何在页面上显示解析后的数据。

//声明对象实例 var xmlhttp = false; //产生一个XMLHttpRequest对象实例 getHTTPRequestObject(); function getHTTPRequestObject() { try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(E) { xmlhttp = false; } } if(!xmlhttp && typeof XMLHttpRequest!= 'undefined') { xmlhttp = new XMLHttpRequest(); } } //回调处理 function callback() { if(xmlhttp.readyState == 4) { if(xmlhttp.status == 200) { // 转换Json数据为javascript对象 eval("var objResults =" + xmlhttp.responseText); var displaytext = ""; for (var i=0; i < objResults.Results.computer.length; i++) { displaytext += objResults.Results.computer[i].Manufacturer + " " + objResults.Results.computer[i].Model + ": $" + objResults.Results.computer[i].Price + "<br>"; } var finddiv = document.getElementById("divResponse");//寻找显示容器 finddiv.innerHTML = displaytext;//引用解析好了的数据 } } } //触发事件 function btnClick() { // retrieve the JSON text from the local file. xmlhttp.open("GET", "JSON.txt", true); xmlhttp.onreadystatechange = callback; xmlhttp.send(null); }

JSON.txt 内容：

{"Results": { "total_computers": "2", "computer": [ { "Manufacturer":"Dell", "Model":"Latitude", "Price":"1650" }, { "Manufacturer":"Dell", "Model":"Inspiron", "Price":"1850" } ] } }

转载于:https://www.cnblogs.com/johan/archive/2010/03/05/1948007.html