Jsonp的使用

1.jsonp的理解

浏览器发送ajax请求时会因为跨域而无法正常获取数据，而script标签请求数据时发送的是http请求，没有跨域问题。利用这个机制绕过跨域的限制来获取后端数据的技术就叫jspnp

实现原理：
在客户端定义一个函数，这个函数通常把传入的参数（数据）渲染到页面中。
在要请求数据时，新建一个script标签，设置src属性。src属性值中包含了客户端定义的函数名，以及要传递给服务器的数据
服务器接收到script标签发送的请求，返回一个js文件。这个文件的内容就是客户端定义的函数的调用，并传入了实参，这样就变相的请求到了数据

2.原生js实现jsonp

html页面的代码

<body>
    <h1>新闻标题</h1>
    <p>内容</p>
    <input type="button" value="更新信息" id="btn">
</body>
<script>
    function updatePage(obj){
        var h1 = document.querySelector("h1")
        var p = document.querySelector("p")
        h1.innerHTML = obj.title
        p.innerHTML = obj.content
    }
    //监听按钮点击
    document.querySelector("#btn").onclick = function(){
        //创建script标签
        var script = document.createElement("script")
        //设置src属性
        script.src = "/jsonp/index.js"
        // 插入标签
        document.head.appendChild(script)
        // 移除此标签
        document.head.removeChild(script)
    }
</script>

服务器返回的js文件代码

updatePage({
    title:"火影忍者完结了",content:"宇智波鼬的须佐能乎是最早登场的，虽然不是完全体状态，但鼬的须佐手持三大神器，可谓攻守兼备，让敌人找不到任何破绽。"
})

这里服务器端的代码写死了，实际项目中，会根据前端传递的数据动态生成js代码返回，但是本质上都是客户端函数的调用
例如：src的格式应该是这样的

localhost:8080/jsonp?cb=updatePage&id=1

这样服务器就知道返回的js文件中要调用的函数是updatePage，而参数则根据id值去数据库中获取数据并传入到updatePage中

3.jquery实现

使用$.ajax()，传入配置项

<script>
    function updatePage(obj){
        var h1 = document.querySelector("h1")
        var p = document.querySelector("p")
        h1.innerHTML = obj.title
        p.innerHTML = obj.content
    }
    //监听按钮点击
    $("#btn").on("click",function(){
        console.log("click")
        $.ajax({
            url:"./jsonp/index.js",type:"get",dataType: "jsonp",data:{
                id:1
            },jsonp:"cb",// 要调用的客户端函数的key
            jsonpCallback:"updatePage",//客户端函数名称
            success:function(data){
                console.log(data)
            }
        })
    })
</script>

运行代码会访问这个url

http://localhost:8080/jsonp/index.js?cb=updatePage&id=1

Jsonp的使用

1.jsonp的理解

2.原生js实现jsonp

3.jquery实现

相关文章