AJAX原理及其應(yīng)用
本文將對(duì)Ajax的工作原理、XMLHttpRequest對(duì)象的屬性、方法和事件進(jìn)行分析，并通過(guò)JSONPlaceHolder為例，進(jìn)一步闡述Ajax及XMLHttpRequest對(duì)象的用法。
AJAX原理分析
????什么是AJAX？
AJAX(Asynchronous JavaScript and XML)=異步JavaScript和XML
AJAX不是一種編程語(yǔ)言，而是現(xiàn)有的一種標(biāo)準(zhǔn)技術(shù)方法。
AJAX實(shí)現(xiàn)了在不刷新個(gè)頁(yè)面的情況下，進(jìn)行用戶與服務(wù)器的異步交互，完成對(duì)頁(yè)面的部分更新。
AJAX最大的特點(diǎn)就在于異步交互和局部刷新
在了解AJAX的工作原理之前，先讓我們熟悉一下異步交互和同步交互的特點(diǎn)吧(￣▽￣)~*
????
????同步和異步
????????同步交互
????首先用戶向服務(wù)器提交一個(gè)HTTP請(qǐng)求，服務(wù)器收到這個(gè)請(qǐng)求后，接著會(huì)處理這個(gè)請(qǐng)求，處理完成后，服務(wù)器對(duì)請(qǐng)求進(jìn)行相應(yīng)，將結(jié)果返回給客戶端，將界面進(jìn)行更新。一般來(lái)說(shuō)，界面會(huì)得到新的內(nèi)容或者是更加豐富的CSS相應(yīng)效果。但是在整個(gè)服務(wù)器處理請(qǐng)求的過(guò)程中，用戶是不能進(jìn)行其他操作的，只能等待頁(yè)面刷新。這也是同步交互中最讓詬病的問(wèn)題
????????異步交互
????在上述的交互過(guò)程中，用戶不需要等待服務(wù)器返回結(jié)果，也可以進(jìn)行其他的操作，隨時(shí)可以再發(fā)送下一個(gè)請(qǐng)求，即不需要等待。這就是異步。異步不用等所有操作等做完，就相應(yīng)用戶請(qǐng)求。充分的利用了服務(wù)器響應(yīng)的時(shí)間，給用戶更好的體驗(yàn)。
????AJAX工作原理
????AJAX的核心思想就是異步，相當(dāng)于在瀏覽器與服務(wù)器之間增加了一個(gè)中間層（AJAX），簡(jiǎn)單來(lái)說(shuō)AJAX就是充當(dāng)了介于用戶與商家之間的快遞員，使得用戶請(qǐng)求與服務(wù)器異步化。
????AJAX核心技術(shù)有 JavaScript、XMLHTTPRequest、DOM 對(duì)象。
????AJAX通過(guò)XMLHttpRequest對(duì)象向服務(wù)器發(fā)送異步請(qǐng)求，發(fā)送請(qǐng)求到服務(wù)器響應(yīng)并返回?cái)?shù)據(jù)的過(guò)程中，用戶可以繼續(xù)與網(wǎng)頁(yè)交互，而不會(huì)陷入請(qǐng)求等待。服務(wù)器返回?cái)?shù)據(jù)后，再用JS函數(shù)根據(jù)數(shù)據(jù)對(duì)DOM操作更新部分頁(yè)面。???
XMLHttpRequest
????XMLHttpRequest對(duì)象是AJAX的核心機(jī)制，是實(shí)現(xiàn)異步交互的核心組件，所有請(qǐng)求的發(fā)送和響應(yīng)的接收都依靠XMLHttpRequest對(duì)象所提供的屬性、方法及事件。
????????常見(jiàn)的XMLHttpRequest屬性
????????常見(jiàn)的XMLHttpRequest方法
????????常見(jiàn)的XMLHttpRequest事件
Ajax及XMLHttpRequest對(duì)象的用法
????下面將以JSONPlaceHolder為數(shù)據(jù)服務(wù)，編寫(xiě)案例，闡述AJAX以及XMLHttpRequest對(duì)象的用法。在此之前，我們先來(lái)一起梳理一下發(fā)送一個(gè)Ajax請(qǐng)求的一般步驟（不考慮IE兼容性）
????AJAX請(qǐng)求步驟
??? ????1.創(chuàng)建XMLHttpRequest對(duì)象
????????var xhr = new XMLHttpRequest();
????????2.事件處理函數(shù)
????????httpRequest.onreadystatechange = function () {
????????if (httpRequest.readyState == 4 || httpRequest.status == 200) {
? ? ? ? ? //請(qǐng)求成功
? ? ? ? ? document.getElementById("item").innerHTML = "請(qǐng)求成功";
? ? ? ? } else {
? ? ? ? ? //請(qǐng)求失敗
? ? ? ? ? document.getElementById("item").innerHTML = "請(qǐng)求失敗";
? ? ? ? ????};
? ? ? ????};
??????????3.發(fā)送請(qǐng)求
????????xhr.open("Get", "https://jsonplaceholder.typicode.com/users",true);
???????????xhr.responseType = "json"; //設(shè)置返回類型為JOSN
????????xhr.send();
????????大致的過(guò)程就是這樣，接下來(lái)以實(shí)例來(lái)展示如何進(jìn)行使用。
????????
????????使用GET方法獲取數(shù)據(jù)
????????
? <body>
? ? <input type="button" onclick="gets()" value="點(diǎn)擊獲取信息" />
? ? <div id="get" style="white-space: pre-line"></div>
? </body>
? <script>
? ? var gets = function () {
? ? ? var xhr = new XMLHttpRequest();
? ? ? var url = "https://jsonplaceholder.typicode.com/posts/1";
? ? ? xhr.onreadystatechange = function () {
? ? ? ? if (this.readyState == 4 && this.status == 200) {
? ? ? ? ? console.log(this.response);
? ? ? ? ? //將JSON字符串轉(zhuǎn)化為對(duì)象
? ? ? ? ? var data = JSON.parse(xhr.response);
? ? ? ? ? var oneList = `userId:${data.userId}
id:${data.id}
title:${data.title}
body:${data.body}`;
? ? ? ? ? document.getElementById("get").innerHTML = oneList;
? ? ? ? }
? ? ? };
? ? ? xhr.open("GET", url, true);
? ? ? xhr.send();
? ? };
? </script>
????當(dāng)按下按鈕時(shí)，便會(huì)執(zhí)行GET請(qǐng)求，效果如下圖所示：
????????使用POST方法提交表單
? ? ? ??
<body>
? ? <form name="form1" id="form1">
? ? ? <input type="text" name="userId" value="11" />
? ? ? <input type="text" name="id" value="101" />
? ? ? <input type="text" name="title" value="i got go" />
? ? ? <input type="text" name="body" value="it will be good" />
? ? ? <input type="button" onclick="posts()" value="點(diǎn)擊提交信息" />
? ? </form>
? ? <div id="posts" style="white-space: pre-line"></div>
? </body>
? <script>
? ? var posts = function () {
? ? ? //獲取表單數(shù)據(jù)
? ? ? var formData = new FormData(document.getElementById("form1"));
? ? ? var xhr = new XMLHttpRequest();
? ? ? console.log(formData);
? ? ? var url = "https://jsonplaceholder.typicode.com/posts";
? ? ? xhr.onreadystatechange = function () {
? ? ? ? if (this.readyState == 4 && this.status == 201) {
? ? ? ? ? console.log(xhr.response);
? ? ? ? ? console.log(typeof xhr.response);
? ? ? ? }
? ? ? };
? ? ? xhr.open("POST", url, true);
? ? ? xhr.setRequestHeader("Content-type", "application/json");
? ? ? xhr.responseType = "json";
? ? ? xhr.send(JSON.stringify(formData));
? ? };
? </script>
????????使用PUT方法更新資源
????????
?<body>
? ? <form name="form1" id="form1">
? ? ? <input type="text" name="userId" value="11" />
? ? ? <input type="text" name="id" value="101" />
? ? ? <input type="text" name="title" value="i got go" />
? ? ? <input type="text" name="body" value="it will be good" />
? ? ? <input type="button" onclick="Put()" value="點(diǎn)擊更新信息" />
? ? </form>
? </body>
? <script>
? ? var Put = function () {
? ? ? var formData = new FormData(document.getElementById("form1"));
? ? ? // 創(chuàng)建XMLHttpRequest對(duì)象
? ? ? var xhr = new XMLHttpRequest();
? ? ? var url = "https://jsonplaceholder.typicode.com/posts/1";
? ? ? // 注冊(cè)請(qǐng)求狀態(tài)變化事件處理函數(shù)
? ? ? xhr.onreadystatechange = function () {
? ? ? ? if (xhr.readyState === 4 && xhr.status === 200) {
? ? ? ? ? console.log(xhr.responseText);
? ? ? ? }
? ? ? };
? ? ? // 初始化請(qǐng)求
? ? ? xhr.open("PUT", url);
? ? ? // 設(shè)置請(qǐng)求頭
? ? ? xhr.setRequestHeader("Content-Type", "application/json");
? ? ? // 發(fā)送請(qǐng)求
? ? ? xhr.responseType = "json";
? ? ? xhr.send(JSON.stringify(formData));
? ? };
????????
????????使用DELETE方法刪除資源
????????
? <body>
? ? <input type="button" onclick="deleteData()" value="點(diǎn)擊刪除信息" />
? </body>
? <script>
? ? var deleteData = function () {
? ? ? var xhr = new XMLHttpRequest();
? ? ? var url = "https://jsonplaceholder.typicode.com/posts/1";
? ? ? // 注冊(cè)請(qǐng)求狀態(tài)變化事件處理函數(shù)
? ? ? xhr.onreadystatechange = function () {
? ? ? ? if (xhr.readyState === 4 && xhr.status === 200) {
? ? ? ? ? console.log(xhr.responseText);
? ? ? ? }
? ? ? };
? ? ? xhr.open("DELETE", url);
? ? ? xhr.send();
? ? };
? </script>
以上便是對(duì)AJAX及其XMLHttpRequest的分析及其應(yīng)用，其實(shí)通過(guò)XMLHttpRequest進(jìn)行網(wǎng)絡(luò)請(qǐng)求,這種方式已經(jīng)有點(diǎn)老舊了，但是我們?nèi)匀挥斜匾私釧jax請(qǐng)求的核心過(guò)程，后續(xù)基于原生Ajax的框架雖然封裝了內(nèi)部細(xì)節(jié)使用更方便，但是其核心步驟還是一樣的。新人學(xué)習(xí)，如有錯(cuò)誤，請(qǐng)?jiān)谠u(píng)論區(qū)補(bǔ)充Thanks?(?ω?)?
