前后端通信

浏览器的同源政策限制：端口，域名，协议 ，只要一个不一样就跨域

前后端如何通信：

• Ajax : 短连接
• Websocket : 协议 http https (SSL) file socket.io 长连接，双向的。
• CORS fetch()

Ajax实现

    <script>
         function ajax(options){
             // 定义一个操作对象
            var pramas = {
                url:'',
                type: 'get',
                data: {},
            success: function (data) {},
            error: function (err) {},
            }
            // 对象属性覆盖
            options = Object.assign(pramas, options)
            // 传入了要请求的地址才会开始做其他的事情
            if(options.url){
                // 拿到请求对象
                var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
                var url = options.url,    //  htpp://www.baidu.com
                    type = options.type.toUpperCase(), // GET
                    data = options.data,    // {name:"kk",age:12}
                    dataArr = [];            // []
                // 遍历data对象
                for(let key in data){
                    let value = key + '='+ data[key]
                    dataArr.push(value)
                }
                // dataArr = ["name=kk","age=12"]

                // 判断是否为get方式请求
                if(type === "GET"){
                    url = url + "?" + dataArr.join('&')
                    // url = http://www.baidu.com?name=kk&age=12
                    // 初始化请求
                    xhr.open(type, url, true)
                    // 发送请求
                    xhr.send()
                }
                // 判断是否为post请求方式
                if(type === "POST"){
                    // 初始化一个请求
                    xhr.open(type,url, true)

                    // 设置请求头
                    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
                    
                    // 发送请求
                    xhr.send(dataArr.join('&'))
                }

                // 监听后台返回过来的数据
                xhr.onreadystatechange = function(ev){
                  // console.log(ev)
                    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {  // 304未修改
              // 如果请求成功之后，回调我们的success函数
                            options.success(xhr.responseText)
          }else {
                          // 如果请求失败之后，回调我们的error函数
              options.error(xhr.responseText)
          }
                }
            }
        }
    
         ajax({
             url: "https://www.baidu.com",
             //成功调用success函数
             success:function(res){
                 console.log("这里是ok的")
                 console.log(res)
             }
         })
         
    </script>

Object.assign()

• 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
• 如果目标对象中的属性具有相同的键，则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。

toUpperCase

• 一个新的字符串，在其中 stringObject 的所有小写字符全部被转换为了大写字符。

toLowerCase

• 一个新的字符串，在其中 toLowerCase的所有大写字符全部被转换为了小写字符。（和上面相反）

for in

• 用于对数组或者对象的属性进行循环操作。
• 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。