使用 XMLHttpRequest 实现 Ajax 三：取回 Json 数据
2010-06-27 18:01
1276 查看
首先建立json.txt文件
{
"programmers": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
],
"authors": [
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
],
"musicians": [
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
]
}
通过异步调用，来读取json数据
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function startRequest()
{
createXMLHttpRequest();
try
{
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "Json.txt", true);
xmlHttp.send(null);
}
catch(exception)
{
alert("xmlHttp Fail");
}
}
function handleStateChange()
{
if(xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200 || xmlHttp.status == 0)
{
var result = xmlHttp.responseText;
var json = eval("(" + result + ")");
alert(json.programmers[0].firstName);//读取json数据
//alert(json.sex);
}
}
}
</script>
</head>
<body>
<div>
<input type="button" value="AjaxTest" onclick="startRequest();" />
</div>
</body>
</html>
{
"programmers": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
],
"authors": [
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
],
"musicians": [
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
]
}
通过异步调用，来读取json数据
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function startRequest()
{
createXMLHttpRequest();
try
{
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "Json.txt", true);
xmlHttp.send(null);
}
catch(exception)
{
alert("xmlHttp Fail");
}
}
function handleStateChange()
{
if(xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200 || xmlHttp.status == 0)
{
var result = xmlHttp.responseText;
var json = eval("(" + result + ")");
alert(json.programmers[0].firstName);//读取json数据
//alert(json.sex);
}
}
}
</script>
</head>
<body>
<div>
<input type="button" value="AjaxTest" onclick="startRequest();" />
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用 XMLHttpRequest 实现 Ajax 二：取回 XML 数据
- jQuery的ajax()检验用户名；通过jQuery的load()/get()/post()方法实现；使用XMLHTTPRequest对象来进行AJAX的异步数据交互
- 使用 XMLHttpRequest 实现 Ajax 四：调用 Webservice
- 使用XMLHTTPRequest和JQuery库实现AJax
- 使用XmlHttpRequest实现简单Ajax
- 使用fetch/XMLHttpRequest/JQ Aajax获取数据
- 10002---使用 XMLHttpRequest 实现 Ajax
- 使用xmlHttpRequest实现Ajax技术
- 如何使用XmlHttpRequest对象实现ajax?
- 使用XMLHttpRequest 实现ajax效果
- AJAX-----07XMLHttpRequest对象的处理返回的JSON类型数据
- 使用XMLHttpRequest结合struts2实现Ajax异步调用的例子+json插件
- Ajax核心XMLHttpRequest对象、（发送请求、接收）方法和属性介绍、AJAX开发框架、数据格式提要（XML、JSON、HTML）
- ajax xmlhttprequest使用post传参数并向后台获取数据
- 使用XMLHttpRequest 实现ajax效果
- Ajax核心XMLHttpRequest对象、（发送请求、接收）方法和属性介绍、AJAX开发框架、数据格式提要（XML、JSON、HTML）
- 习惯了使用jQuery的ajax方法，看看原生js使用xmlhttpRequest实现ajax请求
- 使用 XMLHttpRequest 实现 Ajax 一：取回动态页面响应
- Ajax 使用XMLHttpRequest对象发送数据和接收处理XML源代码
- 不使用XMLHttpRequest对象实现Ajax效果