下面的例子展示了你如何动态加载和解析一个外部的JSON对象，使用了AJAX和HTML5的JSON.parse()方法。
<!DOCTYPE HTML>
<html>
<head>
<title>Simple AJAX .JSON load example</title>
</head>
<body>
<form>
<input id="btn"
type="button"
value="ajax load"
onclick="btn_onClickHandler();" />
</form>
<div id="debug"></div>
<script type="text/javascript">
function btn_onClickHandler() {
ajaxLoad("data.js", ajaxOnResult);
}
function ajaxLoad(uri, callback) {
var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
request.onreadystatechange = callback;
request.open("GET", uri);
request.send(null);
}
function ajaxOnResult(evt) {
if ((evt.currentTarget.readyState == 4) && (evt.currentTarget.status == 200 || evt.currentTarget.status == 0)) {
var f = document.getElementById("debug");
f.innerHTML = "<h1>HTTP status: "+ evt.currentTarget.status +"</h1>" +
"<p>This text should be replaced after JSON.parse() call.</p>";
var json_data = JSON.parse(evt.currentTarget.responseText);
f.innerHTML = '<a href="' + json_data.site + '" target="top">' + json_data.name + '</a> -- ' + json_data.properties.description;
}
}
</script>
</body>
</html>
源码下载：
使用Ajax动态加载JSON文件.zip
分享到：
相关推荐
"在Lotus中用AJAX方式显示视图"这一主题，主要是探讨如何在Lotus Notes/Domino应用中集成AJAX技术来优化视图数据的展现。 Lotus Notes/Domino是一种广泛使用的协作平台，其核心组件之一是Notes服务器，它支持数据库...
而在这个特定的场景中，"MVC4中用Ajax带省略号分页"指的是在实现Ajax分页的同时，还在页码显示区域加入了省略号来指示更多未显示的中间页码，这种设计可以有效地节省界面空间，同时让用户对总页数有一个大致的概念。...
5. **查询/获取**：通过AJAX的GET请求从服务器获取数据，可以使用`$.get()`或`$.getJSON()`简化代码。数据返回后，用它们填充或更新页面。 ```javascript $.get('fetch_data_url', function(data) { $('#your_...
Ajax（Asynchronous JavaScript and XML）技术则提供了异步更新页面的能力，使得用户在不刷新整个页面的情况下，能够动态加载分页内容。本资源很好地结合了这两者，提供了简单易懂的代码示例，适用于实际项目。 **...
Ajax，全称Asynchronous JavaScript and XML，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新，提升了用户体验。在这个“Ajax开发的...
这个技术在现代Web开发中广泛应用于提高用户体验，因为它允许用户即时获取反馈，而无需等待页面完全重新加载。 首先，ASP.NET是微软推出的一种用于构建Web应用程序的开源框架，它提供了丰富的功能和工具，包括视图...
- **Ajax**：Asynchronous JavaScript and XML，异步JavaScript和XML，是一种创建动态网页的技术，允许在不重新加载整个页面的情况下更新部分网页内容。 - **Visual Studio**：微软的集成开发环境，可能用于编写和...
### jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析 #### 知识点概述 本篇文档详细介绍了使用jQuery的Ajax与getJSON方法获取后台返回的普通JSON数据及层级JSON数据的技术细节和实践用法。文中...
**AJAX三级联动**是一种常见的前端交互技术，主要用于实现页面数据的动态加载和更新，而无需刷新整个页面。在这个经典例子中，我们看到它被应用于一个省、市、地区的选择菜单，通过AJAX实现三个下拉框的联动效果。...
这篇博客文章“利用ajax.dll进行Ajax的开发”可能详细介绍了如何使用一个特定的DLL（动态链接库）文件——ajax.dll来实现Ajax功能。 首先，我们需要理解DLL文件的角色。DLL是Windows操作系统中的一个重要组成部分，...
**Ajax（Asynchronous JavaScript and XML）**是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。这种技术可以提升用户体验，使得页面...
《Head First Ajax》中文版是一本专门介绍Ajax技术的图书， Ajax（Asynchronous JavaScript + XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。本书适合作为计算机编程领域的学习资料，尤其...
4. **Ajax通信**：Dojo的`dojo/xhr`模块提供了发送Ajax请求的方法，如`dojo/xhrGet`、`dojo/xhrPost`等，支持JSON、XML等多种数据格式。 5. **动画效果**：`dojo/fx`模块提供了丰富的动画效果，包括基本的淡入淡出...
在IT领域，Java和AJAX树是两种技术，它们在构建动态、交互式的Web应用程序时起着关键作用。本文将深入探讨这两者及其在实际应用中的结合。 首先，Java是一种广泛使用的面向对象的编程语言，它以其跨平台的特性而...
它们是ExtJS中用于加载和处理JSON数据以构建树的组件。 `JsonTreeLoader.js`是ExtJS内置的树加载器，它负责从服务器获取JSON数据并解析成树结构。这个加载器会发送Ajax请求到指定的URL，接收响应的JSON数据，然后将...
- GridPanel等EXT组件可以展示来自服务器的数据，通过Ajax请求动态加载或更新内容。 5. **EXT控件和调试工具**： - EXT提供了大量的控件，如按钮、表单、面板、菜单等，开发者可以根据需求构建复杂的用户界面。 ...
Ajax（Asynchronous JavaScript and XML）技术是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在.NET框架中，C#语言与Ajax结合，为开发人员提供了强大的异步交互能力，提升了用户体验。本文将深入...
首先，Uploadify是一个流行的JavaScript插件，它允许用户通过Ajax方式上传多个文件，同时提供丰富的自定义选项和事件处理。在MVC4项目中，我们通常会将其与JQuery一起使用，增强用户体验。JQuery Dialog是JQuery UI...
10. **JSON格式**：为了提高数据交换的效率和兼容性，常将JS对象转换成JSON格式（`JSON.stringify()`）再发送，服务器端使用`json_decode()`解析。 通过以上知识点，开发者可以实现JS变量通过AJAX无刷新地传递给PHP...
JSON文件加载后，会自动被解析成JavaScript对象，然后就可以进行后续操作了。 在示例中，demo.js文件中存有格式化的JSON数据，内容如下： ```json [ { "name":"吴者然", "sex":"男", "email":"***" }, { ...