在前端開發中,經常會遇到需要獲取其他域下的數據的情況,這種跨域請求的方式主要有以下兩種:
一、JSONP跨域請求
<script> function handleResponse(response) { console.log(response); } var script = document.createElement('script'); script.src = 'http://otherDomain.com/data.json?callback=handleResponse'; document.body.appendChild(script); </script>
在這種情況下,在請求的URL中添加callback參數,則服務器會將返回結果包裹在一個函數中返回,從而在前端代碼中調用該函數獲得數據。需要注意的是,JSONP只支持GET方式請求。
二、CORS跨域請求
<script> var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://otherDomain.com/data.json', true); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; xhr.send(); </script>
通過XMLHttpRequest對象發送跨域請求,需要服務器設置響應頭Access-Control-Allow-Origin,值為允許跨域請求的域名或"*"。
以上就是跨域請求JSON數據的兩種方式,可以根據實際需求選擇適合的方式。