1.前端網絡所有筆記

網絡所有筆記

 

# 向瀏覽器的地址欄中輸入一個url按回車以後，網絡中都會發生什麼？

 

答：

1.看瀏覽器的緩存

 

2.看本機的host

C:/windows/system32/drivers/etc/host

127.0.0.1 localhost

 

3.家裏路由器，上級路由，城市的LDNS服務器，繼續向上級的DNS服務器找，直到找到GDNS服務器

 

# HTTP協議簡介

 

- HTTP協議分爲兩個部分

1.請求 Request

    請求頭：

        請求方式：GET、POST...

        路徑：url

        協議版本：HTTP/1.1

    數據體

2.響應 Response

 

- GET請求和POST請求的區別

1.是基於什麼前提的？若什麼前提都沒有，不使用任何規範，只考慮語法和理論上的HTTP協議

    GET和POST幾乎沒有任何區別，只有名字不同

 

2.如果基於RFC規範的

    1).理論上(Specification)：GET和POST具備相同的語法，可是有不一樣的語義。GET是用來獲取數據的，POST是用來發送數據的，其餘方面沒有區別。

    2).實現上的(Implementation)：各類瀏覽器，就是這個規範的實現者。

        常見的不一樣：

            a.GET的數據在URL是可見的。POST的請求不顯示在URL中

            b.GET請求對長度是有限制的。POST的請求長度無限制

            c.GET請求的數據能夠收藏爲書籤，POST請求到的數據不可收藏爲書籤

            d.GET請求後，按後退按鈕、刷新按鈕無影響。POST請求數據會被從新提交

            e.GET編碼類型：application/x-www-form-url，POST的編碼類型有不少種：

                encodeapplication/x-www-form-urlencoded

                multipart/form-data

            f.GET歷史參數會被保留在瀏覽器裏，POST不會保存在瀏覽器中

            g.GET只容許ASCII。POST沒有編碼限制，容許發二進制

            h.GET與POST相比，GET安全性較差，由於所發的數據是URL的一部分

 

# Cookie與Session

- Cookie

1.若咱們用JS的變量來存數據，那麼在頁面關閉的時候，數據就消失了

2.保持登陸狀態是怎麼作到的呢？

 

按照正常的HTTP協議來講，是作不到的

由於HTTP協議，上下文無關協議。

 

3.因此說前端頁面上，有能夠持久化存儲數據的東西，一旦登錄成功，就記載在這個裏面。這就是Cookie

    Cookie是有限制的。

    Cookie是存在瀏覽器裏的，不是存在某個頁面上的。

    Cookie是能夠長期存儲的。

    Cookie即便是保存在瀏覽器中，也是存放在不一樣的域名下的。

 

4.登陸百度過程

    1).初始狀態：沒有登錄

    2).訪問百度的登陸，輸入用戶和密碼

    3).若用戶名和密碼是正確的，百度的後端回想這個域名下，設置一個Cookie。寫入用戶的基本信息（加密的）

    4).之後每一次向百度發送請求，瀏覽器都會自動帶上這個Cookie

    5).服務端（後端）看到了帶有ID的Cookie，就能夠解析這個加密的ID，來獲取到這個用戶自己的ID

    6).若能獲取到自己的ID，那麼就證實這個用戶已經登錄過了，因此後端能夠繼續保留用戶的信息。

缺點：若某個壞人，複製了我瀏覽器裏的Cookie，他就能夠在他的電腦上登陸個人帳號了

 

- Session

1.Session信息是存儲在服務器上的，Cookie信息是存儲在瀏覽器上的

 

數據存在Session上也有缺點：

若用戶量很是大，上億的用戶。

在用戶量很大的時候，服務端很耗資源

由於後端不止一臺服務器，用戶的登陸信息，通常只存在一臺服務器上。

由於用戶的登陸操做，在哪臺機器上執行的，就通常存在哪臺機器上。

須要經過反向代理。（輪詢，IP哈希）

 

XSS注入攻擊，就是針對Cookie進行的攻擊。

 

- 發送網絡請求

1.在瀏覽器中直接輸入網址（沒法用代碼控制）

2.location.href="url"，能夠發出網絡請求，可是頁面會發生跳轉（頁面會跳轉）

3.帶有src屬性的標籤，請求是能夠發出的，服務端能夠處理的並返回，可是返回後，可否被應用還要看瀏覽器（頁面沒法處理返回結果）

4.帶有href屬性的標籤，請求是能夠發出的，服務端能夠處理的並返回，可是返回後，可否被應用還要看瀏覽器（頁面沒法處理返回結果）

5.帶有action屬性的標籤，例如form表單，也能夠向後端發出請求，可是form表單發出請求後，也會頁面跳轉（頁面會跳轉）

//但願有一種方式，能夠用代碼控制，頁面不會跳轉，服務端返回的結果我能夠用JS繼續處理

6.ajax

 

```js

//要素

//1.請求方式:GET、POST

//2.url

var xhr = null;

if(window.XMLHttpRequest){

    xhr = new XMLHttpRequest();

}else{//兼容IE6

    xhr = new ActiveXObject("Microsoft.XMLHttp");

}

console.log(xhr.readyState);//0:初始化

xhr.open("get", " http://developer.duyiedu.com/edu/testAjaxCrossOrigin");

console.log(xhr.readyState);//1:與服務器創建鏈接

xhr.onreadystatechange = function(){//當readyState改變，執行該函數

    //readyState == 4:請求已完成，已接收到數據

    //status == 200 網絡請求，結果都會有一個狀態碼，來表示這個請求是否正常。200表示請求成功

    //http狀態碼

    //2**：表示成功

    //3**：表示重定向

    //4**：表示客戶端錯誤，404頁面沒找到

    //5**：表示服務端錯誤

    if(xhr.readyState == 4 && xhr.status == 200){

        console.log(xhr.readyState);//2 3 4:請求已完成，已接收到數據

        document.getElementById('test').innerText = xhr.responseText;

        var data = JSON.parse(xhr.responseText);

        console.log(data);

    }

}

xhr.send();//若open第三個參數傳true，或者不傳，爲異步模式。若傳false爲同步模式

```

 

- 跨域

跨域訪問資源

1.哪些東西屬於資源？

    JS文件算嗎？JS文件確定是資源，可是JS文件是容許被跨域請求的

    CSS文件，jpg,png等。src屬性的資源都是能夠被跨域請求的。href資源大部分都是能夠被跨域請求的。

2.哪些資源算是跨域請求的資源

    1.後端接口的數據

    2.其餘域的Cookie

    3.其餘域的緩存

3.什麼是其餘的域？怎樣算是跨域？

    頁面自己：有協議（http/https），域名，端口

    要請求的數據： http://www.baidu.com:80

    協議，域名，端口號這三個，有任意一個不同就算跨域。

 

4.跨域這個行爲，發生在哪裏？

答案：

    1.即便跨域了（協議、域名、端口號不同），請求也能夠發出

    2.服務器端也是能夠接收的

    3.服務器端也是能夠正常處理的

    4.服務器端也是能夠正常返回數據的

    5.瀏覽器也能接收到這些數據

    6.接收到以後，發現當前頁面的域和請求的域不一樣，因此斷定爲跨域

    7.咱們的代碼在這等着結果，可是由於瀏覽器斷定跨域了，uhuibajieguo傳遞給咱們的代碼

5.雖然跨域了，可是咱們依然須要這個數據，怎麼辦？

    解決跨域問題：

        1.後端（別人家的）是否配合咱們進行跨域

            1.JSONP（正常狀況下，返回的數據都是JSON格式，JSONP是一種特殊的格式

            2.後端設置Access-Control-Allow-Origin屬性以支持跨域

        2.後端不配合咱們進行跨域

            1.iframe（缺點：只能顯示，不能控制）

            2.經過後端代理（本身的後端）

 

- JSONP

```js

//jsonp格式哪裏特殊？

//1.發送的時候會帶上一個參數callback

//2.返回的結果不是json，而是 callback名+(json數據)

$.ajax({

    url:' http://developer.duyiedu.com/edu/testJsonp',

    type:'get',

    dataType:'jsonp',

    success:function(data){

        console.log(data);

    }

});

//jsonp跨域，只能使用get方法，若咱們設置的是POST方法，jQuery會自動轉爲get方法。

 

//是否是在jsonp裏面咱們只能使用get方法？是否是咱們設置的POST方法都會轉爲get方法？

//不是，jQuery會先判斷是否同源，若同源，那麼設置的是get就是get，設置的POST就是POST;若不是同源，不管設置的是什麼，都改成get。

```

 

- JSONP原理

```js

//想從一個接口獲取一個數據

//可是這個接口和當前頁面不是同源的。（也就是跨域了）

//可是這個接口是支持JSONP的

//script標籤有src屬性，能夠發出網絡請求

//script標籤，雖然能夠引用其餘域的資源，瀏覽器不限制。可是瀏覽器會將返回的內容，做爲JS代碼執行。

 

//JSONP原理：

//1.判斷請求與當前頁面的域，是否同源，若同源則發送正常的ajax，就沒有跨域的事情了

//2.若不一樣源，生成一個script標籤。在生成一個隨機的callback名字

//3.設置script標籤的src，設置爲要請求的接口

//4.將callback做爲參數拼接在後面。

//-------以上是前端部分

 

//5.後端接受到請求後，開始準備要返回的數據

//6.後端拼接數據，將要返回的數據用callback的值和括號包裹起來

//      例如：callback=asd123456,要返回的數據是{"a":1,"b":2},

//      就要拼接爲asd12345({"a":1,"b":2});

//7.將內容返回

//--------以上是後端部分

//8.瀏覽器接收到內容，會當作js代碼執行

//9.從而執行名爲asd123456()的方法，這樣咱們就接收到了後端返回給咱們的對象

 

var $ = {

    ajax: function(options){

        var url = options.url,

            type = options.type,

            dataType = options.dataType;

        //判斷是否同源

        //獲取目標url的域

        var targetProtocol = "";//目標接口的協議

        var targetHost = "";//目標接口的host，host是包含域名和端口的

        //若url不帶http，那麼訪問的必定是相對路徑，相對路徑必定是同源的。

        if(url.indexOf("http://") == 0) || url.indexOf("https://") == 0){//絕對路徑

            var targetUrl = new URL(url);

            targetProtocol = targetUrl.protocol;

            targetHost = targetUrl.host;

        }else{//相對路徑

            targetProtocol = location.protocol;

            targetHost = location.host;

        }

        //首先判斷是否爲jsonp，由於不是jsonp不用作其餘的判斷，直接發送ajax

        if(dataType == 'jsonp'){

            //要看是否同源

            if(location.protocol == targetProtocol || location.host == targetHost){

                //此處省略。由於同源，jsonp會當作普通的ajax請求

            }else{//不一樣源，跨域

                //隨機生成一個callback

                var callback = "cb" + Math.floor(Math.random() * 1000000);

                //給window上添加一個方法

                window[callback] = options.success;

                //生成script標籤

                var script = document.createElement("script");

                if(url.indexOf("?") > 0){//表示已經有參數了

                    script.src = url + "&callback=" + callback;

                }else{//表示沒有參數

                    script.src = url + "?callback=" + callback;

                }

                script.id = callback;

                document.head.appendChild(script);

            }

        }

    }

}

 

$.ajax({

    url:" http://developer.duyiedu.com/edu/testJsonp",

    type:'get',

    dataType:'jsonp',

    success:function(data){

        console.log(data);

    }

})

```

 

以上是markdown格式的筆記