Ajax-06

GET和POST的區別

• 字面意思不同
  • GET 是獲取意思。想從服務器獲取數據，用GET方式的請求
  • POST是郵遞、郵寄意思。如果提交數據到服務器，用POST方式
• 請求參數位置不同
  • GET 請求參數會和url拼接到一起，形如 api/getbooks?id=2&age=3
  • POST 的請求參數，也叫做提交的數據，它不會和url拼接到一起
• 瀏覽器工具查看請求參數的位置不一樣
  • GET請求，會在url上查看到請求參數；在Headers/Query String Parameters也可以查看。
  • POST方式，只能在Headers/Form Data位置查看提交的數據
• 攜帶的數據量大小不一樣
  • GET方式能夠攜帶少量的數據，一般瀏覽器允許的url的長度是2k
  • POST方式能夠攜帶的數據量大小沒有限制。
• 上傳文件
  • 上傳文件只能使用POST方式。
• 本質的區別
  • GET方式不會對服務器的數據做出改變
  • POST方式非?？赡軐Ψ掌鞯臄祿龀龈淖?/li>

如果后端同學提供的接口沒有使用正確的請求方式，我們前端也沒有辦法。

同步和異步

Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML）。

和異步相對的是同步。

說起JS中的同步和異步，需先了解 JS 的單線程。

JS單線程

JS的單線程，指的是執行代碼的時候，只能從前向后（從上到下），一個一個任務去執行。前面的任務沒有執行完，后面的任務只能等待。

// 寫一個函數，函數的執行需要大量的時間 // 1 1 2 3 5 8 13 21 .... 斐波那契數列 // 要求給出一個位置，計算得出該位置的數字是什么？ function fn (n) {if (n === 1 || n == 2) {return 1;}return fn(n-1) + fn(n-2); }console.log(111); console.log( fn(43) ); console.log(222); console.log(222); console.log(222); console.log(222); console.log(222);

同步

同步，即同步任務，指的就是JS代碼需從上到下依次執行，前面的代碼如果沒有執行完畢，后面代碼的執行只能等待。

特點：阻塞后續代碼的執行。

異步

異步，即異步任務。異步任務的執行比較復雜。比如一段代碼，包含同步和異步任務，具體來說

優先執行同步任務

遇到異步任務，會把異步任務放到隊列中，簡單的理解就是排隊等待

同步任務執行完畢，會按順序執行隊列中的異步任務

多個異步任務之間，可以同時執行。

哪一個異步任務先結束，則優先處理該異步任務的結果。

[

JS中的異步任務列舉

• 定時器
• 事件
• Ajax請求
• 異步讀寫文件（Node中的知識點）
• 查詢MySQL數據庫（Node中的知識點）

初次之外都是同步代碼

Ajax中的異步

Asynchronous – 異步。

console.log(111);let xhr = new XMLHttpRequest(); xhr.onload = function () {console.log(333); }; // xhr.responseType = 'json'; // 同步請求不能設置responseType // open(請求方式， url， true) // 第三個可選參數，默認 true，表示ajax請求是異步請求 // 如果希望發送一個同步的ajax請求，第三個參數設置為false xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks', false); xhr.send();console.log(222);

雖然可以通過open方法的第三個參數，來設置ajax為同步任務，但是強烈不建議這么做

jQuery中，能不能設置ajax的同步或異步：

$.ajax({type: 'GET',url: 'xxx',async: true, // 默認true表示異步。如果設置為false，則表示同步 });

小練習：體會一下異步任務的執行：

console.log(111);// 異步ajax請求，請求書籍數據 --------------------------------- let xhr = new XMLHttpRequest(); xhr.onload = function () {console.log(333); }; xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks'); xhr.send();// 再次發生一個ajax請求 ------------------------------------ let xhr2 = new XMLHttpRequest(); xhr2.onload = function () {console.log(444); }; xhr2.open('GET', 'http://www.liulongbin.top:3006/api/delbook?id=1'); xhr2.send();console.log(222);

HTTP協議（了解）

HTTP協議簡介

• 什么是http協議
  • 超文本傳輸協議
• http協議規定了什么
  • 規定了客戶端和服務器交互數據的時候，數據要遵守的格式。

http請求消息/請求報文

請求報文，指的是客戶端提交給服務器的全部數據。

• 請求行
  • 請求方式
  • 請求url地址
  • 協議及版本
• 請求頭
  • 鍵：值 的形式，一次請求，可能會有很多請求頭
  • Content-Type: ‘application/x-www-form-urlencoded’ / ‘multipart/form-data; xxx’
    • 提交的數據的一種編碼格式（查詢字符串格式 / FormData格式）
  • User-Agent: ‘’
    • 體現了當前客戶端是什么瀏覽器、版本是什么版本
• 請求體
  • xhr.send(請求體); 客戶端提交的數據就是請求體
    • GET方式沒有請求體
    • POST方式 才有請求體

http響應消息/響應報文

• 響應行

  • 協議及版本
  • http狀態碼 （比如， 200）
  • http狀態描述信息 （比如， OK）

• 響應頭

  • Access-Control-Allow-Origin: ‘*’

    • CORS跨域資源共享，服務器設置的響應頭，允許ajax跨域

  • Content-Type: ‘application/json; charset=utf-8’

    • 服務器告訴客戶端，返回的數據是什么格式的，編碼是什么編碼

      $.get(url, data, callback, dataType); - dataType 表示預期服務器返回的類型jQuery如何知道服務器返回的數據類型呢？是根據響應頭中的Content-Type判斷，如果判斷服務器返回的是json格式，所以jQuery內部就會自動調用JSON.parse()將JSON格式的數據轉成JS數組或對象$.get(url, data, function (res) {如果響應頭沒有沒有Content-Type，則res 就是字符串手動指定最后一個dataType為json之后，res就是JS對象 });

• 響應體

  • 服務器返回的主體內容。
  • 就是我們之前所說的，服務器返回的數據。

http響應狀態碼

• 200（OK）表示請求成功
• 201（Created）請求成功，一般用于添加資源成功
• 304 （Not Modified）表示請求的資源沒有修改（第一次請求）
• 400（Bad Request）語法有誤（一般來說，請求參數寫錯了或者請求頭寫錯了）
• 403（Forbidden）訪問成功了，但是服務器告訴你沒有權限訪問
• 404（Not Found）請求的資源，在服務器上不存在，找不到。
• 500（）服務器內部錯誤

總結

以上是生活随笔為你收集整理的Ajax — 第六天的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。