ajax跨域

ajax跨域

• xhr.open(“get”,“http://localhost:4000/getAjax”,true);

解决跨域问题：利用jaonp

jsonp 利用script标签的特性（浏览器在同源策略下允许script，img标签访问）解决跨域问题

但script标签出现的问题：

• 1.后端返还数据时，不能使用对象，能够返还js代码，但大量的js代码在服务器是不太合理的
• 2.端口号和参数无法灵活传递

< img src="http://i1.sinaimg.cn/IT/2010/0419/201041993511.jpg" alt="">
< script src="http://localhost:4000/getAjax">< /script>

动态创建script

• 前端页面
  script标签出现的问题 的解决方法
  -1.把回调函数写到前端

function cbfn(res){
            console.log(res);
        }

2.动态创建

 let btn =document.querySelector("button");
        btn.onclick = function(){
            let post = 4000;
            let o = document.createElement("script");

            // o.src = `http://localhost:${post}/getAjax?cb=cbfn`;
            //这里把参数传递给后端
            o.src = "http://localhost:4000/getAjax?cb=cbfn";
            document.querySelector("head").appendChild(o);
            
            // console.log(a);
            o.onload =function(){
                console.log(a);
            }

        }

• 后端页面

router.get("/getAjax",ctx=>{
    console.log("running....");   
    // ctx.body = "var a = 20";

    let obj = {
        name:"小了",
        age:20
    }
    //这里的cb 是前后端人员共同拟定的名字
   let cb = ctx.query.cb;
   console.log(cb);

   //cb(obj)   后端把数据放到这里传给前端
   ctx.body = `${cb}(${JSON.stringify(obj)})`;
})

封装的jsonp

-引入
< script src=“jsonp.js”>< /script>

< script>
let btn = document.querySelector(“button”);
function cbfn(res){
console.log(res);
}
btn.onclick = function(){
ajax({
url:“http://localhost:4000/getAjax”,
data:{
name:“张三”,
age:20
},
dataType:“jsonp”,
jsonp:“cb”,
success:function(res){ // 请求完成之后触发的函数
console.log(res);
}
});
}
< /script>

百度jsonp练习

< h1>百度搜索< /h1>
    < input type="text" class="myInput">
    < div class="exchange">< /div>

    <script>

        document.querySelector(".myInput").onblur = function(){
            ajax({
                url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                dataType:"jsonp",

                //路径里 ？之后的参数，全部写在data数据中
                data:{
                    wd : this.value
                },
                success:function(res){
                    console.log(res);
                    let data = res.s;
                   
                   //组装到页面
                    let html = "<ul>"
                    data.forEach(v=> {
                        html += "<li>" + v + "</li>";
                    });
                    html += "</ul>";
                    document.querySelector(".exchange").innerHTML = html;
                }
            })
        }
    </script>