AJAX请求5步法
課程大綱
- （1）AJAX請求步驟(初版)
- （2）AJAX請求類型
- （3）跨域+CORS+Network
- （4）JSON序列化與反序列化/解析
- （5）AJAX請求步驟(微調)
首先來一段五步法的全部完整代碼，下面再對代碼一一進行詳細介紹，代碼如下：
這是naonao.text的代碼：
這是全部代碼，里面使用xhr.open方法引入naonao.text：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}div {border: 1px solid red;}p {border: 1px solid blue;}</style></head><body><button name="ajax">ajax</button></body><script type="text/javascript">var btn = document.querySelector("button[name='ajax']");console.log(btn)btn.addEventListener('click', callback, false) /* false是事件冒泡，true是事件捕獲，不寫的話默認是false。 */function callback() {/* 1.創建 XMLHttpRequest一步對象*/var xhr;if (window.XMLHttpRequest) {xhr = new XMLHttpRequest(); /* 主流瀏覽器 */} else {xhr = new ActiveXObject("Microsoft.XMLHTTP"); /* 兼容IE寫法 */}console.log(xhr)/* 2.設置回調函數*/xhr.onreadystatechange = callback;/* 3.使用open方法與服務器建立連接 */xhr.open("get", "naonao.text", true)/* 4.注冊事件，設置和服務器的交互信息，向服務器發送數據 */xhr.send()/* 5.回調函數處理---響應---針對不同的響應狀態進行處理 */function callback() {if (xhr.readyState == 4 && xhr.status == 200) {var responseText = xhr.responseText;console.log(responseText)var xhrObject = JSON.parse(responseText)console.log(xhrObject)var new_div = document.createElement('div');document.body.appendChild(new_div);for (var i = 0; i < xhrObject.length; i++) {var new_p = document.createElement('p');var new_string = "";new_string += "姓名:" + xhrObject[i].name;new_string += "   年齡:" + xhrObject[i].age;new_p.innerHTML = new_string;new_div.appendChild(new_p)}}}}</script> </html>// <!-// ajax（從后臺獲取數據）//// 異步請求 同步處理// Asynchronous javascript and XML XML(主要來保存和傳輸數據)// xhr：// ajax核心技術 XMLHttpRequest 簡稱xhr js的核心技術// 1.創建ajax的對象：// （1） 兼容主流瀏覽器 var xhr = new XMLHttpRequest()// (2) 兼容IE的寫法 var xhr = new ActiveXObject("Microsoft.XMLHTTP")//// 2.封裝寫法// var xhr;//if(window.XMLHttpRequest){// xhr = new XMLHttpRequest()//}else{// xhr = new ActiveXObject("Microsoft.XMLHTTP")//}// 3. 創建新的http的請求 需要調用open（） 方法//// xhr.open("get","aaaa.json");//// 4.發送請求 需要調用send（）方法//// 4.1// ajax對象成員分析// responseText 以字符串的形式返回從服務器接收回來的信息 （說白了就是獲取到了json）// readyState 表示讀取返回的狀態// onreadystatechange 當ajax的readyState發生變化的時候觸發執行的方法//// readyState返回狀態對應的意思：// 0 剛剛創建了ajax對象// 1 已經調用了open方法，創建好了新的http請求// 2 已經調用了send方法，發送了請求// 3 正在返回數據 但是不完整// 4 ajax請求完成，數據返回完整//// http響應：// 1xxx;信息類：表示已經收到了請求（告訴客戶已經收到了請求，正在處理當中）// 2xxx;成功，表示請求被完全接受，正在理解和進一步處理 例如200ok 200-- 表示請求已經完成// 3xxx; 重新定向，表示請求沒有成功，客戶需要采取進一步處理// 4xxx;客戶端發生錯誤，表示提交的請求有誤，例如404 NOT Found 文檔不存在// 5xxx;服務器錯誤，表示請求不能夠處理；例如500AJAX請求步驟
- AJAX請求5部曲：
- （1）創建XMLHttpRequest異步對象
- （2）設置回調函數，針對不同的響應狀態進行處理
—監聽Ajax的狀態readyState的改變事件onreadystatechange - （3）使用open方法與服務器建立連接
- （4）注冊事件，設置和服務器的交互信息，向服務器發送數據
- （5）在回調函數中針對不同的響應狀態進行處理，更新界面
AJAX前言
- 【前言】
- 簡稱：AJAX為異步處理，也叫異步請求
- 作用：訪問遠程API(Application Programming Interface)應用程序編程接口.
- 本質：動態獲取遠程數據，局部渲染更新頁面，所以也叫局部刷新技術.
AJAX請求步驟一
- （1）創建XMLHttpRequest異步對象
- 有兩種方式，主流瀏覽器方式和兼容IE低版本。之所以要兼容IE低版本是因為ajax技術的推廣使用主要得力于IE（微軟）。
- 1、主流瀏覽器方式
- IE7+、Firefox、Opera、Safari、Chrome都支持原生的XHR對象，在這些瀏覽器里創建XHR對象可以直接實例化XMLHttpRequest即可。
- 2、兼容IE低版本方式
- 3、開發時兼容處理，平時創建ajax對象XHR時一般需要封裝一下
AJAX請求步驟二
- （2）使用open方法與服務器建立連接
- 語法：open(method,url,async)
- 解析：open方法有3個參數：method請求類型、url文件在服務器上的位置即接口路徑、async布爾值設置請求同步異步
- 1、method 請求類型：對應的取值是get和post（get方式的安全性比post的要低，包含機密信息的話，建議用post數據提交方式；在做數據查詢是，建議用get方式，而在做數據添加、修改、刪除時，建議用post方式 )
- 2、url文件在服務器上的位置即接口文件路徑
- 注意：
該文件可以是任何類型的文件，比如 .txt 和 .xml，或者服務器腳本文件，比如 ==.asp ==和 .php （在傳回響應之前，能夠在服務器上執行任務）。 - 3、async布爾值設置請求同步異步
- async-默認值true異步，false為同步
- boolean 取值為“true” 的時候，服務器的請求是異步的，也就是腳本執行send()方法后不等待服務器的執行結果，繼續執行腳本代碼；
- beelean取值為“false”的時候，服務器的請求是同步的 ， 也就是腳本執行send()后等待服務器的執行結果，若在等待過程中超時，則不再等待，繼續執行后面的腳本代碼
- 常用默認值true異步即可，例如朋友圈點贊，點贊完畢后界面沒有刷新，但局部更新了點贊數，所以稱之為局部刷新技術。
- false則是等待代碼執行完畢后，再去執行后續操作。
- 3、async布爾值設置請求同步異步—異步VS同步
- ①異步為請求和后續代碼同時執行，即將異步JS請求和XML/HTML的加載同時執行
- ②同步為等待請求完成后，再去執行后續代碼(例如美團點餐同一時間收到10000個請求，需要等待請求完成再去執行后續操作，影響體驗)
- 綜上所述，一般open方法的第3個參數async用默認值true異步即可，所以開發中一般省略不寫，只寫前兩個參數method和url。
- 接下來拓展下method請求類型，除了常見的get和post請求，還有delete刪除請求、update更新請求、put添加請求等等，而post請求可以實現增刪改查所有操作，get一般用于讀取數據。
如下圖請求類型的選取：
請求分類
- 請求方式分兩種get和post
- 最直觀的區別就是get把參數包含在URL中，post通過request body傳遞參數
- 1、get方式安全性較Post方式差些，包含機密信息的話，建議用Post數據提交方式；
- 2、做數據查詢時，建議用Get方式；而做數據添加、修改或刪除時，建議Post方式；
- 案例：一般情況下，登錄的時候都是用的POST傳輸，涉及到密碼傳輸，而頁面查詢的時候，如文章id查詢文章，用get地址欄的鏈接為：article.php?id=11，用post查詢地址欄鏈接為：article.php， 不會將傳輸的數據展現出來。
- HTTP請求方法
- （1）get方法：一般用于信息獲取、使用URL傳遞參數、對發送的信息數量有所限制，常用于查詢，數據可見，一般在2000個字符（默認的HTTP請求方法）。
- 優勢：因為數據通過URL傳遞，所以可以將其存放在書簽里。
- 注意：get方法也叫冪等，即查詢結果不受查詢次數影響，例如查詢一個員工信息1次和1000次，并不會隨著查詢次數的疊加而有所改變。
- （2）post方法：一般用于修改服務器上的資源，常用于新建和修改數據等操作，數據不可見，被嵌入了HTTP請求體里，且對所發送信息的數量無限制。
- （3）區別：常用get方法做查詢和獲取操作，post方法做發送數據、新建修改數據等操作。
- （1）get方法：一般用于信息獲取、使用URL傳遞參數、對發送的信息數量有所限制，常用于查詢，數據可見，一般在2000個字符（默認的HTTP請求方法）。
- 開發中一般省略參數async使用默認值true即可
- 上面是get方法，如果是post方式發送數據 需要設置請求頭
- 小結：open方法中get&&post方法區別
AJAX請求步驟三
- （3）注冊事件，設置和服務器的交互信息，向服務器發送數據
- 在第（2）步中已經與服務器建立了鏈接，規定了請求的類型、URL以及是否異步處理請求， 接下來通過第（3）步注冊事件，設置交互信息，并將請求發送到服務器
- 在第（2）步中已經與服務器建立了鏈接，規定了請求的類型、URL以及是否異步處理請求， 接下來通過第（3）步注冊事件，設置交互信息，并將請求發送到服務器
- 這里著重強調下get與post請求區別–傳值方式
- get方式通過url拼接傳值，所以不會通過send發送，會將請求數據展示到url，例如百度、淘寶搜索商品… …
- 而post請求則是通過send傳參將數據傳遞到服務器，不會在url展示數據，所以安全性較高，例如登錄、修改密碼等操作，均不會將信息展示到url中… …
- 這里著重強調下get與post請求區別–傳值方式，get如下所示
- （3）注冊事件，設置和服務器的交互信息，向服務器發送數據
語法：xhr.send([string])- ①當請求類型method為get時，發送send需要加上參數string，即xhr.send(string)
- ②當請求類型method為post時，發送send不需要加參數，即xhr.send()
- 小結：給服務器發送數據xhr.send(string)；向服務器讀取數據xhr.send()
- 因為上面請求類型為get，所以這里直接發送請求即可，無需傳參
- 小結：send方法中get&&post區別
AJAX請求步驟四
- （4）響應—針對不同的響應狀態進行處理
- 接下來使用AJAX對象即xhr的相關屬性接收和監聽返回的數據，正式介紹前，先來介紹下Ajax對象常用屬性
- 在創建xhr異步對象之后輸出下，控制臺查看驗證
- 讀取狀態readyState
- 分析可得當狀態readyState為4時才可以獲得返回的數據
- 監聽狀態改變事件onreadystatechange：當Ajax的狀態readyState發生變化時觸發執行，為了獲得較多的狀態，最好在創建好Ajax對象后就設置。
- 最多可以感知到1、2、3、4四種狀態。
跨域
- 基礎掃盲—跨域
- 理論上控制臺應該顯示出1，2，3，4四個狀態值，但驗證后會發現顯示不全，且存在報錯
- 譯為：
- CORS策略已阻止從原始“ null”訪問“/index.html”處的XMLHttpRequest：跨原始請求僅支持以下協議方案：http，數據，chrome，chrome擴展名，https。
- 什么是跨域？
- 跨域，是指瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對JavaScript實施的安全限制。
- 同源策略限制了以下行為：
- 常見跨域場景？
- 所謂的同源是指，域名、協議、端口均為相同。
- 常見跨域場景？
- 所謂的同源是指，域名、協議、端口均為相同。
- 所謂的同源是指，域名、協議、端口均為相同。
http://www.nealyang.cn/index.html 調用 http://www.nealyang.cn/server.php 非跨域
http://www.nealyang.cn/index.html 調用 http://www.neal.cn/server.php 跨域,主域不同
http://abc.nealyang.cn/index.html 調用 http://abc.neal.cn/server.php 跨域,子域名不同
http://www.nealyang.cn:8080/index.html 調用 http://www.nealyang.cn/server.php 跨域,端口不同
https://www.nealyang.cn/index.html 調用 http://www.nealyang.cn/server.php 跨域,協議不同
localhost 調用 127.0.0.1 跨域
- 所謂的同源是指，域名、協議、端口均為相同。
CORS
- 基礎掃盲之CORS
- CORS全稱Cross-Origin Resource Sharing，是一種允許當前域（domain）的資源（比如html/js/webservice）被其他域（domain）的腳本請求訪問的機制，通常由于同域安全策略（the same-origin security policy）瀏覽器會禁止這種跨域請求。
- 即瀏覽器的同源策略Same origin policy會阻止不同源的文件訪問交互，對于跨域問題可以使用CORS來解決。
- 瀏覽器區別→chrome存在同源策略，所以不可以跨域。接下來使用HBuilder打開（自帶服務器）
AJAX請求步驟四
- （4）響應—針對不同的響應狀態進行處理
- XMLHttpRequest 對象的三個重要的屬性
- 當 readyState 等于 4 時，表示響應已就緒
- 當 status 等于 200 時，表示服務器返回數據成功
- responseText 為字符串形式接收服務器端返回的信息
將響應移至監聽狀態變化函數中看下圖：
- XMLHttpRequest 對象的三個重要的屬性
- 將上述代碼簡化如下，當 readyState 等于 4 且狀態為 200 時，表示響應已就緒且服務器返回數據成功
- 接下來添加url文件，先用本地文件index.txt測試下
狀態碼
上面用到了狀態碼xhr.status，當status為200時表示服務器返回數據成功，所以接下來介紹下狀態碼相關概念。
- 詳見下節課程4.AJAX之狀態值+狀態碼+HTTP請求.pptx
AJAX狀態碼
- 控制臺network檢驗查看AJAX相關信息
- 首先介紹下控制臺chrome開發者工具最常用的四個功能模塊：Elements、console、Sources、Network。
谷歌開發者工具Network
- chrome開發者工具最常用的四個功能模塊：
- 1、Elements：主要用來查看前面界面的html的Dom結構，和修改css的樣式。css可以即時修改，即使顯示。大大方便了開發者調試頁面
- 2、console：這個除了查看錯誤信息、打印調試信息(console.log())、寫一些測試腳本以外，還可以當作Javascript API查看用
- 3、Sources：主要用來調試js和查看源代碼
- 4、Network：網絡連接的信息讀取。例如接口調用、資源加載耗時等
- Network詳細介紹
- 點擊某個具體請求后的界面，如下圖所示：
Network詳細介紹：一共分為四個模塊：
- （1）Headers
- （2）Preview：預覽面板，用于資源的預覽。
- （3）Response
響應信息面板包含資源還未進行格式處理的內容 - （4）Timing
資源請求的詳細信息花費時間
AJAX請求步驟五
- （5）更新渲染界面
通過之前步驟，已經從服務器獲取到外部數據，接下來在頁面動態渲染，即可實現局部更新頁面
- 分析即可得知，獲取json格式數據可以通過response或者responseText即可，一般常用responseText。
- 注意：后臺給前臺返回數據一般為JSON格式，也有xml格式。但后臺獲取得來的數據是json，而json本質是字符串（對象型+數組型），沒有辦法直接應用到頁面，所以需要將JSON數據解析/反序列化成普通JS數組對象才可以使用JS方法進一步操作。
JSON解析和序列化
- JSON解析和序列化指的是JSON格式數據和普通數組對象格式的來回轉換。
- 解析：如果是載入的JSON文件，需要對其進行使用，那么就必須將JSON字符串解析成原生的JavaScript值。即將JSON字符串解析成原生JavaScript值。
- 序列化：如果是原生的JavaScript值，即原生的JavaScript對象和數組，也可以轉換成JSON字符串。所以序列化是將原生JavaScript值轉換成JSON字符串。
- ①去掉鍵的引號：JSON表示法中的鍵值對的鍵必須用引號包圍，普通對象中鍵的引號則可有可無
- ②去除JSON數據兩邊的引號
JSON小結
- （1）JOSN概念：以上即為JSON解析/反序列化和序列化過程，加載過程放到后續課程進行講解。
- 很多人搞不清楚 JSON 和 JS對象的關系，甚至連誰是誰都不清楚。其實，可以這么理解：
- JSON 是 JS 對象的字符串表示法，它使用文本表示一個 JS 對象的信息，本質是一個字符串。
- （2）轉換：JSON 和 JS 對象互轉
- （3）作用：存儲和傳遞數據
- （4）JSON方法：解析與序列化，解析也叫反序列化
AJAX請求步驟五
- （5）更新渲染界面
- 將JSON數據解析/反序列化成普通JS數組對象才可以使用JS方法進一步操作，如下所示
- 遍歷數據并局部更新頁面，代碼如下
- 目前為止，都是頁面初始化刷新時獲取展示數據，并不能很好的體現出AJAX的本質：動態獲取遠程數據，局部渲染更新頁面，所以也叫局部刷新技術。所以接下來做下修改，當點擊按鈕時觸發
- 此時，點擊按鈕時便會發送AJAX請求，然后獲取數據→解析JSON數據成JS對象和數組→渲染至頁面→實現局部刷新（沒有刷新整個頁面的情況下，不斷從外部獲取數據更新頁面），這便是AJAX的直觀體現。
- 接下來修改服務器接口文檔數據，這里是本地數據，所以先測試下本地文檔，修改index.txt如下所示
- 修改index.txt如下所示
AJAX請求步驟-修整
- 目前為止，已經實現了AJAX的請求，但步驟有些問題，接下來重新微調下代碼
修整后的請求步驟如下所示
- JSON（JavaScript Object Notation，JavaScript對象標記）
完畢，有問題留言小編…
總結
- 上一篇： 性能优化概述
- 下一篇： 揭秘：QQ号码能准确测出QQ主人年龄问题