ajax五，jsonp跨域的本质

最新推荐文章于 2025-09-09 18:53:59 发布

weixin_33851429

最新推荐文章于 2025-09-09 18:53:59 发布

阅读量47

点赞数

CC 4.0 BY-SA版权

文章标签： php

原文链接：http://www.cnblogs.com/xufeng1994/p/10448507.html

本文详细解析了JSONP跨域请求的原理，通过动态创建script标签实现跨域数据获取，并附带了一个天气查询的实例代码，展示了如何利用JSONP进行跨域数据请求。

jsonp跨域的本质实际就是动态的创建了script标签，script的src属性就是其他服务器地址，get情况下是在url后传参，记得还有个回调函数

    <h1>天气信息</h1>
    <input type="text" id="text" placeholder="请输入城市名字">
    <input type="button" value="查询" id="btn">

    <script>
        var textVal = document.querySelector('#text').value
        var btn = document.querySelector('#btn')
        btn.onclick = function(){
            var script = document.createElement('script')
            script.src = './data/php?city=' + textVal + '&cb=callback'

            window['callback'] = function(data){
                console.log(data)
            }
            var head = document.querySelector('head')
            head.appendChild(script)
        }
    </script>

<?php

$cb = $GET["callback"];
$cityName = $GET["city"];
if($cityName == "suqian"){
    echo $cb."('宿迁的天气真不错')";
}else{
    echo $cb."('没有查到当地信息')";
}

?>