閱讀(42.6k) 書簽贊(5) 我要糾錯

JSON 與 Ajax

2023-04-17 13:57 更新

AJAX 就是異步 JavaScript 和 XML，它是一組用于客戶端的相互關(guān)聯(lián)的 Web 開發(fā)技術(shù)，以創(chuàng)建異步 Web 應(yīng)用程序。遵循 AJAX 模型，Web 應(yīng)用程序可以以異步的方式發(fā)送數(shù)據(jù)以及從服務(wù)器上檢索數(shù)據(jù)，而不影響現(xiàn)有頁面的顯示行為。

許多開發(fā)人員都在客戶端和服務(wù)器之間使用 JSON 傳遞 AJAX 更新。實時更新體育成績的站點就可以視為一個 AJAX 例子。如果這些成績要更新到站點上，那么必須要把它們存儲到服務(wù)器上便于需要時網(wǎng)頁能取回這些成績。這里我們可以使用 JSON 格式的數(shù)據(jù)。

任何使用 AJAX 更新的數(shù)據(jù)都可以使用 JSON 格式存儲在 Web 服務(wù)器上。使用 AJAX，那么 JavaScript 就可以在必要時取回這些 JSON 文件，解析它們，然后做以下兩件事情：

把它們顯示到網(wǎng)頁上之前將解析的值存儲到變量中便于進一步處理。
直接分配數(shù)據(jù)給網(wǎng)頁中的 DOM 元素，那么它就會顯示在站點上。

示例

下面的代碼展示了 JSON 和 AJAX，請把它們保存為 ajax.html 文件。這里的加載函數(shù) loadJSON() 將會使用異步的方式上傳 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>

下面就是包含 JSON 格式數(shù)據(jù)的輸入文件 user.json，當(dāng)我們點擊 Update Detail 按鈕時會以異步的方式請求這個json。這個文件已經(jīng)保存到https://atts.w3cschool.cn/articles/user.json上了。

{"name": "brett", "country": "Australia"}

上面的 HTML 代碼會生成如下所示屏幕顯示，這里你可以進行 AJAX 實戰(zhàn)：

JSON 與 AJAX

當(dāng)我們點擊 Update Detail 按鈕時，應(yīng)該會得到如下所示的結(jié)果，你也可以自己嘗試 JSON 和 AJAX，提供你自己的瀏覽器支持的 JavaScript。

JSON 與 AJAX

由于CROS的存在，跨域請求處理會被瀏覽器屏蔽掉，所以ajax請求只能在相同域名下進行請求（比如本站的網(wǎng)頁請求本站的Ajax），以上代碼在在線運行情況下是可以運行的，但在本地情況下不能運行，望知悉。

JSON 與 Ajax

示例

相關(guān)教程

推薦文章

推薦教程

推薦課程