瀏覽器的同源政策限制：端口，域名，協(xié)議 ，只要一個(gè)不一樣就跨域

前后端如何通信：

• Ajax : 短連接
• Websocket : 協(xié)議 http https (SSL) file socket.io 長連接，雙向的。
• CORS fetch()

Ajax實(shí)現(xiàn)

    <script>
         function ajax(options){
             // 定義一個(gè)操作對象
            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)
                    // 發(fā)送請求
                    xhr.send()
                }
                // 判斷是否為post請求方式
                if(type === "POST"){
                    // 初始化一個(gè)請求
                    xhr.open(type,url, true)

                    // 設(shè)置請求頭
                    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
                    
                    // 發(fā)送請求
                    xhr.send(dataArr.join('&'))
                }

                // 監(jiān)聽后臺返回過來的數(shù)據(jù)
                xhr.onreadystatechange = function(ev){
                  // console.log(ev)
                    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {  // 304未修改
              // 如果請求成功之后，回調(diào)我們的success函數(shù)
                            options.success(xhr.responseText)
          }else {
                          // 如果請求失敗之后，回調(diào)我們的error函數(shù)
              options.error(xhr.responseText)
          }
                }
            }
        }
    
         ajax({
             url: "https://www.baidu.com",
             //成功調(diào)用success函數(shù)
             success:function(res){
                 console.log("這里是ok的")
                 console.log(res)
             }
         })
         
    </script>

Object.assign()

• 用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對象復(fù)制到目標(biāo)對象。它將返回目標(biāo)對象。
• 如果目標(biāo)對象中的屬性具有相同的鍵，則屬性將被源中的屬性覆蓋。后來的源的屬性將類似地覆蓋早先的屬性。

toUpperCase

• 一個(gè)新的字符串，在其中 stringObject 的所有小寫字符全部被轉(zhuǎn)換為了大寫字符。

toLowerCase

• 一個(gè)新的字符串，在其中 toLowerCase的所有大寫字符全部被轉(zhuǎn)換為了小寫字符。（和上面相反）

for in

• 用于對數(shù)組或者對象的屬性進(jìn)行循環(huán)操作。
• 循環(huán)中的代碼每執(zhí)行一次，就會對數(shù)組的元素或者對象的屬性進(jìn)行一次操作。