免費(fèi)AI編程助手
AJAX JSON 實(shí)例
2021-10-13 18:23 更新
AJAX JSON 實(shí)例
我們可以通過AJAX代碼獲取JSON數(shù)據(jù)。AJAX提供了異步獲取響應(yīng)的工具。它不會重新加載頁面并節(jié)省帶寬。
讓我們看一個使用AJAX代碼獲取JSON數(shù)據(jù)的簡單示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<script type="application/javascript">
function loadJSON()
{
var data_file = "https://atts.w3cschool.cn/articles/user.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 數(shù)據(jù)
var jsonObj = JSON.parse(http_request.responseText);
// jsonObj 變量現(xiàn)在包含數(shù)組結(jié)構(gòu)，可以通過 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>
</div>
</body>
</html>由于CROS的存在，跨域請求處理會被瀏覽器屏蔽掉，所以ajax請求只能在相同域名下進(jìn)行請求（比如本站的網(wǎng)頁請求本站的Ajax），以上代碼在在線運(yùn)行情況下是可以運(yùn)行的，但在本地情況下不能運(yùn)行，望知悉。
以上內(nèi)容是否對您有幫助：
← AJAX面試問題
更多建議：