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> |
好了上面的ajax處理的程式只測試過ie7或以上的瀏覽器，同樣我想在ff,google瀏覽器應該都是可以正常使用的，至於ie6沒有測試，如果有問題大家可評論留言。
