当前位置: 首页>后端>正文

JavaScript--JSONP和Axios

JSONP

概述:JSONP(JSON with padding)是一种跨域解决方案,它主要是利用了script标签不受跨域影响的特性来完成对应的请求操作。实际上是一个get请求。

JSONP 格式包含两个部分:回调和数据。回调是在页面接收到响应之后应该调用的函数,通常回调函数的名称是通过请求来动态指定的。而数据就是作为参数传给回调函数的 JSON 数据。

什么叫跨域

同源策略(属于浏览器的)为了安全性。

浏览器采用了对应的同源策略,它防止了对应的恶意请求以及其他非正常请求(一定程度)

保证用户信息的安全,防止恶意的网站窃取数据

同源策略对应的要求

  • 协议相同
  • 域名相同
  • 端口相同

跨域的产生(由于同源策略影响 导致后台接口不能被访问)

协议不同

端口不同

ip地址不同

ftp请求资源不同也跨域

跨域的解决

后端解决(设置响应头)
response.setHeader('Access-Control-Allow-Origin','*') //设置所有的请求地址都允许跨域
response.setHeader('Access-Control-Allow-Origin-Method','*') //设置所有请求方法都允许跨域
前端解决 (JSONP)
代理服务器
iframe script link 都不受跨域的影响(src href)
webSocket(套接字)

JSONP

JSONP的优点:

它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点:

它只支持GET请求而不支持POST等其它类型的HTTP请求; jsonp使用的场景--查询居多

百度搜索接口

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=miqi&cb=fn

wd表示关键词 cb表示回调函数 通过回调函数将对应的结果传出

JSONP的流程
<script>
    // var wd = '奥特曼'
    function fn(result){
     console.log(result);
    }
</script>
<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=奥特曼&cb=fn"></script>

由上述代码我们可以看到这个fn这个函数 我们根本没有调用 而是通过链接一个script地址来完成对应的数据请求及函数调用。所以在这个里面回调函数是服务端调用的。

JSONP的封装
function jsonp(url,param={},paramName,callback){
    if(typeof url != 'string'){
        throw new Error('url必须为字符串')
    }
    url += '?'
    // 将param转为&拼接
    for(let key in param){
        url += `&${key}=${param[key]}`
    }
    //函数名需要加工(保持的函数名的唯一)
    let callbackName = 'fn' + Date.now() + Math.ceil(Math.random()*10)
    //加给对应的window
    window[callbackName] = callback
    //将参数名和回调函数名传入
    url += `&${paramName}=${callbackName}`
    //创建一个script标签
    let script = document.createElement('script')
    //指定对应的src地址
    script.src = url
    //加给body
    document.body.appendChild(script)
    //script标签加载完毕
    script.onload = function(){
        this.remove() //将script标签删除
        delete window[callbackName] //将对应的属性删除
    }
}
promise封装
function jsonp(url,param={},paramName){
    return new Promise((resolve,reject)=>{
        if(typeof url != 'string'){
            throw new Error('url必须为字符串')
        }
        url += '?'
        // 将param转为&拼接
        for(let key in param){
            url += `&${key}=${param[key]}`
        }
        //函数名需要加工(保持的函数名的唯一)
        let callbackName = 'fn' + Date.now() + Math.ceil(Math.random()*10)
        //加给对应的window
        window[callbackName] = resolve //resolve里面的参数会被then接收 这个resolve会被服务器自动调用并传入参数
        //将参数名和回调函数名传入
        url += `&${paramName}=${callbackName}`
        //创建一个script标签
        let script = document.createElement('script')
        //指定对应的src地址
        script.src = url
        //加给body
        document.body.appendChild(script)
        //script标签加载完毕
        script.onload = function(){
            this.remove() //将script标签删除
            delete window[callbackName] //将对应的属性删除
        }
        //script报错的时候
        script.onerror = function(err){
            reject('错误'+err)
        }
    })
}

http协议

缓存

缓存提高的文件访问速度,减少请求。locaStorage本地缓存 sessionStorage 本地缓存。从locaStorage读取 速度比对应的请求速度要快。提高对应的效率。(优化)

在http请求的过程中 如果你重复的请求 ,我们服务器并不会重复的响应(如果是重复响应服务器压力就很大了),所以你http内部就存在了缓存机制。

强制缓存(http请求里面)

强制缓存不会让你发送请求(直接从缓存读取)状态200

cache-control http2.0 缓存控制器 相对时间

通过cache-control 设置一个最大的有效时间 max-age=300 需要缓存就设置cache-control,不需要缓存就不设置cache-control ,cache-control的设置都是有服务器通过响应头设置过来的

cache-control:max-age=60
//60秒内 再访问这个网站 从本地读

expires http 1.0 过期时间 绝对时间

过程:

1. 浏览器向服务器发送请求
2. 服务器返回资源
3. 浏览器再次请求先判断max-age有没有过期,没有过期直接从缓存里拿资源
协商缓存 (http请求里面)

过程:

1. 浏览器向服务器发送请求
2. 服务器返回资源和资源标识
3. 浏览器再次请求发送请求和资源标识
4. 如果不是最新资源服务器返回200状态码、最新资源和新的资源标识,如果是最新资源服务器返回304状态码直接从缓存中拿资源
- Last-Modified :资源上一次修改的时间 后续访问的时候发送请求和资源标识的字段名为If-Modified-Since放在请求头里面
- ETag: 资源对应的唯一字符串 后续访问的时候发送请求和资源标识的字段名为If-None-Match放在请求头里面 优先使用Etag
- Last-Modified的值只精确到秒级
- 文件如果每隔一段时间都重复生成, 但内容相同, Last-Modified会每次返回资源文件, 即便是内容相同。但是ETag可以判断出文件内容相同就返回304, 使用缓存

协商缓存一定会请求,文件如果改变了 就会通过协商缓存(验证文件是否变化 变了重新响应过来 没变化就先回来再从本地读取)状态码 304(没变)或者200(变了)

etag 标识根据对应hash码生成一个特定的码,文件一变这个码会重新生成(根据它就可以区分是否变化了)

last-modified 最后的修改时间 (时间如果改了 证明对应文件就变了 就可以区分文件是否发生变化)

优先级 强制缓存高于协商缓存

总结

先强制缓存 再 协商缓存

文件没变强制缓存 文件变了协商缓存

强制缓存不会请求 协商缓存会请求

Axios

axios是一个基于promise的http请求库。

特性

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应(拦截器)
  • 转换请求数据和响应数据 (自动进行数据转换)
  • 取消请求(可以请求取消)
  • 自动转换 JSON 数据 (转换的数据形式以json格式体现)
  • 客户端支持防御 XSRF (安全性高)
<!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>
</head>

<body>
    <script src="./axios.min.js"></script>
    <script>
        // 拦截器
        //请求拦截
        axios.interceptors.request.use(config => {
            // Do something before request is sent
            return config;
        }, error => {
            // Do something with request error
            return Promise.reject(error);
        });
        //响应拦截
        axios.interceptors.response.use(response => {
            // Do something before response is sent
            return response;
        }, error => {
            // Do something with response error
            return Promise.reject(error);
        });
        //指定请求的根路径
        axios.defaults.baseURL= 'https://autumnfish.cn'
        //指定请求头
        // axios.defaults.headers
        //指定超时时间
        // axios.defaults.timeout 
        axios.get('/top/playlist', {
                limit: 10
            })
            .then(res => {
                console.log(res)
            })
            .catch(err => {
                console.error(err);
            })
        // axios.post(url,params)
        // .then(res => {
        //     console.log(res)
        // })
        // .catch(err => {
        //     console.error(err); 
        // })
        // delete
        // put
        // patch
        // all 所有请求都适配
    </script>
</body>

</html>

https://www.xamrdz.com/backend/3u91929070.html

相关文章: