javascript的同源策略以及jsonp請求百度天氣接口

javascript的同源策略以及jsonp請求百度天氣接口

一段腳本只能讀取來自於同一來源的窗口和文檔的屬性,這裏的同一來源指的是主機名、協議和端口號的組合

協議 http,ftp

主機名 localhost

端口名:http協議的默認端口80:

              https:默認端口是8083

同源策略帶來的麻煩:ajax在不同域名下的請求無法實現,

如果說想要請求其他來源的js文件,或者json數據,那麼可以通過jsonp來解決

第一種方法:


所以列舉以下例子利用回調函數


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
<script>
    function aa(data){
        console.log(data)
    }
</script>
<script src="http://api.map.baidu.com/telematics/v3/weather?location=北京&output=json&ak=H7W5CxI0BPzKtwGcBHmpGPAz50xP1Qjw&callback=aa"></script>
<script src="jquery.js"></script>


</html>


第二種方法:


所以列舉以下例子利用jquery.js下封裝的ajax方法實現對天氣藉口調用與實現


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
<script src="jquery.js"></script>

<script>
        $.ajax({
        url:"http://api.map.baidu.com/telematics/v3/weather?location=北京&output=json&ak=H7W5CxI0BPzKtwGcBHmpGPAz50xP1Qjw",
        dataType:"jsonp",
        jsonpCallback:"admin_cross",
        success:function(data){
        console.log(data)
        }
})
</script>
</html>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章