HTTP和AJAX重點知識

時間  2019-11-24
標籤 http ajax 重點 知識 欄目 HTTP/TCP 简体版
原文   原文鏈接

成爲棧開發工程師須要掌握的技術棧

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

什麼是全棧開發工程師？

全棧（全站）開發工程師(FULL-STACK)：先後端均可以本身獨立完成開發javascript

[前端]php

HTML（5）+ CSS（3）html

JAVASCRIPT（JQ，VUE，REACT）前端

[後端]java

Java (JSP)node

Pythonmysql

Nodelinux

PHPwebpack

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

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上傳

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

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

[Request 請求階段]

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

  2. 經過找到的外網IP，找到對應的服務器

  3. 經過在地址欄中輸入的端口號（沒輸入是由於不一樣協議有本身的默認端口號），找到服務器上發佈的對應的項目

    [Response 響應階段]

  4. 服務器獲取到請求資源文件的地址，例如：/books/index.html,把資源文件中的源代碼找到

  5. 服務器端會把找到的源代碼返回給客戶端（經過HTTP等傳輸協議反回的）

    [瀏覽器自主渲染]

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

    客戶端和服務器端交互(通訊)模型

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 單頁面開發）
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程