ajax是做什麼的
- 青灯夜游原創
- 2022-01-17 16:41:5010049瀏覽
AJAX是一種用來建立快速動態網頁的技術，可以用來：1、做局部請求以實現局部刷新（不刷新頁面而更新網頁）；2、在頁面載入後從伺服器請求資料；3、在頁面載入後從伺服器接收資料；4、在後台向伺服器發送資料。
本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
Ajax是什麼？
AJAX = Asynchronous JavaScript and XML.
AJAX是一種用來建立快速動態網頁的技術。
AJAX 透過在背景與伺服器進行少量資料交換，使網頁實現非同步更新。這意味著可以在不重載整個頁面的情況下，對網頁的某些部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個頁面。
有許多使用 AJAX 的應用程式案例：Google Maps、Gmail、Youtube 和 Facebook。
用於瀏覽器與伺服器之間使用非同步資料傳輸(HTTP 請求)，做到局部請求以實現局部刷新
Ajax是做什麼的？有什麼用？
1、不刷新頁面而更新網頁(局部刷新)
2、在頁面載入後從伺服器請求資料
3、在頁面載入後從伺服器接收資料
4、在後台向伺服器發送資料
如何使用Ajax？
1、建立XMLHttpRequest物件
2、使用open方法設定和伺服器的互動資訊
3、設定requestHeader() request.setRequestHeader(屬性名稱,屬性值);
4、send() 設定發送的數據，開始和伺服器端互動
5、取得回應，註冊事件
範例：
<!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()">获取数据</button>
<script>
function getData() {
// 1.创建XMLHttpRequest对象
var request = new XMLHttpRequest();
// 2.使用open方法设置和服务器的交互信息
// 请求的主体
request.open('get', 'https://api.muxiaoguo.cn/api/lishijr/')
// 3.设置requestHeader() request.setRequestHeader(属性名称, 属性值);
// 这里用默认就好，不写了
// 4. send() 设置发送的数据，开始和服务器端交互
request.send(); //调用send()之后,请求就会发送到服务器
// 5.取得响应，注册事件
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) { //4 响应完成 DONE
// console.log(request.responseText);
var res = JSON.parse(request.responseText);
console.log(res);
// 根据数据添加对应的节点
for (var arrIndex in res.data) {
// 创建一个节点
var p = document.createElement('p');
p.innerHTML = res.data[arrIndex].title;
document.body.appendChild(p);
}
}
}
// 6.如果请求完成，并且响完成，可以获取到响应数据
}
</script>
</body>
</html> 對AJAX的總結：
AJAX是異步的JavaScript和XML;
AJAX是一種用於創建更好更快以及交互性更強的Web應用程式的技術;
AJAX是一種獨立於Web伺服器軟體的瀏覽器技術;
AJAX不是一種新的程式語言，而是一種技術;
AJAX 使用JavaScript 在web 瀏覽器與web 伺服器之間來傳送和接收資料（前端後端互動）;
AJAX在瀏覽器與Web伺服器之間使用非同步資料傳輸（HTTP請求）。
【相關教學推薦：AJAX影片教學】
以上是ajax是做什麼的的詳細內容。更多資訊請關注PHP中文網其他相關文章！