站長資訊網(wǎng)
AJAX是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)，可以用來：1、做局部請求以實(shí)現(xiàn)局部刷新（不刷新頁面而更新網(wǎng)頁）；2、在頁面加載后從服務(wù)器請求數(shù)據(jù)；3、在頁面加載后從服務(wù)器接收數(shù)據(jù)；4、在后臺向服務(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)頁的技術(shù)。
AJAX 通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重載整個(gè)頁面的情況下，對網(wǎng)頁的某些部分進(jìn)行更新。
傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容，必須重載整個(gè)頁面。
有很多使用 AJAX 的應(yīng)用程序案例：Google Maps、Gmail、Youtube 和 Facebook。
用于瀏覽器與服務(wù)器之間使用異步數(shù)據(jù)傳輸(HTTP 請求)，做到局部請求以實(shí)現(xiàn)局部刷新
Ajax是干什么的？有什么用？
1、不刷新頁面而更新網(wǎng)頁(局部刷新)
2、在頁面加載后從服務(wù)器請求數(shù)據(jù)
3、在頁面加載后從服務(wù)器接收數(shù)據(jù)
4、在后臺向服務(wù)器發(fā)送數(shù)據(jù)
如何使用Ajax？
1、創(chuàng)建XMLHttpRequest對象
2、使用open方法設(shè)置和服務(wù)器的交互信息
3、設(shè)置requestHeader() request.setRequestHeader(屬性名稱, 屬性值);
4、send() 設(shè)置發(fā)送的數(shù)據(jù)，開始和服務(wù)器端交互
5、取得響應(yīng)，注冊事件
例子：
<!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對象 var request = new XMLHttpRequest(); // 2.使用open方法設(shè)置和服務(wù)器的交互信息 // 請求的主體 request.open('get', 'https://api.muxiaoguo.cn/api/lishijr/') // 3.設(shè)置requestHeader() request.setRequestHeader(屬性名稱, 屬性值); // 這里用默認(rèn)就好，不寫了 // 4. send() 設(shè)置發(fā)送的數(shù)據(jù)，開始和服務(wù)器端交互 request.send(); //調(diào)用send()之后,請求就會(huì)發(fā)送到服務(wù)器 // 5.取得響應(yīng)，注冊事件 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ù)添加對應(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.如果請求完成，并且響完成，可以獲取到響應(yīng)數(shù)據(jù) } </script> </body> </html>
對AJAX的總結(jié)：
AJAX是異步的JavaScript和XML;
AJAX是一種用于創(chuàng)建更好更快以及交互性更強(qiáng)的Web應(yīng)用程序的技術(shù);
AJAX是一種獨(dú)立于Web服務(wù)器軟件的瀏覽器技術(shù);
AJAX不是一種新的編程語言，而是一種技術(shù);
AJAX 使用 JavaScript 在 web 瀏覽器與 web 服務(wù)器之間來發(fā)送和接收數(shù)據(jù)（前端后端交互）;
AJAX在瀏覽器與Web服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP請求）。
【相關(guān)教程推薦：AJAX視頻教程】
