數(shù)據(jù)交互

1. 表單---最簡單、最基本的、HTTP所有的數(shù)據(jù)請求都是表單
2. ajax---最常用的、不用刷新頁面；默認(rèn)不可跨域提交,可以使用CORS進(jìn)行跨域
3. JSONP---常用來跨域,因?yàn)榘踩蕴罨颈惶蕴?4. WebSocket---性能比ajax高、速度快、雙向、可跨域
    ajax是單向的:瀏覽器向服務(wù)器發(fā)送請求、默認(rèn)不可以跨域
    WebSocket是雙向的:瀏覽器與服務(wù)器之間可以相互發(fā)送請求、默認(rèn)可以跨域

表單

    //當(dāng)用戶網(wǎng)絡(luò)環(huán)境比較差時(shí)，表單提交的成功率比AJAX要好
    <form action="" method="get/post">
        <input type="text" name="" value="">//提交的數(shù)據(jù)，根據(jù)name
        <input type="submit" >//提交
    </from>

document.querySelectorAll 與 document.querySelector

    //語法：elementList = document.querySelectorAll(selectors); 
        1. elementList 是一個(gè)靜態(tài)的 NodeList 類型的對象.
        2. selectors 是一個(gè)由逗號(hào)連接的包含一個(gè)或多個(gè)CSS選擇器的字符串.
    //下面的例子返回了HTML文檔中的body元素的所有p后代元素:
        var matches = document.body.querySelectorAll('p');
    //下面的例子返回了id為'test'的元素的所有class屬性為'highlighted'的所有div后代元素的p子元素:
        var el = document.querySelector('#test');
        var matches = el.querySelectorAll('div.highlighted > p');
    //手動(dòng)寫$用法的兩種方式
        const $ = function(...args){
            return document.querySelectorAll(...args)
        }
    //第二種需要將this綁定在document上；
        const $ = document.querySelectorAll.bind(document);

AJAX 原理與原生GET方式請求的實(shí)現(xiàn)

    //AJAX 請求與表單的請求是一樣的效果。
    //AJAX 常用寫法 
        $.ajax({
            url:'1.php',//1.php內(nèi)容<?php echo $_GET['a']+$_GET['b']; ?>
            data:{a:12,b:5},
            type:'get',
            dataType:'text',
            success(str){
                alert(str)
            },
            error(){
                alert("失敗")
            },
            finish(){
                //無論成功失敗只要AJAX完成就走這個(gè)方法。
            }
        }); 
    //AJAX實(shí)現(xiàn)
        if(window.XMLHttpRequest){
            var xhr = new XMLHttpRequest();//不兼容IE6 此時(shí)狀態(tài)碼為0：初始化
        }else{
            var xhr = new ActiveXObject('Microsoft.XMLHttp');//兼容IE6
        }
    //開啟連接
        xhr.open('get','1.php?a=4&b=6',true);//連接方法、URL、true開啟異步,false關(guān)閉異步，此時(shí)狀態(tài)碼為1：已連接
    //發(fā)送數(shù)據(jù)
        xhr.send();//post請求的情況下，此處參數(shù)為請求體里的內(nèi)容。本demo中用的get請求，數(shù)據(jù)應(yīng)當(dāng)在URL中，所以此處沒參數(shù)。
    //接受
        xhr.onreadystatechange = function (){
            var state = xhr.readyState);//xhr.readyState 0:初始化；1:已連接；2:已發(fā)送；3:已接收-頭信息；4:已接收-體信息
            if(xhr.readyState==4){
                alert(xhr.status)//HTTP狀態(tài)碼；1xx:消息；2xx:成功;3xx:重定向;4xx:客戶端錯(cuò)誤;5xx:服務(wù)器錯(cuò)誤;6+:擴(kuò)展?fàn)顟B(tài);
                if(xhr.status>=200&&xhr.status<300||shr.status==304){
                    alert("成功"+xhr.responseText);//返回的文本；JSON需要自己去解析，responseXML,返回的XML數(shù)據(jù)；
                }else{
                    alert("失敗")
                }
            }
        }

擴(kuò)展

跨域

只要域名、端口、協(xié)議(http與https),有一個(gè)不同就會(huì)產(chǎn)生跨域。
常用的跨域解決方案：表單、AJAX、jsonp、WebSocket

http前世今生

http0.9
    HTTP 0.9是第一個(gè)版本的HTTP協(xié)議，確定了HTTP是無狀態(tài)通信，已過時(shí)。
    它的組成極其簡單，只允許客戶端發(fā)送GET這一種請求，且不支持請求頭。
    由于沒有協(xié)議頭，造成了HTTP 0.9協(xié)議只支持一種內(nèi)容，即純文本。
    不過網(wǎng)頁仍然支持用HTML語言格式化，同時(shí)無法插入圖片。
http1.0
    新增如下功能：
    請求與響應(yīng)支持頭域
    響應(yīng)對象以一個(gè)響應(yīng)狀態(tài)行開始
    響應(yīng)對象不只限于超文本
    開始支持客戶端通過POST方法向Web服務(wù)器提交數(shù)據(jù)，支持GET、HEAD、POST方法
    支持長連接（但默認(rèn)還是使用短連接），緩存機(jī)制，以及身份認(rèn)證
http1.1
    是目前使用最廣泛的協(xié)議版本。HTTP 1.1 所有的連接默認(rèn)都是長連接。
    允許HTTP設(shè)備在事務(wù)處理結(jié)束之后將TCP連接保持在打開的狀態(tài)，
    以便未來的HTTP請求重用現(xiàn)在的連接，直到客戶端或服務(wù)器端決定將其關(guān)閉為止。
    在GET、POST請求之外新增加了OPTIONS,PUT, DELETE, TRACE, CONNECT方法。
http2.0    
    下一代版本，主要功能有
    強(qiáng)制HTTPS、自帶雙相通信、多路復(fù)用
http協(xié)議
    基本的互聯(lián)網(wǎng)通信協(xié)議都有在RFC文件內(nèi)詳細(xì)說明，所以任何一個(gè)協(xié)議都是RFC
    http是RFC 2016  
    原文地址：https://datatracker.ietf.org/doc/rfc2616/?include_text=1
    https是RFC 2818

GET與POST

get請求發(fā)送在請求頭中，有大小限制，有緩存，當(dāng)鏈接會(huì)被分享、收藏時(shí),用get請求（例如淘寶購物頁面）
post請求發(fā)送在請求體中，無大小限制，沒有緩存

TCP協(xié)議與UDP協(xié)議

TCP協(xié)議--傳輸控制協(xié)議
    該協(xié)議保證數(shù)據(jù)傳輸?shù)竭_(dá)，保證質(zhì)量，保證順序。
    應(yīng)用場景:對質(zhì)量要求高，對實(shí)時(shí)性要求不高的需求（HTTP協(xié)議通?；赥CP協(xié)議）
UDP協(xié)議--用戶數(shù)據(jù)報(bào)協(xié)議
    該協(xié)議不保證數(shù)據(jù)傳輸?shù)竭_(dá)，不保證質(zhì)量，不保證順序。
    應(yīng)用場景：對質(zhì)量要求不高，對是實(shí)時(shí)性要求高的需求，（IP電話、視頻直播）

OSI七層交換"參考"模型

實(shí)際為五層模型,表現(xiàn)層與會(huì)話層不實(shí)際存在

1. 物理層 建立、維護(hù)、斷開物理連接。
2. 鏈路層 建立邏輯連接、進(jìn)行硬件地址尋址、差錯(cuò)校驗(yàn)等功能。例如ARP、ICMP協(xié)議
3. 網(wǎng)絡(luò)層 進(jìn)行邏輯地址尋址，實(shí)現(xiàn)不同網(wǎng)絡(luò)之間的路徑選擇。 例如IP協(xié)議
4. 傳輸層 負(fù)責(zé)通信穩(wěn)定性，定義傳輸數(shù)據(jù)的協(xié)議端口號(hào)，以及流控和差錯(cuò)校驗(yàn)。 例如TCP協(xié)議
5. 表現(xiàn)層 （×五層模型中合并到應(yīng)用層）數(shù)據(jù)的表示、安全、壓縮。
6. 會(huì)話層 （×五層模型中合并到應(yīng)用層）建立、管理、終止會(huì)話。
7. 應(yīng)用層 處理應(yīng)用細(xì)節(jié)，網(wǎng)絡(luò)服務(wù)與最終用戶的一個(gè)接口。 例如 HTTP協(xié)議

HTTP狀態(tài)碼

1xx:消息；
2xx:成功;
3xx:重定向;
    301 永久重定向（瀏覽器永遠(yuǎn)不會(huì)再次請求老地址）；
    302 臨時(shí)重定向（瀏覽器下次還會(huì)重新請求老地址-常用）；
    304 緩存:
        瀏覽器向服務(wù)器發(fā)送請求,并發(fā)送瀏覽器緩存的文件版本，
        服務(wù)器判斷有沒有更新，若沒有就返回304； 
4xx:客戶端錯(cuò)誤;
5xx:服務(wù)器錯(cuò)誤;
6xx+：擴(kuò)展?fàn)顟B(tài);