美文网首页
jsonp解决ajax跨域

jsonp解决ajax跨域

作者: kino2046 | 来源:发表于2020-02-16 18:28 被阅读0次

ajax问题

浏览器同源策略

        同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源

        源  :协议、域名和端口号

跨域

        不受同源策略影响的资源的引入

                <script src="..."></script>,<img>,<link>,<iframe>


JSONP        (JSON with Padding)

解决跨域问题;可以让网页从别的域名(网站)那获取资料,即跨域读取数据。

jsonp原理

        通过    script标签    来实现跨域

        服务端实现

        请求百度接口

                 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=hello&cb=succFn


ajax封装加入jsonp

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <button>点击请求jsonp</button>

</body>

<script>

    let btn = document.querySelector("button");

    btn.onclick = function(){

        ajax({

            url:"http://localhost:4000/getAjax",

            data:{

                name:"张三",

                age:20

            },

            dataType:"jsonp",

            jsonp:"callback",

            success:function(res){

                console.log(res)

            }

        })

    }

    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("&");

    }

</script>

</html>

相关文章

  • 解决ajax跨域问题

    Jsonp解决ajax跨域问题 CORS解决ajax跨域问题

  • ajax跨域请求

    ajax跨域请求(jsonp) 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQue...

  • 实用程序库

    解决ajax跨域方法: jsonp 服务器代理 跨域资源共享 一、moment momentjs官网[https:...

  • 跨域上传图片并预览

    跨域上传文件 之前解决跨域问题都是使用的JQuery的JSONP类型的Ajax请求,JSONP原理是让服务器把数据...

  • 交互那些事(二)

    说完ajax我想必须说说jsonp了,谈到jsonp就必须先说说跨域,首先ajax是不能跨域的,除非后台允许跨域或...

  • 珠峰 AJAX --- JSONP跨域

    珠峰 AJAX --- JSONP跨域AJAX(异步 javascript and XMLHTTPReq...

  • 使用JSONP解决ajax跨域

    在日常开发中,不免遇到跨域的问题。在这里我们介绍使用Jsonp来解决ajax跨域的问题 什么是跨域? 跨域,指的是...

  • Ajax请求跨域问题

    遇到ajax请求跨域问题,解决方式,改dataType为jsonp json和jsonp返回数据格式json格式 ...

  • vue项目解决axios jsonp请求

    众所周知,jsonp一般是解决前端跨域的渠道之一,先从浅入深讲解过渡的历史。 ajax模式请求下的jsonp跨域 ...

  • Flask-cors跨域

    什么是跨域 为什么要考虑跨域问题 同源策略 解决跨域问题 方式一: 使用 JSONP (一种非Ajax技术,需要前...

网友评论

      本文标题:jsonp解决ajax跨域

      本文链接:https://www.haomeiwen.com/subject/dxfmfhtx.html