常见的数据交互

发表于 | 分类于 ， |

这几天在项目中用到的一些数据传输问题

  • ajax cors跨域
    cors跨域很简单，也是官方推荐的方法
    1
    response.setHeader(“Access-Control-Allow-Origin”, “*”);

CORS方案实现非常简单，只要服务在头部标明允许跨域访问即可。但是这个方案由于推出时间较晚，所以IE9及以下浏览器并没有支持这个机制。
IE9及以下浏览器在安全设置里控制是否允许跨域数据访问：

  • JOSNP
    josnp 属于民间开发者自己搞的方法，其原理是 动态创建srcipt标签
    支持目前所有浏览器，只是在实现方式上需要前后端代码有一点约定配合。
    但是，要注意由于JSONP是以script标签的src属性加载的，因此参数会收到URL长度的限制，只能适用于传入参数内容不多的场景。典型应用：
    百度搜索输入框获取下拉框 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">

        <title>Document</title>
        <script>

            function show(data){
                alert(data.s);
            }
            window.onload=function(){
                let oTxt= document.getElementById("in");
         oTxt.oninput=function(){
            let secrpt= document.createElement('script');
            secrpt.src=`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${encodeURIComponent(oTxt.value)}&cb=show`
            document.head.appendChild(secrpt);

        }
            }

        </script>
    </head>
    <body>
        <input type="text" name="" id="in">
    </body>
    </html>
分享