什么是AJAX
AJAX = Asynchronous JavaScript And XML.
我感觉 AJAX 是一个有点误导性的名称。让人觉得 AJAX 应用程序只能使用 XML 来传输数据，但以纯文本或 JSON 文本形式传输数据也很常见。
AJAX是一种网页前端技术，它允许通过在后台与 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分内容，而无需重新加载整个页面。
正常的前端和后端的交互流程是，前端请求一次后端，后端返回数据，前端刷新整个页面，展示数据。
而使用AJAX的效果，前端请求一次后端，后端返回数据，前端只局部刷新，展示数据。
AJAX的工作流程
- 网页中发生事件（页面加载，按钮点击）
- XMLHttpRequest对象由JavaScript创建
- XMLHttpRequest 对象向 Web 服务器发送请求
- 服务器处理请求
- 服务器向网页发回响应
- 响应由JavaScript读取
- 适当的动作（如页面更新）由 JavaScript 执行
省市二级联动案例
页面效果:
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery.min.js"></script>
</head>
<body>
<select id="selectProvince" >
<option selected = selected>--请选择--</option>
</select>
<select id="selectCity">
<option selected = selected>--请选择--</option>
</select>
</body>
<script type="text/javascript">
$(function () {
loadProvince();
// 加载省份 省_下拉框 绑定 改变事件；
$("#selectProvince").change(function () {
var ciryId = $("#selectProvince").val();
$.post("/selectCity/selectProvince",
{id:ciryId},
function (data) {
// 需要将第一行(默认数据)option清空
$("#selectCity :gt(0)").remove();
for (var index=0;index<data.length;index++){
// add select option
$("#selectCity").append("<option>"+data[index].cityName+"</option>>")
}
},
"json"
)
})
});
function loadProvince() {
$.post("/selectCity/selectProvince",
{id:0},
function (data) {
for (var index=0;index<data.length;index++){
$("#selectProvince").append('<option value="'+data[index].cityId+'">'+data[index].cityName+'</option>')
}
},
"json"
)
}
</script>
</html>
AJAX的使用总结
- AJAX的作用和运行流程很易理解，操作的时候只需要想清楚在哪里触发请求，拿到数据之后在哪里展示；
- 原生JS、Jquery、...的代码语法稍微有点不同，但是工作流程始终都是一样的，无非框架帮忙把一些细节封装了。
