H5-12.27Http協(xié)議及Ajax基本

一、URL

  1. URL與URI

    URL - 統(tǒng)一資源定位符
    URI - 統(tǒng)一資源標(biāo)識(shí)符

    URL與URI的區(qū)別

    所有的URL都是URI,但URI不一定是URL

  2. 完整的URL

1) 完整的url具有哪些元素

    網(wǎng)絡(luò)協(xié)議://IP地址:端口號(hào)/路徑;參數(shù)?查詢數(shù)據(jù)#錨點(diǎn)

    網(wǎng)絡(luò)協(xié)議 - 
    IP地址 - 每個(gè)電腦都有0.0.0.0每個(gè)
    端口號(hào) - 電腦開(kāi)放給外部電腦訪問(wèn)接口
    路徑 - 相對(duì)路徑和絕對(duì)路徑
    參數(shù) - 某些方案會(huì)使用參數(shù)來(lái)指定輸入?yún)?shù)
    查詢地址 - 
      key=value&key=value
    錨點(diǎn) -

2) 一般使用時(shí):

    http://www.baidu.com/news
    http://137.0.0.1:8080?key=value
    http://localhost:80#mylink

二看政、Http協(xié)議

  1. 網(wǎng)絡(luò)協(xié)議

    客戶端與服務(wù)端之間的協(xié)議

  2. 主流協(xié)議

    http、socket、ftp饶深、pop3

  3. http協(xié)議

    1)多用與b/s架構(gòu)

    2)問(wèn)題

     短連接:每次客戶端與服務(wù)端交互時(shí),先建立連接逛拱,交互完畢后敌厘,關(guān)閉連接
    
     無(wú)狀態(tài):服務(wù)端只能記得住當(dāng)次請(qǐng)求狀態(tài)
    

    3)http:1.0 - 目前主流版本
    http:1.1 - 較新版本(向下兼容)
    http:2.0 - 最新版本

三、http請(qǐng)求協(xié)議

  1. 客戶端發(fā)送一個(gè)請(qǐng)求朽合,應(yīng)該有如下三個(gè)部分:

    請(qǐng)求行: 請(qǐng)求方法俱两、請(qǐng)求url 狀態(tài)碼、(http協(xié)議版本)

    請(qǐng)求頭部: 說(shuō)明服務(wù)器要使用的附加信息

    請(qǐng)求主體: 提交給服務(wù)器的請(qǐng)求數(shù)據(jù)

  2. HTTP客戶端請(qǐng)求內(nèi)容詳解

    1)請(qǐng)求行 - 請(qǐng)求的信息

     請(qǐng)求類型 - get曹步、post/put
    
     請(qǐng)求地址 
    
        如果是get請(qǐng)求宪彩,參數(shù)應(yīng)該拼到url的后面url?key=value,但請(qǐng)求體為空
    
        如果是post請(qǐng)求讲婚,url后面不拼參數(shù)尿孔,參數(shù)放在請(qǐng)求體中
        
    
     狀態(tài)碼 - 服務(wù)器端的狀態(tài)
    

    2)請(qǐng)求頭 - 反映給服務(wù)端的信息

     格式為 key:value,key:value,...
          
     accept - 表示瀏覽器可接受的MIME類型
     accept-Encoding - 瀏覽器能夠進(jìn)行解碼的數(shù)據(jù)編碼方式
    
     accept-language - 表示服務(wù)端接受的語(yǔ)言
    
       zh-cn:簡(jiǎn)體中文
       zh-tw:繁體中文
       zh - 中文
       us -英文
    
     connection - 表示當(dāng)前鏈接狀態(tài)
    
       keep-alive - 保持連接
    
     host - 請(qǐng)求的服務(wù)器網(wǎng)址;
    
     referer - 表示當(dāng)前的請(qǐng)求來(lái)源
    
                  實(shí)現(xiàn)防盜鏈接
    
     user-agent 獲取到用戶瀏覽器信息
    
     cache-control -緩存控制
         
       max-age 設(shè)置最大活動(dòng)周期,設(shè)置緩存保存的最大時(shí)間的單位為秒活合,為0代表不緩存
    
     cookie - 將cookie自動(dòng)攜帶到請(qǐng)求頭
    
     content-type:互聯(lián)網(wǎng)媒體類型雏婶;使用post請(qǐng)求必須設(shè)置這個(gè)屬性
    
         也叫做MIME類型,在Http協(xié)議消息頭中芜辕,使用Content-Type來(lái)表示具體請(qǐng)求中的媒體類型信息尚骄。
    
         <form>元素提交時(shí)默認(rèn)的類型
        一般文件上傳時(shí)默認(rèn)為application/x-www.form-urlencoded
    
     Content-Length:請(qǐng)求內(nèi)容的長(zhǎng)度
    
        對(duì)于POST請(qǐng)求來(lái)說(shuō)Content-Length必須出現(xiàn)
    

    3)請(qǐng)求體 - 存放請(qǐng)求參數(shù)

     如果為post請(qǐng)求,有值侵续,如果為get請(qǐng)求為空
    

四倔丈、http響應(yīng)協(xié)議

  1. 服務(wù)端給客戶端響應(yīng)信息,應(yīng)該有如下三部分

    響應(yīng)行:協(xié)議版本 狀態(tài)碼 原因短語(yǔ)

    響應(yīng)頭部:

    響應(yīng)主題: 返回給客戶端的響應(yīng)數(shù)據(jù)状蜗,可能是字符數(shù)據(jù)需五,也可能是字節(jié)數(shù)據(jù)

  2. HTTP服務(wù)端響應(yīng)內(nèi)容詳解

    1)響應(yīng)行

      狀態(tài)碼
      協(xié)議版本
    

    2)響應(yīng)頭

      Allow:服務(wù)器支持哪些請(qǐng)求方法
    
         GET、POST
    
      Content-Encoding 文檔的編碼(Encode)
    
      Cache-Control: 告訴客戶端轧坎,服務(wù)端的緩存配置
    
      Connection - 表示當(dāng)前的連接狀態(tài)
    
        keep-alive 表示保持連接
    
      content-length 響應(yīng)數(shù)據(jù)的長(zhǎng)度(大泻暧省)
    
      content-type - 響應(yīng)數(shù)據(jù)的mime類型
    
         一般情況下:text/html
         
      Date - 當(dāng)前響應(yīng)的日期時(shí)間
    
      keep-alive 設(shè)置保持連接的超時(shí)和最大存活時(shí)間
         timeout=5 max=99
    
      server - 服務(wù)器端的信息
    

    3)響應(yīng)體

      服務(wù)器返回給客戶端的數(shù)據(jù)主體
    

五、擴(kuò)展內(nèi)容

1. 請(qǐng)求類型

     get/post/head/put/delete/options/trace

2. 標(biāo)準(zhǔn)API - 標(biāo)準(zhǔn)的請(qǐng)求方式

      get - 獲取數(shù)據(jù)
      post - 修改數(shù)據(jù)
      put - 新增數(shù)據(jù)
      delete - 刪除數(shù)據(jù)

3. 狀態(tài)碼

      1XX - 服務(wù)器的信息
      2XX - 表示請(qǐng)求成功
        200:請(qǐng)求成功
        201:成功創(chuàng)建連接
        202:接受請(qǐng)求            
      3XX - 表示重定向
        302:表示重定向
        304:表示服務(wù)端資源沒(méi)有變化缸血,訪問(wèn)緩存
          問(wèn)題 - 這次請(qǐng)求沒(méi)有真正低訪問(wèn)服務(wù)器端
        305:使用代理
      4XX - 客戶端錯(cuò)誤
        400:錯(cuò)誤的請(qǐng)求
        404:網(wǎng)頁(yè)找不到
        403:拒絕訪問(wèn)
        405:請(qǐng)求類型不允許
      5XX - 服務(wù)端錯(cuò)誤
        500:服務(wù)端錯(cuò)誤
        502:路徑錯(cuò)誤
        504:請(qǐng)求超時(shí)
        505:http版本不支持

4. MIME類型 - 文件類型

     MIME類型是如何定義的

        //定義MIME類型
        <mime-mapping>
            //文件的擴(kuò)展名
            <extension>jpg</extension>
            //對(duì)應(yīng)的MIME類型
            <mime-type>image/jpeg</mime-type>
         </mime-mapping>

       常見(jiàn)的MIME類型

        html - text/html
        htm  - text/html
        css  - text/css
        js   - text/javascript
        json - application/json
        jpg  - image/jpeg
        text - text/plain

5. 請(qǐng)求參數(shù)

     1)get請(qǐng)求類型

         將請(qǐng)求數(shù)據(jù) - url?key=value(瀏覽器地址)

         安全性低

         請(qǐng)求地址的長(zhǎng)度是有限制的

         請(qǐng)求數(shù)據(jù)中包含中文的話蜜氨,需要轉(zhuǎn)碼

     2)post請(qǐng)求類型

         瀏覽器地址欄url,不包含請(qǐng)求類型

         安全性相對(duì)比較高

         對(duì)請(qǐng)求數(shù)據(jù)的長(zhǎng)度沒(méi)有要求

         請(qǐng)求數(shù)據(jù)中包含中文的話捎泻,可以不轉(zhuǎn)碼飒炎,對(duì)中文的處理相對(duì)比較好

6. 控制HTTP頭部方法

    可以配置每個(gè)HTML文件的HTTP-EQUIV標(biāo)簽控制緩存

      <meta http-equiv="Cache-Control" content="no-cache">

發(fā)送請(qǐng)求
盡力減少請(qǐng)求次數(shù)——合理設(shè)置Expires時(shí)間、資源合并
是否有緩存
有緩存出現(xiàn)是否過(guò)期笆豁,如果過(guò)期不用
如果不過(guò)期郎汪,跟服務(wù)器進(jìn)行驗(yàn)證
在PHP頁(yè)面中控制響應(yīng)頭

       header("Content-Type: image/jpeg");

六、緩存工作原理

  1. 客戶端可以自動(dòng)保存已經(jīng)訪問(wèn)過(guò)的文檔的副本闯狱,這些副本就成為“文檔緩存”

  2. 當(dāng)客戶端再次發(fā)送針對(duì)同一個(gè)URL的請(qǐng)求時(shí)煞赢,如果本地有“已緩存的副本”,就可以直接從本地存儲(chǔ)設(shè)備而不是遠(yuǎn)程服務(wù)器提取該文檔了哄孤。

  3. 數(shù)據(jù)緩存有下列優(yōu)點(diǎn)

    減少了冗余的數(shù)據(jù)傳輸照筑,節(jié)省客戶端流量費(fèi)用
    緩解服務(wù)器帶寬瓶頸的問(wèn)題,服務(wù)器可以節(jié)省出更多的帶寬
    降低了對(duì)服務(wù)器的資源消耗和運(yùn)行要求
    降低了由于遠(yuǎn)距離而造成的加載延時(shí)

七瘦陈、http基本優(yōu)化

網(wǎng)站性能優(yōu)化最主要的就是要減少HTTP請(qǐng)求及每次響應(yīng)中內(nèi)容的長(zhǎng)度朦肘。可以從連接過(guò)程中的下列方面加以考慮:

1双饥、域名解析

盡可能減少域名解析次數(shù)——減少跨站外部資源的引用

2、創(chuàng)建連接

努力減少連接創(chuàng)建次數(shù)——使用Keep-Alive避免重復(fù)連接

3弟断、發(fā)送請(qǐng)求
盡力減少請(qǐng)求次數(shù)——合理設(shè)置Expires時(shí)間咏花、資源合并

4鼓择、等待響應(yīng)
提高服務(wù)器端運(yùn)行速度——提高數(shù)據(jù)運(yùn)算及查詢速度

5、接收響應(yīng)
盡可能減小響應(yīng)數(shù)據(jù)長(zhǎng)度——啟用壓縮

八碌尔、安全的HTTP協(xié)議

  1. HTTP協(xié)議本質(zhì)上屬于“明文傳輸”它碎,可能被竊聽(tīng)和篡改,政府棚菊、銀行等機(jī)密應(yīng)用需要需要“安全版本的HTTP”:http協(xié)議默認(rèn)端口80

  2. HTTPS協(xié)議將消息發(fā)送給TCP層之前浸踩,先交給了一個(gè)安全層(由SSL或TLS協(xié)議實(shí)現(xiàn)),安全層負(fù)責(zé)對(duì)消息進(jìn)行加密和解密操作统求。https協(xié)議默認(rèn)端口443

一检碗、同步交互與異步交互

  1. 客戶端想服務(wù)器端發(fā)送請(qǐng)求,直到服務(wù)器端進(jìn)行響應(yīng)码邻,這個(gè)過(guò)程中折剃,用戶是不能做任何其他事情的(等)

  2. 客戶端想服務(wù)端發(fā)送請(qǐng)求,直到服務(wù)端進(jìn)行響應(yīng)像屋,這個(gè)過(guò)程中怕犁,用戶是可以做其他事情的(不用等)

二、AJAX

  1. asynchronous javascript and xml,直譯中文-javascript和xml的異步

  2. AJAX是一種用來(lái)改善用戶體驗(yàn)的技術(shù)己莺,其實(shí)質(zhì)是奏甫,使用XMLHttpRequest對(duì)象異步地向服務(wù)器發(fā)請(qǐng)求

  3. 服務(wù)器返回部分?jǐn)?shù)據(jù),而不是一個(gè)完整的頁(yè)面凌受,以頁(yè)面無(wú)刷新的效果更改頁(yè)面中的局部?jī)?nèi)容

  4. Ajax的核心對(duì)象

    XMLHttpRequerst對(duì)象

  5. 獲取XMLHttpRequest對(duì)象

    function getXhr(){

    var xhr = null;
    if(window.XMLHttpRequest){
        //除IE外的其他瀏覽器
        xhr = new XMLHttpRequest();
    }else{
        
        xhr = new ActiveXObject("Microsoft.XMLHttp");
    
    }
    
    return xhr;
    

    }

  6. 屬性

    1. readyState 請(qǐng)求狀態(tài)
    0 尚未初始化
    1正在發(fā)送請(qǐng)求
    2請(qǐng)求完成
    3請(qǐng)求成功阵子,正在接受數(shù)據(jù)
    4數(shù)據(jù)接收成功
    
    1. status 請(qǐng)求響應(yīng)值

      200 表示請(qǐng)求成功
      202 請(qǐng)求被接受但處理未完成
      400 錯(cuò)誤的請(qǐng)求
      404 資源未找到
      500 內(nèi)部服務(wù)器錯(cuò)誤,如asp代碼錯(cuò)誤等

    2. responseText 服務(wù)器返回的文本

    3. responseXML 服 器返回的xml胁艰,可以當(dāng)做DOM處理

  7. 方法

    open(method,url) - 與服務(wù)端建立連接

    send() - 向服務(wù)器端發(fā)送請(qǐng)求

    abort() - 取消請(qǐng)求

    getAllResponseHeaders()
    得到響應(yīng)的所有http頭

    getResponseHeader()
    獲取指定的http頭

    setRequestHeader()
    指定請(qǐng)求的Http頭

  8. 事件

    onreadystatechange事件
    作用 - 監(jiān)聽(tīng)服務(wù)端的通信狀態(tài)改變

    當(dāng)Ajax對(duì)象的readyState的值發(fā)生了改變款筑,比如,從0變成了1腾么,就會(huì)產(chǎn)生readystatechange事件

三奈梳、實(shí)現(xiàn)ajax的異步交互步驟

  1. 創(chuàng)建XMLHttpRequest核心對(duì)象
    固定寫(xiě)法-獨(dú)立編寫(xiě)

  2. 與服務(wù)區(qū)建立連接
    使用XMLHttpRequest對(duì)象的open(method,url)

  3. 向服務(wù)器發(fā)送請(qǐng)求
    使用XMLRequest對(duì)象的send()方法
    請(qǐng)求參數(shù)的格式 - key=value

  4. 接受服務(wù)器響應(yīng)的數(shù)據(jù)

    使用XMLHttpRequest對(duì)象的readystatechange事件監(jiān)聽(tīng)服務(wù)器端的通信狀態(tài)

    使用XMLHttpRequest對(duì)象的readyState屬性,判斷服務(wù)器端當(dāng)前狀態(tài)(0-4)

    使用XMLHttpRequest對(duì)象的statue屬性解虱,判斷服務(wù)器端的狀態(tài)碼(200)

    使用XMLHttp對(duì)象的responseText屬性攘须,接受服務(wù)器端的響應(yīng)數(shù)據(jù)

注意:get與post方式

  get請(qǐng)求方式

    send()方法不起作用,但是不能被省略
    xhr.send(null) 請(qǐng)求參數(shù)殴泰,添加到url?key=value
     
  post請(qǐng)求方式

    必須要在send()方法調(diào)用之前于宙,使用setRequestHeader()方法設(shè)置請(qǐng)求頭,參數(shù)為key-value

    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

照常一首歌
http://music.163.com/#/song?id=29480187

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末悍汛,一起剝皮案震驚了整個(gè)濱河市捞魁,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌离咐,老刑警劉巖谱俭,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件奉件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡昆著,警方通過(guò)查閱死者的電腦和手機(jī)县貌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)凑懂,“玉大人煤痕,你說(shuō)我怎么就攤上這事〗咏鳎” “怎么了摆碉?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)疤坝。 經(jīng)常有香客問(wèn)我兆解,道長(zhǎng),這世上最難降的妖魔是什么跑揉? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任锅睛,我火速辦了婚禮,結(jié)果婚禮上历谍,老公的妹妹穿的比我還像新娘现拒。我一直安慰自己,他們只是感情好望侈,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布印蔬。 她就那樣靜靜地躺著,像睡著了一般脱衙。 火紅的嫁衣襯著肌膚如雪侥猬。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天捐韩,我揣著相機(jī)與錄音退唠,去河邊找鬼。 笑死荤胁,一個(gè)胖子當(dāng)著我的面吹牛瞧预,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播仅政,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼垢油,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了圆丹?” 一聲冷哼從身側(cè)響起滩愁,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎辫封,沒(méi)想到半個(gè)月后惊楼,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體玖瘸,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年檀咙,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片璃诀。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡弧可,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出劣欢,到底是詐尸還是另有隱情棕诵,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布凿将,位于F島的核電站校套,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏牧抵。R本人自食惡果不足惜笛匙,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望犀变。 院中可真熱鬧妹孙,春花似錦、人聲如沸获枝。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)省店。三九已至嚣崭,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間懦傍,已是汗流浹背雹舀。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留谎脯,地道東北人葱跋。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像源梭,于是被迫代替她去往敵國(guó)和親娱俺。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

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

  • AJAX 原生js操作ajax 1.創(chuàng)建XMLHttpRequest對(duì)象 var xhr = new XMLHtt...
    碧玉含香閱讀 3,216評(píng)論 0 7
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理废麻,服務(wù)發(fā)現(xiàn)荠卷,斷路器,智...
    卡卡羅2017閱讀 134,716評(píng)論 18 139
  • 本文詳細(xì)介紹了 XMLHttpRequest 相關(guān)知識(shí)烛愧,涉及內(nèi)容: AJAX油宜、XMLHTTP掂碱、XMLHttpReq...
    semlinker閱讀 13,675評(píng)論 2 18
  • Ajax和XMLHttpRequest 我們通常將Ajax等同于XMLHttpRequest,但細(xì)究起來(lái)它們兩個(gè)是...
    changxiaonan閱讀 2,246評(píng)論 0 2
  • 很難理解別人的模式慎冤!
    碩瑋姐閱讀 193評(píng)論 0 0