title: HTTP概述理解及cookie封裝
tags:
- javaScript
- HTTP協(xié)議及cookie
categories:
- web前端
- javaScript

HTTP協(xié)議介紹

HTTP: 超文本傳輸協(xié)議（HyperText Transfer Protocol）它是客戶端和web服務器數(shù)據(jù)傳輸?shù)幕A，現(xiàn)在基本上所有的web項目都遵從HTTP協(xié)議。設計HTTP最初的目的是為了提供一種發(fā)布和接收HTML頁面的方法。通過HTTP或者HTTPS協(xié)議請求服務器資源
HTTPS:超文本傳輸安全協(xié)議（Hypertext Transfer Protocol Secure）

HTTP協(xié)議工作于客戶端-服務端架構(gòu)上。瀏覽器作為HTTP客戶端通過URL向HTTP服務端即WEB服務器發(fā)送所有請求。Web服務器有：Apache服務器，IIS服務器（Internet Information Services）等。Web服務器根據(jù)接收到的請求后，向客戶端發(fā)送響應信息。

當我們打開瀏覽器，在地址欄中輸入URL地址如：
http://baidu.com，然后我們就看到了網(wǎng)頁。原理是怎樣的呢？實際上我們輸入URL后，瀏覽器會向Web服務器發(fā)送了一個Request, Web服務器接到Request后進行處理，然后服務器Response回來給瀏覽器，瀏覽器解析Response中的HTML,這樣我們就看到了網(wǎng)頁，過程如下圖所示：

Image.png

URL

URL: URL(Uniform Resource Locator) 統(tǒng)一資源定位符。作用:就是用于找到一個網(wǎng)絡上的資源
如：

http://xxx.com/src/1.html找到了服務器1.html資源文件
http://xxx.com/images/1.png找到了服務器1.png資源文件
URI:統(tǒng)一資源標識符（Uniform Resource Identifier）

注意：url只是標識資源，但不知道在哪找。開發(fā)中一般只說URL.

URL基本構(gòu)成

URL(Uniform Resource Locator) 地址用于定位一個網(wǎng)絡上的資源, 基本格式如下

schema://host[:port]/path/[?query-string][#anchor]

scheme 指定低層使用的協(xié)議(例如：http, https, ftp)
host HTTP服務器的IP地址或者域名port HTTP服務器的默認端口是80，這種情況下端口號可以省略。如果使用了別的端口，必須指明，例如 http://www.baidu.com:8080/path 訪問資源的路徑query-string 發(fā)送給http服務器的數(shù)據(jù)查詢字符串
anchor 錨點
URL的一個例子
http://www.baidu.com/a/b/index.phpname=dachui&age=33#header

Schema: http
host: www.baidu.com
path: /a/b/index.php
Query String: name=dachui&age=33
Anchor: header

HTTP最大特點：無狀態(tài)。

http協(xié)議是無狀態(tài)的，同一個客戶端的這次請求和上次請求是沒有對應關(guān)系，對http服務器來說，它并不知道這兩個請求來自同一個客戶端。為了解決這個問題， Web程序引入了Cookie機制來維護狀態(tài)。

HTTP消息的結(jié)構(gòu)

一個完整的http請求應該包含請求(Request)和響應(Response)部分。

請求（Request）

先看Request消息的結(jié)構(gòu), Request 消息分為4部分，

第一部分：Request line(請求行)
第二部分：Request header(請求頭部)
第三部分：空行
第四部分：Request body(請求數(shù)據(jù))結(jié)構(gòu)如下圖：

Image1.png

第一行中的Method：表示請求方法,比如"POST","GET", Path-to-resoure表示請求的資源， Http/version-number 表示HTTP協(xié)議的版本號。

第二行：http請求頭部

第三行：空行

第四行：請求數(shù)據(jù)（針對于post請求）

1、如下get請求結(jié)構(gòu)：

get /a/b/index.php HTTP/1.1
Host: www.xxx.com
User-Agent: Mozilla/5.0

2、post請求結(jié)構(gòu)

post /a/b/index.php HTTP/1.1
Host: www.xxx.com
User-Agent: Mozilla/5.0 

name=dachui&amp;age=18

響應（Response）

HTTP響應也由四個部分組成，分別是：狀態(tài)行、消息報頭、空行和響應正文。

Image.jpg

其中狀態(tài)行由協(xié)議/版本號狀態(tài)碼狀態(tài)文本三部分構(gòu)成

狀態(tài)碼

狀態(tài)碼代表著http請求是否成功，還是失敗等信息。

狀態(tài)碼由三位數(shù)組構(gòu)成：

1xx: 信息，服務器收到請求，繼續(xù)處理
2xx: 成功。作被成功接收并處理
3xx: 重定向，需要進一步操作才能完成請求
4xx: 客戶端錯誤，請求包含語法錯誤或無法完成請求
5xx: 服務端內(nèi)部錯誤。

下面是常見的HTTP狀態(tài)碼（HTTP Status Code）：

200：請求成功301：網(wǎng)頁（元等）被永久轉(zhuǎn)移到其它URL
304：未被修改，說明此資源被瀏覽器緩存了
404：找不到此網(wǎng)頁（資源）
500：內(nèi)部服務器錯誤其
他狀態(tài)碼解釋

get和post區(qū)別

get參數(shù)通過url傳遞，post放在請求體（request body）中
get請求在url傳遞的參數(shù)有長度限制，而post沒有
get比post更不安全，因為參數(shù)直接顯示在url地址中，所以不能傳遞敏感數(shù)據(jù)
get請求瀏覽器會主動緩存，而post不會
get請求參數(shù)會保存在瀏覽歷史記錄，而post請求不會
相同點：
get和post本質(zhì)上都是tcp連接。

COOKIE

cookie基本概念

Cookie是一種會話跟蹤技術(shù)，其是保存在瀏覽器本地中的一小塊數(shù)據(jù)，每個Cookie的大小一般在4KB左右，因瀏覽器而異。

會話：用戶進入網(wǎng)站，開始瀏覽信息到關(guān)閉瀏覽器的過程，就稱之為是一次會話。
會話跟蹤技術(shù)：瀏覽器（客戶端）和服務器之間在進行多次請求間共享數(shù)據(jù)的過程，就稱為會話跟蹤技術(shù)。

Cookie 主要用來分辨兩個請求是否來自同一個瀏覽器，它會在瀏覽器下次向同一服務器再次發(fā)起請求時被攜帶并發(fā)送到服務器上，從而辨別是否是來自同一瀏覽器。因為*http是無狀態(tài)*的。

主要應用場景：

會話狀態(tài)管理（如用戶登錄狀態(tài)、購物車等）
個性化設置（保存用戶設置的背景色等）
瀏覽器行為跟蹤（如跟蹤分析用戶行為等）
查看當前域名下面的所有cookie

document.cookie

查看瀏覽器是否打開 Cookie 功能

 window.navigator.cookieEnabled //true

cookie操作

可以通過js或服務端語言（如PHP、java）來操作。

js操作cookie設置

設置cookie:

 document.cookie="username=tom"document.cookie="id=100"

存數(shù)組或?qū)ο笮枰M行轉(zhuǎn)換

JSON.stringify() : 將對象轉(zhuǎn)化為字符串類型
JSON.parse() : 將字符串轉(zhuǎn)化為對象類型

設置cookie有效期

var d = new Date();
d.setDate( d.getDate() + 2 ); //有效期兩天
document.cookie="username=tom;expires="+d

獲取cookie

document.cookie

刪除cookie

document.cookie="username=''"http://設置為空

或者

document.cookie="username='';expire=-1"http://設置時間為負數(shù)

封裝cookie

設置cookie

function setCookie(k,v,d){
    if(d){
         var d = new Date();
         d.setDate( d.getDate() + d );
         document.cookie=k+'='+v + ";expires="+d;
    }else{
         document.cookie=k+'='+v;
    }
}

獲取cookie

function getCookie(k){
   if(document.cookie){
       var cookie = document.cookie;
       var arr = cookie.split('; ');
       for(var i = 0; i < arr.length; i++){
           var items = arr[i].split('=');
           if(items[0]==k){
           return items[1]
           }
       }
   }
   return "";
}

刪除cookie

function removeCookie(k){
   setCookie(k," ",-1);
}

cookie實現(xiàn)注冊登錄核心點：

1、注冊頁面存儲cookie成功跳轉(zhuǎn)到登錄頁面
2、登錄頁面點擊登錄按鈕去cookie中進行用戶名和密碼匹配

php操作cookie(了解)

通過setcookie函數(shù)進行操作：

setcookie ( string $name [, string $value = ";"; [, int $expires = 0 [, string $path = ""[, string $domain = "" [, bool$secure = FALSE [, bool $httponly = FALSE ]]]]]] )

php設置cookie

cookie注意問題

當設置cookie后，向服務器發(fā)起的每一次新請求，瀏覽器都會將之前保存的Cookie信息通過Cookie請求頭部再發(fā)送給服務器，其目的為了識別是同一個客戶端。
Path。 cookie訪問路徑。如果cookie設置的所在路徑為"/"、則cookie在整個域中都可用。如果cookie設置的所在路徑為/foo/則cookie僅在/foo目錄及其所有子目錄可用，如/foo/bar/目錄可訪問。不設置路徑默認是當前目錄。即cookie是不能跨目錄訪問。
httpOnly。設置為則只能通過HTTP協(xié)議訪問cookie,意味著無法通過JS來訪問cookie,這可有效減少XSS的攻擊。
XSS攻擊--百度搜索
Cookie中最好不要放敏感數(shù)據(jù)，因為用戶可以篡改。

點擊下方可進入我的個人博客

我的個人博客

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

HTTP及Cookie

HTTP及Cookie

HTTP協(xié)議介紹

URL

URL基本構(gòu)成

HTTP最大特點：無狀態(tài)。

HTTP消息的結(jié)構(gòu)

請求（Request）

響應（Response）

狀態(tài)碼

get和post區(qū)別

COOKIE

cookie基本概念

cookie操作

js操作cookie設置

封裝cookie

cookie實現(xiàn)注冊登錄核心點：

php操作cookie(了解)

cookie注意問題

點擊下方可進入我的個人博客

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

HTTP及Cookie

HTTP協(xié)議介紹

URL

URL基本構(gòu)成

HTTP最大特點：無狀態(tài)。

HTTP消息的結(jié)構(gòu)

請求（Request）

響應（Response）

狀態(tài)碼

get和post區(qū)別

COOKIE

cookie基本概念

cookie操作

js操作cookie設置

封裝cookie

cookie實現(xiàn)注冊登錄核心點：

php操作cookie(了解)

cookie注意問題

點擊下方可進入我的個人博客

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

HTTP最大特點：無狀態(tài)。