web中的网络请求的同源访问策略和jsonP

web.jpeg

同源访问策略

• 同源策略是浏览器的一种安全策略，是指请求的URL的地址中的协议，域名和端口都相同，只要其中之一不相同就是跨域
• 同源策略主要是为了保护浏览器的安全
• 同源策略下，浏览器不允许Ajax跨域获取服务器的数据

image.png

有时我们在请求使用数据的时候，需要跨域请求数据,那怎么实现呢?

• jsonP,所谓的jsonp其实就是JS中的一些特殊的标签属性，比如img中的src属性就可以跨域请求图片数据
• 在服务器端设置header("Access-Control-Allow-Origin:*");实现跨域请求
• iFrame的方式

我们经常使用的就是jsonP

• 就是利用script标签的src属性实现

<script>


    function callBack(obj) {
        var data = obj["s"];
        // console.log(typeof data);

        var result = document.getElementsByClassName("result")[0];
        // result.removeChild();
        var ulobj = document.createElement("ul");
        ulobj.setAttribute("id","ulId");
        for (var i = 0; i < data.length; i ++){
            var liobj = document.createElement("li");
            liobj.innerText = data[I];
            ulobj.appendChild(liobj);
            // console.log(1111111)
        }
        result.appendChild(ulobj);

        var  script = document.getElementById("demoId");
        document.body.removeChild(script);

    }

</script>

<script>


      //输入框内容发生了变化
      function aa(eve) {
          var result = document.getElementsByClassName("result")[0];
          var text = document.getElementById("textId");
          if (text.value == ""){
              result.style.display = "none";
             return;
          }

        var ulObj = document.getElementById("ulId");
        if (ulObj){
            result.removeChild(ulObj);
            result.style.display = "block";
        }
            //创建script

                var sc = document.createElement("script");

                sc.src = "https://www.baidu.com/su?wd="+text.value+"&cb=callBack";

                sc.setAttribute("id","demoId");
                document.body.appendChild(sc);




    }

</script>

image.png

主要是通过script的属性src来请求数据，其实就是引入一个文件，回调一个callBack函数

image.png