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