jsonp的使用以及封装

最新推荐文章于 2023-02-06 16:30:51 发布

灰灰在成长

最新推荐文章于 2023-02-06 16:30:51 发布

阅读量137

点赞数 1

分类专栏：前端 jsonp 跨域文章标签： jsonp javascript

本文链接：https://blog.csdn.net/weixin_44477373/article/details/108675309

版权

前端同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

jsonp

1 篇文章 0 订阅

订阅专栏

跨域

1 篇文章 0 订阅

订阅专栏

ajax问题

浏览器同源策略
- 同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源
- 源：协议、域名和端口号
跨域
不受同源策略影响的资源的引入,如script、img、iframe

jsonp

JSONP解决跨域问题；可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

jsonp原理
- 利用script标签不受游览器同源策略的标签，在src中添加请求的接口。
通过script来实现跨域；

 <script src="http://localhost:4000/getAjax?name=张三"></script>

服务端实现

 router.get("/getAjax",(ctx,next)=>{
     console.log("4000 run ");
     let cb = ctx.query.callback;
     let obj = {
         a:20,
         b:20
     }
     ctx.body = `${cb}(${JSON.stringify(obj)})`;
 }

jsonp封装

function ajax(options) {
        let opts = Object.assign({
            method: 'get',
            url: '',
            headers: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            jsonp:"cb",
            data: '',
            success: function () { }
        }, options)
        //处理jsonp请求；
        if(opts.dataType==="jsonp"){
            jsonpFn(opts.url,opts.data,opts.jsonp,opts.success);
            return false;
        }
        function jsonpFn(url,data,cbName,cbFn){
            // cbName   cb/callback
            let fnName = "KKB_"+Math.random().toString().substr(2);
            window[fnName] = cbFn;
            let path = url+"?"+o2u(data)+"&"+cbName+"="+fnName;
            // console.log(path);
            let o = document.createElement("script");
            o.src = path;
            document.querySelector("head").appendChild(o);
        }



        let xhr = new XMLHttpRequest();
        if (options.method == "get") {
            let data = o2u(opts.data)
            options.url = options.url + "?" + data;
        }
        xhr.open(options.method, options.url, true);
        for (let key in opts.headers) {
            xhr.setRequestHeader(key, opts.headers[key]);
        }
        let sendData;
        switch (opts.headers['content-type']) {
            case 'application/x-www-form-urlencoded':
                sendData = o2u(opts.data);
                break;
            case 'application/json':
                sendData = JSON.stringify(opts.data);
                break;
        }
        xhr.onload = function () {
            let resData;
            if (xhr.getResponseHeader("content-type").includes("xml")) {
                resData = xhr.responseXML;
            } else {
                resData = JSON.parse(xhr.responseText);
            }
            options.success(resData);
        }
        if (options.method == "get") {
            xhr.send();
        } else {
            xhr.send(sendData);
        }
    }

    function o2u(obj) {
        let keys = Object.keys(obj);
        let values = Object.values(obj);
        return keys.map((v, k) => {
            return `${v}=${values[k]}`;
        }).join("&");
    }