Ajax-06
GET和POST的區別
- 字面意思不同
- GET 是獲取意思。想從服務器獲取數據，用GET方式的請求
- POST是郵遞、郵寄意思。如果提交數據到服務器，用POST方式
- 請求參數位置不同
- GET 請求參數會和url拼接到一起，形如
api/getbooks?id=2&age=3 - POST 的請求參數，也叫做提交的數據，它不會和url拼接到一起
- GET 請求參數會和url拼接到一起，形如
- 瀏覽器工具查看請求參數的位置不一樣
- GET請求，會在url上查看到請求參數；在
Headers/Query String Parameters也可以查看。 - POST方式，只能在
Headers/Form Data位置查看提交的數據
- GET請求，會在url上查看到請求參數；在
- 攜帶的數據量大小不一樣
- GET方式能夠攜帶少量的數據，一般瀏覽器允許的url的長度是2k
- POST方式能夠攜帶的數據量大小沒有限制。
- 上傳文件
- 上傳文件只能使用POST方式。
- 本質的區別
- GET方式不會對服務器的數據做出改變
- POST方式非常可能對服務器的數據做出改變
如果后端同學提供的接口沒有使用正確的請求方式，我們前端也沒有辦法。
同步和異步
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方式 才有請求體
- GET方式
- xhr.send(請求體); 客戶端提交的數據就是請求體
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（）服務器內部錯誤
 屬性)
