Ajax例子，包括JQuery
preson.js文件内容
[
{
"name": "xiangwen"
},
{
"name":"mengjie"
}
]
XMLHttpRequest-JSON-Ajax：[支持IE7以上]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>XHR</title>
<style type="text/css">
.de{ width:450px; height:450px; border:4px solid #ccc;}
.ok{ width:450px; font-size:40px; border-bottom:4px solid #ccc; display:block; text-decoration:none;}
</style>
<script type="text/javascript">
function Json(url) {
var ok = document.getElementById("ok");
var json = document.getElementById("json");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
var cons = eval("(" + xhr.responseText + ")");
ok.onclick = function () {
json.innerHTML = "<li>"+cons[0].name+"</li>";
}
}
}
}
xhr.open("get", url, false);
xhr.send(null);
}
window.onload = function () {
Json("preson.js");
}
</script>
</head>
<body>
<div class="de">
<a href="#" class="ok" id="ok" title="Json-XHR">Json-XHR</a>
<div class="json" id="json"></div>
</div>
</body>
</html>
JQuery-Json-Ajax：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
.de{ width:450px; height:450px; border:4px solid #ccc;}
.ok{ width:450px; font-size:40px; border-bottom:4px solid #ccc; display:block; text-decoration:none;}
</style>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
function Jsonurl(url) {
var $ok = $("#ok");
var $json = $("#json");
$ok.click(function () {
$.ajax({
type: "get",
url: url,
beforeSend: function (XMLHttpRequest) {
},
success: function (data, textStatus) {
var preson = eval("(" + data + ")");
for (var i = 0; i < $json.length; i++) {
var li = "<li>" + preson[i].name+"</li>";
$json.append(li);
}
},
error: function () {
alert("出错");
}
});
});
}
$(function () {
Jsonurl("preson.js");
});
</script>
</head>
<body>
<div class="de">
<a href="#" class="ok" id="ok" title="">JSON-DATA</a>
<div id="json" class="json"></div>
</div>
</body>
</html>
业精于勤，荒于嬉。行成于思，毁于随。
摘自 飞舞轻扬在台北
