Day28 - AJAX(02) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 28

自我挑戰組

JavaScript 新手筆記系列第 28 篇

Day28 - AJAX(02)

11th鐵人賽 javascript

hokou

2019-10-13 22:35:27

1678 瀏覽

分享至

前言

今日針對 AJAX 的非同步進行說明

非同步與同步

xhr.open('格式','網址',BooLean)：在第 3 個參數區分非同步與同步
- true 代表非同步，不會等資料回傳就繼續下一個動作，因此下一步不會取得資料，一般預設值
- false 代表同步，會等資料回傳才進行下一步，因此下一步可取得資料，但資料大時會需要等待而卡住
那如何得知已經完成？可以使用 xhr.onload

// 先將資料讀取
var xhr = new XMLHttpRequest();
xhr.open('get','https://hexschool.github.io/ajaxHomework/data.json',true);
xhr.send(null);

xhr.onload = function(){
    console.log(xhr.responseText);
    // 確定抓到 onload 才執行函數功能
}

進一步將資料做 JSON 的轉換
搭配 xhr.status 增加確認狀態碼的判斷
- 200 ：確定 OK
- 404 ：錯誤找不到
- 參考：網頁開發人員應了解的 HTTP 狀態碼

index.html

<body>
    <div class="message"></div>
    <script src="JS/test.js"></script>
</body>

test.js

xhr.onload = function(){
    // console.log(xhr.responseText);
    if (xhr.status == 200){
        var str = JSON.parse(xhr.responseText);
        // 將資料轉成 JSON 格式的 array
        document.querySelector('.message').textContent = str[0].name;
        // 將 array[0]內的 name 印出來
    } else {
        console.log('資料錯誤');
    }
};
    // 假如正確取得顯示 王小名
    // 否則錯誤顯示 錯誤訊息
}

CORS

CORS = Cross-Origin Resource Sharing (跨來源資源共用)：是一種使用額外 HTTP 標頭令目前瀏覽網站的使用者代理取得存取其他來源（網域）伺服器特定資源權限的機制
- 因為基於安全性考量的原因，發出的跨來源 HTTP 請求會受到限制
該怎麼解決？一般會請對方開啟允許存取的設定
- 如伺服器回傳 Access-Control-Allow-Origin: * ， * 表示允許任何網域跨站存取資源
如何確認可以存取？
- 測試 CORS 的網站：http://www.test-cors.org/
其他參考資料：