1.背景介紹
什麼是AJAX？
即異步的 JavaScript 和 XML，是一種用於創建快速動態網頁的技術；
傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。
使用AJAX則不需要加載更新整個網頁，實現部分內容更新
2.知識剖析
AJAX
1、什麼是ajax
2、常見的ajax使用場景
3、爲什麼需要使用ajax
4、Ajax的工作原理
5、XMLHttpRequest常用方法及屬性
6、幾種常見的寫法
1、什麼是ajax
AJAX
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
AJAX 是與服務器交換數據並更新部分網頁的藝術，在不重新加載整個頁面的情況下。
2、常見的ajax使用場景
谷歌地圖，甚至一些彈幕，微博的時時更新評論等等
3、爲什麼需要使用ajax
ajax主要是實現頁面和web服務器之間數據的異步傳輸。
簡單來說，不採用ajax的頁面，當用戶在頁面發起請求時，就要進行整個頁面的刷新，刷新快慢取決於服務器的處理快慢。在這個過程中用戶必須得等待，不能進行其他操作。也就是同步的方式。客戶端和服務端傳遞了很多不需要的數據。效率低，用戶體驗差。
a、採用ajax的頁面，可以實現頁面的局部更新，而不是整個頁面的更新；b、並且發起請求後，用戶還可以進行頁面上的其他操作。這就是異步的方式。c、客戶端和服務端間只傳遞需要的數據，效率高，用戶體驗性好。d、並且Ajax引擎在客戶端運行，承擔了一部分本來由服務器承擔的工作，從而減少了大用戶量下的服務器負載。
4、Ajax的工作原理
圖片裏面提到一個xhr，所謂的“XHR”（瀏覽器內置對象”XMLHttpRequest”），也就是Ajax功能實現所依賴的對象，AJAX就是通過瀏覽器的內置對象XHMHttpResquest來發送異步請求的，異步請求不會妨礙客戶端的任何操作。
異步：
XHR相當於是一個通信兵，來負責客戶端與服務器之間的通信傳輸。舉個栗子：
要打仗了，前方陣地（客服端）不可能只等着通信兵（XHR）傳遞消息其他什麼也不幹吧，所以前方陣地還在幹着自己的事情然後派通信兵去請求後方指揮部（服務器）的命令，指揮部下達命令指揮，通信兵再把命令傳到前方陣地，然後前方陣地再執行命令相關的操作（客戶端把數據渲染到頁面），這也就是Ajax的異步原理。
再來說說同步：
所謂的同步就是前方陣地和通信兵一起去向服務器請求數據，直到通信兵請求到數據，我纔開始渲染頁面，在請求的過程中頁面一直是白屏等待的。
5、XMLHttpRequest常用方法
一、open();
XMLHttpRequest.open()方法用於指定 HTTP 請求的參數，或者說初始化 XMLHttpRequest 實例對象。它一共可以接受五個參數。
例：
xhr.open(‘POST’, ‘/carrots-admin-ajax/a/login’, true);
參數:
a, method:用於指定請求的類型 “GET"或者"POST”
b, url:用於請求的地址, 可相對可絕對
c, asyncFlag:指定請求方式爲同步還是異步, true爲異步, false爲同步
二、send();
XMLHttpRequest.send()方法用於實際發出 HTTP 請求。它的參數是可選的，如果不帶參數，就表示 HTTP 請求只包含頭信息，也就是隻有一個 URL，典型例子就是 GET
請求；如果帶有參數，就表示除了頭信息，還帶有包含具體數據的信息體，典型例子就是 POST 請求。
var xhr = new XMLHttpRequest();
var data = ‘name=’ + userVal + ‘&pwd=’ + pwVal;
xhr.open(‘POST’, ‘/carrots-admin-ajax/a/login’, true);
/* POST的請求頭 */
xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
/* 發出HTTP請求 */
xhr.send(data);
注意，所有 XMLHttpRequest 的監聽事件，都必須在send()方法調用之前設定。（send放在最後）
6、XMLHttpRequest常用屬性
一, readyState
XMLHttpRequest.readyState返回一個整數，表示實例對象的當前狀態。該屬性只讀。它可能返回以下值。
0，表示 XMLHttpRequest 實例已經生成，但是實例的open()方法還沒有被調用。
1，表示open()方法已經調用，但是實例的send()方法還沒有調用，仍然可以使用實例的setRequestHeader()方法，設定 HTTP 請求的頭信息。
2，表示實例的send()方法已經調用，並且服務器返回的頭信息和狀態碼已經收到。
3，表示正在接收服務器傳來的數據體（body 部分）。
4，表示服務器返回的數據已經完全接收，或者本次接收已經失敗。
二, onreadystatechange
XMLHttpRequest.onreadystatechange屬性指向一個監聽函數。
通信過程中，每當實例對象發生狀態變化，它的readyState屬性的值就會改變。這個值每一次變化，都會觸發readyStateChange事件。
readystatechange事件發生時（實例的readyState屬性變化），就會執行這個屬性。
另外，如果使用實例的abort()方法，終止 XMLHttpRequest
請求，也會造成readyState屬性變化，導致調用XMLHttpRequest.onreadystatechange屬性。
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
// 通信成功時，狀態值爲4
if (xhr.readyState === 4){
if (xhr.status === 200){
console.log(xhr.responseText);
} else {
console.error(xhr.statusText);
}
}};
xhr.open(‘GET’, ‘/endpoint’, true);
xhr.send(null);
三, responseText
XMLHttpRequest.responseText屬性返回從服務器接收到的字符串，該屬性爲只讀。只有 HTTP 請求完成接收以後，該屬性纔會包含完整的數據
四, status
XMLHttpRequest.status屬性返回一個整數，表示服務器迴應的 HTTP
狀態碼。一般來說，如果通信成功的話，這個狀態碼是200；如果服務器沒有返回狀態碼，那麼這個屬性默認是200。請求發出之前，該屬性爲0。該屬性只讀。
200, OK，訪問正常
404, Not Found，未發現指定網址
500, Internal Server Error，服務器發生錯誤
基本上，只有2xx和304的狀態碼，表示服務器返回是正常狀態。
7、常見幾種ajax方法
結合任務來看三種常見的寫法（不涉及框架中寫法）
a、原生寫法：見demo
b、jQuery 底層 AJAX 實現：見demo
c、jQuery 高層 AJAX 實現：見demo
3.常見問題
1、跨域問題
2、使用post提交的時候需要設置content-type爲"application/x-www-form-urlencoded"
4.解決方案
1、nginx配置跨域
2、使用post提交的時候需要設置content-type會出錯，見demo
5.編碼實戰
原生寫法/* 創建實例 */
// var xhr = new XMLHttpRequest();
// /* 需要發送的數據 */
// var data = ‘name=’ + userVal + ‘&pwd=’ + pwVal;
// console.log(data)
// /* 指定請求的參數 */
// xhr.open(‘POST’, ‘/carrots-admin-ajax/a/login’, true);
// /* POST的請求頭 */
// xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
// /* 發出HTTP請求 */
// xhr.send(data);
/* $.ajax()寫法 */
// var xhr = $.ajax({
// type: ‘POST’,
// data: {
// name: userVal,
// pwd: pwVal
// },
// url: ‘/carrots-admin-ajax/a/login’,
// success: function () {
// }
// });
/* $.post()寫法 */
var data = {
name: userVal,
pwd: pwVal,
}
console.log(data)
var xhr = $.post(’/carrots-admin-ajax/a/login’, data, function () {})
6.擴展思考
AJAX的優缺點？
ajax的缺點：
ajax不支持瀏覽器back按鈕。
安全問題 AJAX暴露了與服務器交互的細節。
對搜索引擎的支持比較弱。
破壞了程序的異常機制。
不容易調試。
get與post的區別？
GET - 從指定的資源請求數據。
POST - 向指定的資源提交要被處理的數據
GET 請求可被緩存
GET 請求保留在瀏覽器歷史記錄中
GET 請求可被收藏爲書籤
GET 請求不應在處理敏感數據時使用
GET 請求有長度限制
GET 請求只應當用於取回數據
POST 請求不會被緩存
POST 請求不會保留在瀏覽器歷史記錄中
POST 不能被收藏爲書籤
POST 請求對數據長度沒有要求
作者：jnshu_it
來源：CSDN
原文：https://blog.csdn.net/jnshu_it/article/details/83858684
版權聲明：本文爲博主原創文章，轉載請附上博文鏈接！