前端基礎30：HTTP和ajax

1.如何搭建博客？

• 能夠利用第三方平臺
• 發佈到github上（只能發佈靜態頁面）
• 本身購買域名和服務器，而後進行頁面優化和推廣

2.利用購買域名和服務器的方式搭建博客

• 買（租）服務器 （阿里雲買服務器） 有了服務器後經過ftp（FileZilla）將本地項目傳送到服務器上
• 購買域名 （萬網） 經過DNS數據庫解析域名，將域名和服務器IP地址綁定 www.baidu.cn 125.39.174.202
• 開發項目，把項目發佈到對應的端口號（0~65535）的服務器的內存裏

3. 在瀏覽器的地址欄中輸入url地址並按回車，這個過程發生了什麼？

• 經過http協議 客戶端向服務器端發起請求
• 查看url中的域名，將域名解析成服務器ip地址，找到對應的服務器
• 查看端口號，找到對應的服務，在這個服務中經過路徑找到對應的頁面
• 服務器將對應的內容經過response響應返回給客戶端
• 客戶端拿到數據後,按照以下步驟將數據在頁面顯示出來
  • 1.將全部標籤生成DOM Tree
  • 2.代碼自上而下執行，當遇到 script/link/img...會按照上面步驟從新向服務器發起請求
  • 3.進行動態綁定數據（ejs模板 <%=.. >,字符串拼接的方式）處理
  • 4.瀏覽器進行渲染和繪製

什麼是http事務？客戶端請求+服務器響應成功，這樣完整過程稱爲一條http事務
客戶端向服務器發起請求時會攜帶一些數據，服務器端響應時也會向客戶端發送一些數據，這些數據詳細的信息稱爲http報文

詳細講解url地址 URL:統一資源定位符 URI:統一資源標識符 （一般指的就是URL） URN:統一資源名稱 (用的不多) URI = URL+URN

1.協議 www.baidu.cn/course/inde… http 超文本傳輸協議 默認端口號 80 https http+ssL 多了一個加密協議（一般網站涉及到支付或者用戶隱私等） 默認端口號8080 ftp 文件傳輸協議 （將本地項目傳輸到服務器上） 默認端口號 21

2.域名 www.baidu.cn 一級域名 online.baidu.cn 二級域名 html5train.online.baidu.cn 三級域名

3.端口號 至關於房間號 範圍是0~65535

4. 路徑 (端口號後面,問號前面) 經過路徑從服務器查找到對應的文件 /course/index.html

5.問號傳參 格式：key = value 每個參數之間以&鏈接 ?name=zf&age=9
1.把客戶端數據經過傳參方式發送給服務器端 2.讓服務端返回指定參數的數據

6.hash值 (跟http事務無關,跟錨點定位或路由跳轉有關) js獲取：window.location.hash

【http報文組成】

1. General 通用首部
   • Request URL: www.baidu.cn/ 請求的地址
   • Request Method: GET 請求的方式
   • Status Code: 200 OK http狀態碼
   • Remote Address: 125.39.174.202:80 主機的ip地址和端口號 2.Request Headers 請求頭
   • Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8 接收的數據格式
   • Accept-Encoding: gzip, deflate 壓縮的格式
   • Accept-Language: zh-CN,zh;q=0.9 語言
   • Cache-Control: no-cache 不緩存
   • Connection: keep-alive 長連接
   • Cookie: __cfduid=d11b7d024136e2b856679f99aaedeeedf1538033148; __root_domain_v=.baidu.cn; _qddaz=QD.dgi18u.qwjmzi.jmk98609; pgv_pvi=3035234304; tencentSig=9047068672; _qdda=3-1.1; Hm_lvt_5ca1e1efc366a109d783a085499d59d9=1539656707,1539749036,1540029419,1540260952; Hm_lvt_24b7d5cc1b26f24f256b6869b069278e=1540260983; Hm_lvt_418b1c90fa35dc210dd5d2284d9f9f29=1539746411,1540029388,1540259896,1540262296; _qddab=3-qcrur5.jnl4ei2u; IESESSION=alive; pgv_si=s2276654080; Hm_lpvt_418b1c90fa35dc210dd5d2284d9f9f29=1540265546; - _qddamta_2852156370=3-0 記錄一些信息，會發送到服務器端
   • Host: www.baidu.cn 域名
   • Pragma: no-cache
   • Upgrade-Insecure-Requests: 1
   • User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36 瀏覽器信息

3.Response Headers 響應頭

• Connection: keep-alive 長連接
• Content-Encoding: gzip 壓縮的格式
• Content-Type: text/html 響應的數據格式
• Date: Tue, 23 Oct 2018 03:41:30 GMT 服務器端響應式時間 格林尼治時間
• Last-Modified: Wed, 19 Sep 2018 08:41:34 GMT 緩存有關
• Server: yunjiasu-nginx 經過nginx啓動web服務

4.請求主體和響應主體

• Query String Parameters 請求體的內容

• response下看到響應的內容

• mime類型數據（對象類型的數據/子類型的數據）：

  • text/html html標籤
  • text/plain 文本
  • application/json json格式的數據
  • application/x-www-form-urlencoded 表單元素的數據
  • multipart/form-data 上傳多個文件
  • image/gif gif圖片
  • image/jpg jpg圖片
  • application/zip 壓縮的格式
  • audio/x-wav 設置音頻文件格式
  • video/mpeg 設置視頻的文件格式

ajax(async javascript and xml)

• 在不刷新頁面的前提下，局部更新數據

-【請求的方式】

• GET 向服務器獲取響應的內容

• HEAD 向服務器獲取響應頭的內容

• DELETE 讓服務器刪除某些內容

• POST 把發送的內容放在請求主體裏發送給服務器 經過增長內容時用post方式

• PUT 把發送的內容放在請求主體裏發送給服務器,返回的狀態只有202

• 一般修改內容用put方式

• OPTIONS 是一種探測性請求，客戶端和服務器端鏈接後，查看服務器端支持的請求方式有哪些，而後再發起支持請求方式的請求

• 【get系列】

  • get|head|delete

• 【post系列】

  • post|put

• 【get系列請求方式和post請求方式有什麼不一樣】

• get系列數據是放在url地址後面發送給服務器，post系列是把數據放在請求體裏發送給服務器

• 發送的數據大小有區別，get系列 chrome 8kb firefox 7kb ie 2kb post系列沒有大小限制

• get系列會有緩存問題，post系列沒有

• post系列請求方式比get系列請求方式安全寫，get系列的數據因爲放在url地址，有可能數據會被劫持

• xhr.readyState 請求狀態狀態碼

  • 0 UNSENT 建立ajax對象,還未發送請求
  • 1 OPENDED 設置請求的地址 執行open後再獲取 發送請求
  • 2 HEADERS_RECEIVED 返回響應頭的內容
  • 3 LOADING 響應主體的內容正在返回
  • 4 DONE 響應成功，數據所有返回

• xhr.status http狀態碼

• 2XX 響應成功

• 3XX - 301 永久轉移 （例如：更改域名，當你仍是訪問老的域名時，永遠轉移到新域名地址） - 302 臨時轉移
  例如：通常用在服務器超負荷運載，當用戶訪問量超過服務器所能承載狀態時，後期訪問的用戶臨時轉移到其餘服務器上 ,又例如：會把圖片臨時轉移到其餘服務器上，以減輕這個服務器的壓力 - 307 臨時重定向
  例如以前網站協議是http,後期更改爲了https協議，當用戶訪問仍是http協議時會臨時重定向到https協議

  • 304 客戶端向服務器端發送請求時，服務端接收請求後，要判斷下以前有沒有返回過，若返回過，直接返回304，讓客戶端從緩存中獲取數據。從緩存中獲取數據比從服務器獲取數據快不少 從緩存中獲取數據有可能獲取的不是最新數據，若想每次獲取的都是最新數據，在請求的地址後面加一個隨機數,例如： www.baidu.cn/wechat/inde… Math.random();

• 4XX 【客戶端問題】

  • 400 參數錯誤
  • 401 權限不夠
  • 404 地址錯誤，頁面找不到

• 5XX 【服務器端問題】

  • 500 未知的服務器錯誤
  • 503 服務器超負荷

xhr的屬性和方法

• xhr.onabort() 停止請求
• xhr.ontimeout = function(){} 設置超時後作些事情
• xhr.timeout = 5000 設置超時時間
• xhr.readyState 請求狀態碼
• xhr.response 目前各個瀏覽器還有兼容性問題
• xhr.responseText 獲取響應的數據（string）
• xhr.responseXML xml格式的數據
• xhr.status http狀態碼
• xhr.statusText 狀態碼的描述信息
• xhr.withCredentials 是否容許跨域 true容許 false 不容許
• xhr.getAllResponseHeaders() 獲取全部的響應頭
• xhr.getResponseHeader() 獲取指定的響應頭
• xhr.overrideMimeType 重寫mime類型

先後端交互調試bug

- NetWork 下 
 - All 全部請求的地址
 - XHR 經過ajax發送的請求，也就是全部的接口地址
 - JS 請求的js文件
 - css 請求的css文件
 - media 音視頻
複製代碼

• font 字體圖標 職責問題 哪些屬於前端問題，哪些屬於後端問題
• 問號傳參，傳的參數錯誤 [前端問題]
• 請求體的數據提交錯誤（接口文檔會指定key,而value就是客戶端須要提交內容） 【前端問題】
• 請求接口地址錯誤[前端問題]
• 服務端返回數據錯誤或者返回的數據跟接口文檔指定的不同[後端的問題]
• 返回狀態碼5XX [後端的問題]