jsonp

同源策略

+ 同源策略主要是为了安全性
              => 协议：http https ftp
              => 域名：www.baidu.com www.jd.com
              => 端口：80 8080 40等等
              => 只要其中有一个不相同我就不让你访问
              => 同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
            同源策略给前端带来的问题
            + 例如：百度、京东、淘宝这些大公司下面有很多的子公司，每一个公司都有自己的网站，不同的网站是放在不同的服务器上面的，
            根据同源策略来讲，只有有一个不相同都访问不了，问题是公司都是属于一个总公司资源要共享，共享不了的
            + 百度公司
              => https://www.baidu.com/ 百度首页
              => http://news.baidu.com/ 百度新闻
              => https://tieba.baidu.com/index.html 百度贴吧
              => 很多都不满足同源策略的条件，需要共享数据，解决方案是需要进行跨域
            跨域
            + 域，根据同源策略来说不同网站之间不能相互访问
            + 为了解决访问问题，有人提出跨域
        */
       //http://localhost/SecondStage/day25/code/data/hello.php
       //注意点：ajax技术受同源策略影响，不同域的地址访问不了的
       pAjax({
           url: 'http://127.0.0.1/kuayu/day25/code/data/hello.php'
       }).then((res)=>{
            console.log(res)
       })

<!--
        地址
        + https://img1.baidu.com/it/u=1875739781,4152007440&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=576
        + http://localhost/SecondStage/day25/code/03-jsonp.html
        + 思考：通过地址对比，发现没有一项可以满足同源策略的需求的，应该访问不了才对
          => 规则：在html里面src属性，比较特殊可以不受同源策略影响，可以进行跨域访问
          => 哪些标记上面有src属性，img、script
        script标记上的src属性
        + 不受同源策略影响
        + 可以把引入地址返回的结果无论是什么都会以js代码的形式进行解析
        + src属性确实可以向服务器发送请求，也可以接收服务器返回的请求
        + jsonp跨域的原理：就是利于了script上面的src不受同源策略影响
        + 注意点：jsonp接收的请求，默认把json格式转成js对象形式，让咱们使用
    -->
    <img src="https://img1.baidu.com/it/u=1875739781,4152007440&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=576" alt="" width="500">
    <!--框架集标记，在一个网页中可以引入另一个网站，以框形式显示-->
    <!-- <iframe src="https://www.jd.com"></iframe> -->
    <!-- <script src="data/hello.txt"></script> -->

    <script src="data/hello.php"></script>
    <script>
        //问题：没有办法把数据获取到，处理业务逻辑？

<script>
        //思路：后端可以把前端代码返回并执行，给后端传递一个函数名称，让在返回数据的时候执行函数
        // function fn(res){
        //     console.log(res)
        // }

        // function fn(res){
        //     console.log('看我能不能执行')
        //     console.log(res.code)
        // }
        function fn(res){
            console.log('看我能不能执行')
            console.log(res.code)
        }
    </script>
    <script src="data/hello.php"></script>

<!--ajax和jsonp都是发送和接收信息的技术，jsonp可以跨域-->
    <!--注意点：并不是每一次都需要告诉后端咱们函数名称是什么，因为太麻烦，所以可以通过传递参数解决这个问题-->
    <script>
        //思路：后端可以把前端代码返回并执行，给后端传递一个函数名称，让在返回数据的时候执行函数
        // function fn(res){
        //     console.log(res)
        // }
        
        function jsonp(url){
            //先创建一个script标记
            let script = document.createElement('script')
            //把地址赋值
            script.src = url
            //把创建的标记放body标记里面
            document.body.appendChild(script)
        }

        function fn(res) {
            console.log('看我能不能执行')
            console.log(res.code)
        }
        jsonp('data/hello.php?cb=fn')
        
    </script>
    <!--cb--callback回调函数-->
    <!-- <script src="data/hello.php?cb=sb"></script> -->

搜索功能
<input type="text" placeholder="请输入要搜索的内容">
    <ul></ul>
    <script src="js/jsonp.js"></script>
    <script>
        let container = document.querySelector('ul')
        let search = document.querySelector('input')
        function fn(res){
            container.innerHTML = ''
            res.s.forEach((item)=>{
                container.innerHTML += `
                    <li>${item}</li>
                `
            })
        }
        //当咱们输入内容的时候触发这个事件，发送请求返回内容
        onkeyup = ()=>{
            container.innerHTML = ''
            let wd = search.value
            if(wd.trim().length == 0){
                container.innerHTML = ''
                return
            }
            jsonp(`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=fn&wd=${wd}`)
        }

cors跨越

<?php
    header("Access-Control-Allow-Origin: *");//允许所有地址跨域请求

ajax load方法

<script>
        let xhr = new XMLHttpRequest()
        xhr.open('get', 'data/hello.php')
        xhr.send()
        //这是ajax新增的一个事件，当所有的请求完成后把结果直接返回给咱们
        xhr.onload = ()=>{
            console.log(xhr.response)
        }
    </script>

浏览器同源策略
            + 浏览器为了安全，规定不同的协议、域名、端口其他有一个不一样，禁止访问
            + 跨域
              => jsonp，利于script上的src属性不受同源策略的影响，通过它替代ajax发送请求
              => cors，在后端设置请求头方式
            + 问题 
              => 有些接口，协议、域名、端口号都不一样，但是不受同源策略影响
              => 一些免费的接口，其实是被后端处理过的，使用ajax技术也可以正常发送请求和接收请求
            + 发送请求方式
              => form，action submit事件
              => ajax，XML、http、request结合
              => jsonp，利于script上的src属性不受同源策略的影响，通过它替代ajax发送请求
            + Promise 
              => 承诺，解决回调地狱问题
              => then()
              => catch()
              => finally()
              => all()
              => race()
            + async/await 
              => 回调地狱终极解决方案
              => async异步
              => await等待
              => 把咱们的异步回调代码改成了同步代码那样执行
              => 注意点：只是把书写方式改变了，异步本质没有改变
              => 注意点：浏览器是一个单线程的，一次只能做一件事情，如果只是按着同步方式写代码，会造成代码阻塞
            + bootstrap前端框架
              => 有一些现成的样式和js效果让咱们它的规则，快速实现开发
              => 实现响应式开发，栅格系统，分为12列，实现响应式的原理是通过css3里面的媒体查询语法
              => 其实给咱们通过class选择器，内置了很多的默认样式，通过class选择器来给标记设置对应的类名
            + 前后端交换
              => 后端代码只需要看懂就行
              => 对应的修改后端代码，库名、表名、传递过去的参数的名称