前后端通信

瀏覽器的同源政策限制:端口,域名洒疚,協(xié)議 ,只要一個不一樣就跨域

前后端如何通信:

  • Ajax : 短連接
  • Websocket : 協(xié)議 http https (SSL) file socket.io 長連接殃姓,雙向的凡蚜。
  • CORS fetch()
Ajax實現(xiàn)
    <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)
                    // 發(fā)送請求
                    xhr.send()
                }
                // 判斷是否為post請求方式
                if(type === "POST"){
                    // 初始化一個請求
                    xhr.open(type,url, true)

                    // 設置請求頭
                    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()

  • 用于將所有可枚舉屬性的值從一個或多個源對象復制到目標對象踪蹬。它將返回目標對象。
  • 如果目標對象中的屬性具有相同的鍵臣咖,則屬性將被源中的屬性覆蓋跃捣。后來的源的屬性將類似地覆蓋早先的屬性。

toUpperCase

  • 一個新的字符串夺蛇,在其中 stringObject 的所有小寫字符全部被轉(zhuǎn)換為了大寫字符疚漆。

toLowerCase

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

for in

  • 用于對數(shù)組或者對象的屬性進行循環(huán)操作娶聘。
  • 循環(huán)中的代碼每執(zhí)行一次,就會對數(shù)組的元素或者對象的屬性進行一次操作甚脉。
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末丸升,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子宦焦,更是在濱河造成了極大的恐慌发钝,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,657評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件波闹,死亡現(xiàn)場離奇詭異酝豪,居然都是意外死亡,警方通過查閱死者的電腦和手機精堕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,662評論 3 385
  • 文/潘曉璐 我一進店門孵淘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人歹篓,你說我怎么就攤上這事瘫证∪嘌郑” “怎么了?”我有些...
    開封第一講書人閱讀 158,143評論 0 348
  • 文/不壞的土叔 我叫張陵背捌,是天一觀的道長毙籽。 經(jīng)常有香客問我,道長毡庆,這世上最難降的妖魔是什么坑赡? 我笑而不...
    開封第一講書人閱讀 56,732評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮么抗,結(jié)果婚禮上毅否,老公的妹妹穿的比我還像新娘。我一直安慰自己蝇刀,他們只是感情好螟加,可當我...
    茶點故事閱讀 65,837評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著吞琐,像睡著了一般捆探。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上顽分,一...
    開封第一講書人閱讀 50,036評論 1 291
  • 那天徐许,我揣著相機與錄音施蜜,去河邊找鬼卒蘸。 笑死,一個胖子當著我的面吹牛翻默,可吹牛的內(nèi)容都是我干的缸沃。 我是一名探鬼主播,決...
    沈念sama閱讀 39,126評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼修械,長吁一口氣:“原來是場噩夢啊……” “哼趾牧!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起肯污,我...
    開封第一講書人閱讀 37,868評論 0 268
  • 序言:老撾萬榮一對情侶失蹤翘单,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后蹦渣,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體哄芜,經(jīng)...
    沈念sama閱讀 44,315評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,641評論 2 327
  • 正文 我和宋清朗相戀三年柬唯,在試婚紗的時候發(fā)現(xiàn)自己被綠了认臊。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,773評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡锄奢,死狀恐怖失晴,靈堂內(nèi)的尸體忽然破棺而出剧腻,到底是詐尸還是另有隱情,我是刑警寧澤涂屁,帶...
    沈念sama閱讀 34,470評論 4 333
  • 正文 年R本政府宣布书在,位于F島的核電站,受9級特大地震影響拆又,放射性物質(zhì)發(fā)生泄漏蕊温。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,126評論 3 317
  • 文/蒙蒙 一遏乔、第九天 我趴在偏房一處隱蔽的房頂上張望义矛。 院中可真熱鬧,春花似錦盟萨、人聲如沸凉翻。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,859評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽制轰。三九已至,卻和暖如春胞谭,著一層夾襖步出監(jiān)牢的瞬間垃杖,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,095評論 1 267
  • 我被黑心中介騙來泰國打工丈屹, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留调俘,地道東北人。 一個月前我還...
    沈念sama閱讀 46,584評論 2 362
  • 正文 我出身青樓旺垒,卻偏偏與公主長得像彩库,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子先蒋,可洞房花燭夜當晚...
    茶點故事閱讀 43,676評論 2 351

推薦閱讀更多精彩內(nèi)容

  • 同源策略及限制 同源策略的概念 同源:http協(xié)議骇钦,域名, 端口三者均相同同源策略是用來限制在一個源上加載的文檔或...
    coolheadedY閱讀 1,259評論 0 5
  • 一竞漾、同源策略 同源就是當協(xié)議眯搭、域名和端口都一致時,才算是同源业岁,有一個不同都不是同源鳞仙。 同源策略官方解釋就是,限制從...
    JokerPeng閱讀 1,327評論 0 3
  • 1叨襟、瀏覽器的同源政策限制:端口繁扎,域名,協(xié)議 ,只要一個不一樣就跨域 2梳玫、前后端通信的方式 ajax Websock...
    不染事非閱讀 1,020評論 1 0
  • 瀏覽器和服務器端通過HTTP報文進行通信爹梁,HTTP報文是一段按照特定格式編寫的字符串。在前后端通信過程中提澎,發(fā)送方需...
    wuww閱讀 1,002評論 0 2
  • 不管多么美好浪漫的愛情姚垃,最后都不免歸于平淡的婚姻生活。有人怕窮盼忌,所以寧可在寶馬車里哭积糯,也不愿坐在自行車上笑。無數(shù)個...
    花花世界213閱讀 432評論 0 0