javascript的同源策略以及jsonp请求百度天气接口

最新推荐文章于 2024-07-04 16:48:50 发布

Web攻城狮

最新推荐文章于 2024-07-04 16:48:50 发布

阅读量1.3k

点赞数 1

分类专栏： jQuery 文章标签： javascript的同源策略请求百度天气接口 jsonp ajax

本文链接：https://blog.csdn.net/b1244154318/article/details/52547952

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

Web攻城狮

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript的同源策略以及jsonp请求百度天气接口

javascript的同源策略以及jsonp请求百度天气接口一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合协议 : http,ftp主机名 : localhost端口名：http协议的默认端口80: https:默认端口是8083同源策略带来的麻烦：ajax在不同域名下的请求无法实现，如果说想要
复制链接

扫一扫

专栏目录