如何發送請求以及AJAX

AJAX(async JavaScript and XML)，指的是經過 JavaScript 的異步通訊，從服務器獲取 XML 文檔從中提取數據，再更新當前網頁的對應部分，而不用刷新整個網頁。後來，AJAX 這個詞就成爲 JavaScript 腳本發起 HTTP 通訊的代名詞，也就是說，只要用腳本發起通訊，就能夠叫作 AJAX 通訊。W3C 也在2006年發佈了它的國際標準。

如何發請求？

瀏覽器與服務器之間，採用 HTTP 協議通訊。用戶在瀏覽器地址欄鍵入一個網址，或者經過網頁表單向服務器提交內容，這時瀏覽器就會向服務器發出 HTTP 請求。

咱們還能夠經過一些其餘方式發送請求。

<form>標籤

用 form 能夠發請求，可是會刷新頁面或新開頁面

<form action="x" method=post>
  <input type="username" name="username">
  <input type="submit">
</form>
複製代碼

當點擊提交按鈕後，會發出一個post的請求（在form裏的method裏面設置請求類型）。

在圖片中能夠看到發出了一個路徑爲x的post請求（路徑設置在form的action裏），請求的內容爲username=123，（usernam在第一個input標籤的name裏設置，後面的類容是輸入框中的內容）。

<a>標籤

用 a 能夠發 get 請求，可是也會刷新頁面或新開頁面

<a href="x">點擊</a>
複製代碼

當點擊按鈕以後，會發出一個get請求。

<img>標籤

用 img 能夠發 get 請求，可是隻能以圖片的形式展現

<script> var image = document.createElement('img') image.src = '/x' document.body.appendChild(image) </script>
複製代碼

當定義一個img標籤，設置了src路徑以後，就會發出一個get請求。當在頁面中引入這個img標籤以後，只能以圖片的形式展現

<link>標籤

用 link 能夠發 get 請求，可是隻能以 CSS、favicon 的形式展現

<script> var link = document.createElement('link') link.rel = 'stylesheet' link.href = '/x' document.head.appendChild(link) </script>
複製代碼

link標籤只有定義了並引入到頁面中以後，纔會發出請求，（img標籤只要定義以後就能夠發請求）

<script>標籤

用 script 能夠發 get 請求，可是隻能以腳本的形式運行

<script> var script = document.createElement('script') script.src = '/x' document.head.appendChild(script) </script>
複製代碼

當定義一個script標籤並引入頁面以後，就會發出一個get請求

進階

有沒有什麼方式能夠實現

• get、post、put、delete 請求都行
• 想以什麼形式展現就以什麼形式展現

AJAX

利用 AJAX 能夠發出 HTTP 請求，獲得服務器返回的數據後，再進行處理。雖然 AJAX 的 X 表明着 XML ，可是目前服務器返回的都是 JSON 格式的數據，AJAX 字面的含義已經消失了，已經成爲了一個通用名詞。

具體來講，AJAX 包括如下幾個步驟。

• 建立 XMLHttpRequest 實例
• 發出 HTTP 請求
• 接收服務器傳回的數據
• 更新網頁數據

一個AJAX請求

button.addEventListener("click", e => {
  let request = new XMLHttpRequest();
  request.open("GET", "/yyzcl"); //配置request
  request.setHeader("yyzcl","OK"); //設置請求頭
  request.send("Yyzcl");
  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      let string = request.responseText;  // 獲取服務器的返回值，是一個字符串
      let obj = window.JSON.parse(string);  // 把符合JSON語法的字符串轉換爲JS對應的值（能夠是對象，字符串等）
    }
  };
});
複製代碼

• 配置request open是用來配置request的，其一共能夠傳遞5個參數，來看看 MDN 的解釋。

void open(
   DOMString method,
   DOMString url,
   optional boolean async,
   optional DOMString user,
   optional DOMString password
);
複製代碼

第一個參數是請求方式，第二個參數是請求地址，後面的參數通常不改，使用默認設置，因此通常只設置兩個參數。

• 請求狀態 readyState表示請求的狀態，其一共有5種狀態。

值	狀態	描述
0	UNSENT (未打開)	open()方法還未被調用.
1	OPENED (未發送)	open()方法已經被調用.
2	HEADERS_RECEIVED (已獲取響應頭)	send()方法已經被調用, 響應頭和響應狀態已經返回.
3	LOADING (正在下載響應體)	響應體下載中; responseText中已經獲取了部分數據.
4	DONE (請求完成)	整個請求過程已經完畢.

從第二個值能夠獲得一個額外信息，客戶端是分段下載響應體的。

• 請求頭 setHeader是用來設置請求頭的,以key:value的格式設置。

• 請求體 send是用來設置請求體的，是一個字符串的形式。

AJAX解析

來看看以前那個 AJAX 請求。

button.addEventListener("click", e => {
  let request = new XMLHttpRequest();
  request.open("GET", "/yyzcl");
  request.setHeader("yyzcl","OK");
  request.send("Yyzcl");
  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      let string = request.responseText;
      let obj = window.JSON.parse(string);
    }
  };
});
複製代碼

• open是用來設置 HTTP 請求的第一部分的
• setHeader是用來設置請求頭的第二部分的，第二部分有些信息是瀏覽器自動設置的
• send是用來設置請求頭的第四部分的, get請求也可設置第四部分，不報錯，但不起做用

響應體解析

request.status、request.statusText是響應體的第一部分

request.getAllResponseHeaders()或者request.getResponseHeader()是響應體的第二部分

request.responseText是響應體的第四部分

AJAX的同源政策

AJAX 只能向同源網址（協議、域名、端口都相同）發出 HTTP 請求，若是發出跨域請求，就會報錯

好比：

https://www.github.com不能向http://www.github.com發送 AJAX 請求

http://github.com不能向http://www.github.com發送 AJAX 請求

http://www.github.com:80不能向http://www.github.com:81發送 AJAX 請求

CORS

CORS 是一個 W3C 標準，全稱是」跨域資源共享」（Cross-origin resource sharing）。它容許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了 AJAX 只能同源使用的限制。

若是 A 想利用JavaScript向 B 網站發送 AJAX 請求，那麼只須要在 B 的後端寫上： response.setHeader('Access-Control-Allow-Origin',' A 網站的 **協議** + **域名** + **端口號**')

就能夠實現 AJAX 的跨域請求。

JSON

JSON（JavaScript Object Notation）是一種由道格拉斯·克羅克福特構想和設計、輕量級的數據交換語言，JSON 是 JavaScript 的一個子集，但 JSON 是獨立於語言的文本格式，而且採用了相似於C語言家族的一些習慣。

JSON的數據格式有string、number、object、array、true、false、null，和 JavaScript 仍是有一些區別的。

JavaScript	JSON
undefined	沒有
null	null
['A','B']/["A","B"]	["A","B"]
function fn(){}	沒有
{name: 'yyzcl'/"yyzcl"}	{"name": "yyzcl"}
'yyzcl'/"yyzcl"	"yyzcl"
var a={}	JSON沒有變量
{proto}	JSON沒有原型鏈