首页 > 其他分享 >day23 JSONP讲解

day23 JSONP讲解

时间:2022-11-01 22:00:45浏览次数:65  
标签:script url res JSONP param day23 key 讲解 document

同源策略(浏览器的一种机制)

概述:

浏览器为了安全,他产生一种同源策略,这个策略是为了防止一些恶意的请求,保护对应的隐私。

同源策略主要是对应三个内容 分别为
  • 同协议 (http/https)
  • 同ip地址 (127.0.0.1本机)
  • 同端口号 (80 HTTP的 443 HTTPS的)

如果不同源就会产生一个问题就是跨域问题

import {ajax} from './ajax_promise.js'
//请求一个地址 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=miqi&cb=fn
ajax('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=miqi&cb=fn',{}).then(res=>{
    console.log(res);
})

image-20221101171501142

跨域问题的产生(以下任意一点不同就会跨域)

  • 协议不一样
  • 端口不一样
  • ip地址不一样
  • 以文件访问(不同的文件资源也会跨域)

跨域问题的解决

1.前端解决 (JSONP)(需要后端给的是JSONP的接口)

2.后端解决 (在对应的响应头进行设置)

respones.setHeader('Access-Control-Allow-Origin','*')//所有的地址都可以访问我
respones.setHeader('Access-Control-Allow-Origin-Method','*')//所有的请求都可以访问我

3.使用服务器代理(proxy)

4.使用websocket(走的不是http协议)

JSONP

概述:

他是通过script标签不受跨域的影响的特性来解决跨域问题的。(核心就是对应的请求不是我去请求而是服务器自己请求自己将数据通过回调函数传给我),他的核心还是一个get请求

简单的JSONP

<!-- wd表示关键词 cb表示回调函数 -->
<script>
    //他会自动执行你传入的回调函数并且将结果传递给这个函数
    //res里面就会执行完的数据
    function callback(res){
        console.log(res);
    }
</script>
<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=miqi&cb=callback"></script>

jsonp封装

//请求地址 参数 回调函数 回调函数
export const jsonp=(url,param,callbackName,callback)=>{
    //提取param参数加入到url中
    for(let key in param){
        if(url.includes('?')){
            url += `&${key}=${param[key]}`
        }else{
            url += `?${key}=${param[key]}`
        }
    }
    //将回调函数加给window
    //随机生成一个名字
    let fnName = 'fn'+Date.now()+Math.ceil(Math.random()*30)
    window[fnName] = callback
    //将回调的函数及相关名字拼接到url
    url += `&${callbackName}=${fnName}`
    console.log(url);
    //创建一个script标签
    let script = document.createElement('script')
    //给这个script标签设置src地址
    script.src = url
    document.body.appendChild(script)
    //(必须等待script标签加入到页面才会触发)
    script.onload = ()=>{
        // 将script标签加入到对应的页面
        // 将window的函数删了
        delete window[fnName]
        //再将script标签删除
        script.remove()
    }
}
案例:百度搜索
<input type="text" />
<ul>
</ul>
<script type="module">
    // 导入jsonp
    import {jsonp} from './JSONP.js'
    //https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=miqi&cb=fn
    document.querySelector('input').oninput = function(){
        jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
            wd:this.value
        },"cb",(res)=>{
            document.querySelector('ul').innerHTML = ""
            res.s.forEach(v=>{
                document.querySelector('ul').innerHTML +=  `
                    <li>${v}</li>
`
            })
        })
    }
</script>

JSONP的promise封装

//请求地址 参数 回调函数 回调函数
export const jsonp=(url,param,callbackName)=>{
    return new Promise((resolve,reject)=>{
        //提取param参数加入到url中
        for(let key in param){
            if(url.includes('?')){
                url += `&${key}=${param[key]}`
            }else{
                url += `?${key}=${param[key]}`
            }
        }
        //将回调函数加给window
        //随机生成一个名字
        let fnName = 'fn'+Date.now()+Math.ceil(Math.random()*30)
        window[fnName] = resolve
        //将回调的函数及相关名字拼接到url
        url += `&${callbackName}=${fnName}`
        console.log(url);
        //创建一个script标签
        let script = document.createElement('script')
        //给这个script标签设置src地址
        script.src = url
        document.body.appendChild(script)
        //(必须等待script标签加入到页面才会触发)
        script.onload = ()=>{
            // 将script标签加入到对应的页面
            // 将window的函数删了
            delete window[fnName]
            //再将script标签删除
            script.remove()
        }
        script.onerror =()=>{
            reject()
        }
    })
}
测试
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
    <input type="text" />
    <ul>
    </ul>
    <script type="module">
        // 导入jsonp
        import {jsonp} from './JSONP_promise.js'
        //https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=miqi&cb=fn
        document.querySelector('input').oninput = function(){
            jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                wd:this.value
            },"cb").then((res)=>{
                document.querySelector('ul').innerHTML = ""
                res.s.forEach(v=>{
                    document.querySelector('ul').innerHTML +=  `
                        <li>${v}</li>
                    `
                })
            })
        }
    </script>
</body>
</html>

标签:script,url,res,JSONP,param,day23,key,讲解,document
From: https://www.cnblogs.com/jje105/p/16849316.html

相关文章

  • day23 同源策略及JSONP
     同源策略(浏览器的一种机制)概述:浏览器为了安全,产生的一种同源策略,这个策略是为了防止一些恶意的请求,保护用户的隐私.同源策略主要有三个内容,分......
  • day23 JDBC(Java Database Connection)连接 与 通配符与插入返回主键
    JDBC配置connector的jar包1.项目下新建lib文件夹2.将mysql-connector-java-版本号.jar复制到lib目录下3.右键项目名,选择Properties选项4.点击AddJARS...,选中刚复制的j......
  • day23JSONP
    同源策略(浏览器的一种机制)概述:为了确保浏览器的安全而产生的一种同源策略,为了防止一些恶意的请求和保护对应的隐私同源策略对应的三个问题 同协议(http/https)同ip地址......
  • java_day23~24
    Java基础GUI编程核心技术:Swing、AWT现在GUI并不流行因为其界面不美观、需要依赖jre环境SwingpublicclassDemo1{//init();初始化publicvoidinit(){......
  • day23 约束 & 锁 & 范式
    表与表的对应关系一对一:学生与手机号,一个学生对一个手机号一对多:班级与学生,一个班级对应多个学生多对一:多对多:学生与科目,一个学生对应多个科目,一个科目也对应多个学生......
  • Asp.Net MVC 中的 Cookie讲解
    一、CookieCookie是请求服务器或访问Web页面时携带的一个小的文本信息。Cookie为Web应用程序中提供了一种存储特定用户信息的方法。Cookie的值是字符串类型,且对用户是......
  • 注解@JSONField和@JsonProperty的简单使用
    本注解的使用,需要引入fastjson依赖<!--添加fastjson依赖--><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</art......
  • ThreadPoolExecutor BlockingQueue讲解
    有四种常用阻塞队列策略:1.直接拒绝:(DirectHandoffs)一个好的工作队列应该是不缓存任务,而是直接交给线程处理,就如SynchronousQueue一样。一个任务将会入队失败,如果没有......
  • GDB全过程详细讲解
    摘自:https://blog.csdn.net/guo_lei_lamant/article/details/83787730 4.堆栈查看调用堆栈(callstack)无疑是调试过程中非常重要的事情。(gdb)where#查看调用堆栈......
  • jsonp
    https://www.xp.cn/b.php/68921.htmljs跨域请求数据的3种常用的方法由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的......