AJAX教程
- AJAX教程
- AJAX簡介
- AJAX技術
- AJAX工作原理
- AJAX實例
- AJAX同步與異步請求的區別
- AJAX創建XMLHttpRequest對象
- AJAX向服務器發送請求
- AJAX服務器響應
- AJAX onreadystatechange事件
- AJAX ASP/PHP請求實例
- AJAX數據庫實例
- AJAX XML實例
- AJAX安全性
- AJAX當前問題
- AJAX Java示例
- AJAX Java數據庫示例
- Java AJAX電子郵件檢驗示例
- AJAX+Java評論表單示例
- Java+AJAX搜索示例
- AJAX瀏覽器支持
- AJAX操作流程
- AJAX+PHP數據庫操作
- AJAX提交form表單方法
- AJAX請求方式
- AJAX面試題
- AJAX JSON實例
- 使用AJAX存在的問題
AJAX JSON實例
我們可以通過AJAX代碼獲取JSON數據。AJAX提供了異步獲取響應的工具。它不會重新加載頁面并節省帶寬。
讓我們看一個使用AJAX代碼獲取JSON數據的簡單示例。
<html>
<head>
<meta content="text/html; charset=utf-8">
<title>AJAX JSON by Javatpoint</title>
<script type="application/javascript">
function load()
{
var url = "http://date.jsontest.com/";//use any url that have json data
var request;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();//for Chrome, mozilla etc
}
else if(window.ActiveXObject){
request=new ActiveXObject("Microsoft.XMLHTTP");//for IE only
}
request.onreadystatechange = function(){
if (request.readyState == 4 )
{
var jsonObj = JSON.parse(request.responseText);//JSON.parse() returns JSON object
document.getElementById("date").innerHTML = jsonObj.date;
document.getElementById("time").innerHTML = jsonObj.time;
}
}
request.open("GET", url, true);
request.send();
}
</script>
</head>
<body>
Date: <span id="date"></span><br/>
Time: <span id="time"></span><br/>
<button type="button" onclick="load()">Load Information</button>
</body>
</html>
