1 前端網路全部筆記

2022-05-29 12:42:12 字數 4530 閱讀 9803

網路全部筆記

# 向瀏覽器的位址列中輸入乙個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請求資料會被重新提交

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即使是儲存在瀏覽器中,也是存放在不同的網域名稱下的。

1).初始狀態:沒有登陸

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

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

xhr.open("get", "");

console.log(xhr.readystate);//1:與伺服器建立連線

xhr.onreadystatechange = function()

}xhr.send();//若open第三個引數傳true,或者不傳,為非同步模式。若傳false為同步模式

```- 跨域

跨域訪問資源

1.哪些東西屬於資源?

js檔案算嗎?js檔案肯定是資源,但是js檔案是允許被跨域請求的

css檔案,jpg,png等。src屬性的資源都是可以被跨域請求的。href資源大部分都是可以被跨域請求的。

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

1.後端介面的資料

2.其他域的cookie

3.其他域的快取

3.什麼是其他的域?怎樣算是跨域?

頁面本身:有協議(http/https),網域名稱,埠

要請求的資料:

協議,網域名稱,埠號這三個,有任意乙個不一樣就算跨域。

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(

});//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,要返回的資料是,

//      就要拼接為asd12345();

//7.將內容返回

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

//8.瀏覽器接收到內容,會當做js**執行

//9.從而執行名為asd123456()的方法,這樣我們就接收到了後端返回給我們的物件

var $ = else

//首先判斷是否為jsonp,因為不是jsonp不用做其他的判斷,直接傳送ajax

if(datatype == 'jsonp')elseelse

script.id = callback;}}

}}$.ajax(

})```

以上是markdown格式的筆記

前端筆記1

doctype html 文件宣告 這個說明是html5版本 zh cn 中文 keywords content html,css,前端 description content 這是乙個不錯的 執行後三秒將頁面重定向到另乙個 refresh content 3 url title head 自結束標...

投票前端全部邏輯

檢視排行榜 vote rank on click function 檢視事蹟 view btn on click function 發起投票 vote btn on click function var vote option ids select each function index else ...

前端複習 網路(1 概念)

現在前後端分離比較常見,所以對資料的處理要格外的熟練,複習ing 說到網路部分,我們仍然離不開ajax,對這一部分我是又愛又恨,但是我在看其他文章的時候看到過這樣一句話 不掌握的網路的前端工程師,就是乙個ui 這句話深深地提醒著我。fighting!請求頁面時大概的流程 1.輸入 對應伺服器,也對應...