站長(zhǎng)資訊網(wǎng)
AJAX是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)，可以用來(lái)：1、做局部請(qǐng)求以實(shí)現(xiàn)局部刷新（不刷新頁(yè)面而更新網(wǎng)頁(yè)）；2、在頁(yè)面加載后從服務(wù)器請(qǐng)求數(shù)據(jù)；3、在頁(yè)面加載后從服務(wù)器接收數(shù)據(jù)；4、在后臺(tái)向服務(wù)器發(fā)送數(shù)據(jù)。
本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
Ajax是什么？
AJAX = Asynchronous JavaScript and XML.
AJAX是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。
AJAX 通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重載整個(gè)頁(yè)面的情況下，對(duì)網(wǎng)頁(yè)的某些部分進(jìn)行更新。
傳統(tǒng)的網(wǎng)頁(yè)（不使用 AJAX）如果需要更新內(nèi)容，必須重載整個(gè)頁(yè)面。
有很多使用 AJAX 的應(yīng)用程序案例：Google Maps、Gmail、Youtube 和 Facebook。
用于瀏覽器與服務(wù)器之間使用異步數(shù)據(jù)傳輸(HTTP 請(qǐng)求)，做到局部請(qǐng)求以實(shí)現(xiàn)局部刷新
Ajax是干什么的？有什么用？
1、不刷新頁(yè)面而更新網(wǎng)頁(yè)(局部刷新)
2、在頁(yè)面加載后從服務(wù)器請(qǐng)求數(shù)據(jù)
3、在頁(yè)面加載后從服務(wù)器接收數(shù)據(jù)
4、在后臺(tái)向服務(wù)器發(fā)送數(shù)據(jù)
如何使用Ajax？
1、創(chuàng)建XMLHttpRequest對(duì)象
2、使用open方法設(shè)置和服務(wù)器的交互信息
3、設(shè)置requestHeader() request.setRequestHeader(屬性名稱(chēng), 屬性值);
4、send() 設(shè)置發(fā)送的數(shù)據(jù)，開(kāi)始和服務(wù)器端交互
5、取得響應(yīng)，注冊(cè)事件
例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button onclick="getData()">獲取數(shù)據(jù)</button> <script> function getData() { // 1.創(chuàng)建XMLHttpRequest對(duì)象 var request = new XMLHttpRequest(); // 2.使用open方法設(shè)置和服務(wù)器的交互信息 // 請(qǐng)求的主體 request.open('get', 'https://api.muxiaoguo.cn/api/lishijr/') // 3.設(shè)置requestHeader() request.setRequestHeader(屬性名稱(chēng), 屬性值); // 這里用默認(rèn)就好，不寫(xiě)了 // 4. send() 設(shè)置發(fā)送的數(shù)據(jù)，開(kāi)始和服務(wù)器端交互 request.send(); //調(diào)用send()之后,請(qǐng)求就會(huì)發(fā)送到服務(wù)器 // 5.取得響應(yīng)，注冊(cè)事件 request.onreadystatechange = function () { if (request.readyState === 4 && request.status === 200) { //4 響應(yīng)完成 DONE // console.log(request.responseText); var res = JSON.parse(request.responseText); console.log(res); // 根據(jù)數(shù)據(jù)添加對(duì)應(yīng)的節(jié)點(diǎn) for (var arrIndex in res.data) { // 創(chuàng)建一個(gè)節(jié)點(diǎn) var p = document.createElement('p'); p.innerHTML = res.data[arrIndex].title; document.body.appendChild(p); } } } // 6.如果請(qǐng)求完成，并且響完成，可以獲取到響應(yīng)數(shù)據(jù) } </script> </body> </html>
對(duì)AJAX的總結(jié)：
AJAX是異步的JavaScript和XML;
AJAX是一種用于創(chuàng)建更好更快以及交互性更強(qiáng)的Web應(yīng)用程序的技術(shù);
AJAX是一種獨(dú)立于Web服務(wù)器軟件的瀏覽器技術(shù);
AJAX不是一種新的編程語(yǔ)言，而是一種技術(shù);
AJAX 使用 JavaScript 在 web 瀏覽器與 web 服務(wù)器之間來(lái)發(fā)送和接收數(shù)據(jù)（前端后端交互）;
AJAX在瀏覽器與Web服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP請(qǐng)求）。
【相關(guān)教程推薦：AJAX視頻教程】
