AJAX 就是異步 JavaScript 和 XML，它是一組用于客戶端的相互關聯的 Web 開發技術，以創建異步 Web 應用程序。遵循 AJAX 模型，Web 應用程序可以以異步的方式發送數據以及從服務器上檢索數據，而不影響現有頁面的顯示行為。
許多開發人員都在客戶端和服務器之間使用 JSON 傳遞 AJAX 更新。實時更新體育成績的站點就可以視為一個 AJAX 例子。如果這些成績要更新到站點上，那么必須要把它們存儲到服務器上便于需要時網頁能取回這些成績。這里我們可以使用 JSON 格式的數據。
任何使用 AJAX 更新的數據都可以使用 JSON 格式存儲在 Web 服務器上。使用 AJAX，那么 JavaScript 就可以在必要時取回這些 JSON 文件，解析它們，然后做以下兩件事情：
下面的代碼展示了 JSON 和 AJAX，請把它們保存為 ajax.htm 文件。這里的加載函數 loadJSON() 將會使用異步的方式上傳 JSON 數據。
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<script type="application/javascript">
function loadJSON()
{
var data_file = "http://www.tutorialspoint.com/json/data.json";
var http_request = new XMLHttpRequest();
try{
// Opera 8.0+, Firefox, Chrome, Safari
http_request = new XMLHttpRequest();
}catch (e){
// IE 瀏覽器處理
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// 錯誤處理
alert("Your browser broke!");
return false;
}
}
}
http_request.onreadystatechange = function(){
if (http_request.readyState == 4 )
{
// 使用 JSON.parse 解析 JSON 數據
var jsonObj = JSON.parse(http_request.responseText);
// jsonObj 變量現在包含數組結構，可以通過 jsonObj.name 和 jsonObj.country 的方式訪問
document.getElementById("Name").innerHTML = jsonObj.name;
document.getElementById("Country").innerHTML = jsonObj.country;
}
}
http_request.open("GET", data_file, true);
http_request.send();
}
</script>
<title>tutorialspoint.com JSON</title>
</head>
<body>
<h1>Cricketer Details</h1>
<table class="src">
<tr><th>Name</th><th>Country</th></tr>
<tr><td><div id="Name">Sachin</div></td>
<td><div id="Country">India</div></td></tr>
</table>
<div class="central">
<button type="button" onclick="loadJSON()">Update Details </button>
</body>
</html>下面就是包含 JSON 格式數據的輸入文件 data.json，當我們點擊 Update Detail 按鈕時會以異步的方式上傳它。這個文件已經保存到 http://www.tutorialspoint.com/json/ 上了。
{"name": "brett", "country": "Australia"}上面的 HTML 代碼會生成如下所示屏幕顯示，這里你可以進行 AJAX 實戰：
當我們點擊 Update Detail 按鈕時，應該會得到如下所示的結果，你也可以自己嘗試 JSON 和 AJAX，提供你自己的瀏覽器支持的 JavaScript。
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
