HTTP和AJAX重點知識

無敵UFO發表於2019-04-10
HTTP

成為棧開發工程師需要掌握的技術棧

如何成為一名初級全棧開發工程師

什麼是全棧開發工程師？

全棧（全站）開發工程師(FULL-STACK)：前後端都可以自己獨立完成開發

[前端]

HTML（5）+ CSS（3）

JAVASCRIPT（JQ，VUE，REACT）

[後端]

Java (JSP)

Python

Node

PHP

C#（.net->dot net） (ASP.NET)

C

...

[資料庫]

mysql

sql server

oracle

mongodb （和node結合緊密的）

...

[自動化]

git / svn

webpack(基於NODE執行的)

伺服器部署工具（iis/Apache/nginx...）

linux作業系統

https://insights.stackoverflow.com/survey/2018

真實專案的部署流程(以及一點職業發展建議)

前端和後端是如何通訊的？

前端：客戶端

後端：伺服器端

所謂的全棧，其實就是自己可以實現客戶端和服務端程式的編寫，而且還可以實現兩端之間的通訊

職業規劃建議：

培養自己的人脈圈，建立自己的影響力

  1. 壯大自己的綜合能力

  2. 經常參加一些活動

  3. 開放分享（做講師分享自己的智慧，寫自己的個人部落格做技術分享）

  4. 自己做一個技術部落格

    • 本地開發（當前專案可以在本地預覽）

    • 部署到伺服器上，讓別人可以通過域名或者外網訪問

      1. 購買一臺伺服器（阿里雲獨立主機，虛擬伺服器等）https://wanwang.aliyun.com
      2. 購買域名
      3. 把自己做的專案傳到伺服器上
      4. 讓域名和伺服器關聯(DNS解析：域名解析)
      5. 在伺服器上釋出或部署我們的專案（iis，nginx，apache...）

    • 做一些推廣（SEO推廣，友情連結交換，技術文章持續更新）

      使用FileZilla進行FTP上傳

HTTP和AJAX重點知識

客戶端和伺服器端是如何通訊的？

經典面試題：當我們在瀏覽器地址中輸入一個URL地址，到最後看到頁面，中間都經歷了哪些事情？

[Request 請求階段]

  1. 首先根據客戶端輸入的域名，到DNS伺服器上進行反解析（通過伺服器找到對應外網IP）

  2. 通過找到的外網IP，找到對應的伺服器

  3. 通過在位址列中輸入的埠號（沒輸入是因為不同協議有自己的預設埠號），找到伺服器上釋出的對應的專案

    [Response 響應階段]

  4. 伺服器獲取到請求資原始檔的地址，例如：/books/index.html,把資原始檔中的原始碼找到

  5. 伺服器端會把找到的原始碼返回給客戶端（通過HTTP等傳輸協議反回的）

    [瀏覽器自主渲染]

  6. 客戶端接收到原始碼後，會交給瀏覽器的核心（渲染引擎）進行渲染，最後有瀏覽器繪製出對應的頁面

    客戶端和伺服器端互動(通訊)模型

HTTP和AJAX重點知識

HTTP等傳輸協議講解

URL，URI，URN

URI：統一資源識別符號

URL：統一資源定位

URN： 統一資源名稱

URI = URL + URN

一個完整的URL包含很多部分：

例如：https://www.haiyang.com/stu/index.html?name=hy&age=6#good

第一部分：傳輸協議

  • 傳輸協議是用來完成客戶端和服務端資料（內容）傳輸的，類似於快遞小哥，負責把客戶和商家的物品來回傳遞

    1. 客戶端不僅可以向伺服器傳送請求，而且還可以把一些引數傳遞給伺服器

    2. 伺服器端也可以把內容返回給客戶端

      客戶端和伺服器端傳輸的內容總稱為HTTP報文，這些報文資訊都是基於傳輸協議完成傳輸的，客戶端傳遞給伺服器叫做請求（Request），伺服器端返回給客戶端叫做響應（Response），request+response兩個階段統稱為一個HTTP事務（事務：一件完整的事情）

      HTTP事務：

      1. 當客戶端向伺服器端傳送請求。此時客戶端和伺服器端會建立一個傳輸通道（連結通道），傳輸協議就是基於這個通道把資訊進行傳輸的
      2. 當伺服器端接收到請求資訊，把內容返回給客戶端後，傳輸通道會自動關閉

      傳輸協議分類：

      http:超文字傳輸協議（客戶端和伺服器端傳輸的內容除了文字以外，還可以傳輸圖片，音訊，視訊等檔案流【二進位制編碼/BASE64碼】，以及傳輸XML格式的資料等），是目前市場上應用最廣泛的傳輸協議

      https: http ssl，他比http更加安全，因為資料內容的傳輸通道是經過ssl加密的（他需要在伺服器端進行特殊的處理），所以涉及資金類的網站一般都是https協議的

      ftp:資原始檔傳輸協議，一般用於客戶端把資原始檔（不是程式碼）上傳到伺服器端，或者從伺服器端下載一些資原始檔（一般ftp傳輸的內容會比http這類協議傳輸的內容多）

HTTP報文的一些核心知識

HTTP報文

  1. 起始行

    請求起始行

    響應起始行

  1. 首部（頭）

    請求頭：內建請求頭，自定義請求頭

    響應頭：內建響應頭，自定義響應頭

    通用頭：請求和響應都有的

  1. 主體

    請求主體

    響應主體

請求xxx都是客戶端設定的資訊，服務端獲取這些資訊

響應xxx都是伺服器端設定的資訊，客戶端用來接收這些資訊

在谷歌瀏覽器控制檯Network選項中，我們可以看見當前客戶端和伺服器端互動的全部資訊

總結：

客戶端傳遞給伺服器端資料

  1. URL問號傳遞引數
  2. 設定請求頭
  3. 設定請求主體

伺服器端返回給客戶端內容

  1. 設定響應頭（例如伺服器時間）
  2. 設定響應主體

第二部分：域名

設定域名其實就是給不好記憶的伺服器外網ip設定了一個好記的名字

一級域名（頂級域名）：qq.com

二級域名：www.qq.com，sports.qq.com，。。。

三級域名：kkk.sports.qq.com

第三部分：埠號

在伺服器釋出專案的時候，我們可以通過埠號區分當前伺服器上的不同專案

一臺伺服器的埠號取值範圍：0-65535之間，如果電腦上安裝了許多程式，有一些埠號就是被佔用了

一個IP地址的埠可以有65536（2^16）個，埠號只有整數，範圍是從0 到65535（2^16-1）。

埠有三個型別：

\1. 公認埠（Well Known Ports）是眾所周知的埠號，範圍從0到1023。

\2. 動態埠（Dynamic Ports）範圍是從49152到65535。之所以稱為動態埠，是因為它 一般不固定分配某種服務，而是動態分配。

\3. 註冊埠（RegisteredPorts）範圍是從1024到49151，分配給使用者程式或應用程式。這些程式主要是使用者選擇安裝的一些應用程式，而不是已經分配好了公認埠的常用程式。這些埠在沒有被伺服器資源佔用的時候，可以用使用者端動態選用為源埠。

HTTP: 預設埠號80

HTTPS：預設埠號443

FTP：預設埠號21

對於上述三個埠號其實是很重要的，如果被其他程式佔用，我們就不能使用了，所以在伺服器上一般是禁止安裝其他程式的

第四部分：請求資源的檔案路徑名稱

/boos/index.html

在伺服器中釋出專案的時候，我們一般都會配置一些預設文件，使用者即使不輸入請求檔案的名稱，伺服器也會找到預設文件（一般預設文件都是 index/default ...）

我們通常為了做SEO優化，會把一些動態頁面的地址（xxx.py，xxx.jsp，xxx.php ...）進行偽URL重寫（需要伺服器處理的）

例如：https://item.jd.com/342535.html

不可能 有一個商品就寫一個詳情頁，肯定是同一個詳情頁做不同的處理

  1. 第一種方案：

    由後臺語言根據詳情頁模板動態生成具體的詳情頁面

  2. 第二種方案：

    當前頁面就是一個頁面，例如：detail.html/detail.php，我們做詳情頁面的時候，開發是按照detail.html?id=787878來開發的。但是這種頁面不方便做SEO優化，此時我們把真實的地址進行重寫，重寫為我們看到的787878.html

第五部分：問號傳參

?name=hy&age=6

把一些值通過xxx=xxx的方式，放在一個URL的末尾，通過？傳遞引數

【作用】

  1. 在AJAX請求中，我們可以通過問號傳遞引數的方式，客戶端把一些資訊傳遞給伺服器，伺服器根據傳遞資訊的不一樣，返回不同的資料
// $.ajax(url,{});
// $.get(url,function(){});對於AJAX請求的特殊寫法，原理還是基於AJAX方法實現的  $.post / $.script

$.ajax({
    url: 'getPersonInfo?id=11'
    ...
});

// 當前案例，我們傳遞給伺服器的編號是多少，伺服器就會把對應編號的人員返回
複製程式碼
  1. 消除AJAX請求中GET方式快取
$.ajax({
    url: 'xxx?_=0.3434',
    method: 'get'
});
// 我們會在請求URL末尾追加一個隨機數 _=隨機數，保證每一次請求的URL地址都是不一樣的，以此來消除GET請求遺留的快取問題
複製程式碼
  1. 通過URL傳遞引數的方式，可以實現頁面之間資訊的通訊，例如：我們有兩個頁面A/B，A是列表頁面，B是詳情頁面，點選A中的某一條資訊，進入到唯一的詳情頁B，如何展示不同的資訊，這種操作就可以基於URL問號傳遞引數來實現

例如：

sports.qq.com/kbsweb/game…

sports.qq.com/kbsweb/game…

在進入到game.html頁面的時候，我們可以獲取URL傳遞的引數值，根據傳遞引數值的不一樣，從伺服器端獲取不同的資料展示

在列表頁面進行頁面跳轉的時候，我們需要記住的是跳轉的同時傳遞不同的引數值

<a href='game.html?mid=xxx'

第六部分：HASH值

/#xxx

URL末尾傳遞的#號就是HASH值（）雜湊值

【作用】

  1. 頁面中錨點定位
  2. 前端路由（SPA 單頁面開發）

相關文章