内容概要：
AJAX 知识
AJAX 简介
AJAX 【Asynchronous JavaScript and XML】 翻译过来是 异步的 JavaScript 和 XML ，它不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是 在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容 。
AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新【传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面】。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网 等等。
AJAX 实例
这是一段前端代码，用于 模拟 AJAX ，就是不通过刷新页面就可以得到数据 。代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX 实例</title>
</head>
<script type="text/javascript">
function loadPage() {
var URL = document.getElementById('url').value;
document.getElementById('iframePosition').src = URL;
}
</script>
<body>
<div>
<h3>请输入要加载的网址：</h3>
<p>
<input type="text" placeholder="https://www.baidu.com" value="" id="url" />
<input type="button" value="submit" id="url" onclick="loadPage()" />
</p>
</div>
<div>
<h3>加载页面的位置：</h3>
<iframe style="width:100%;height: 500px;" id="iframePosition"></iframe>
</div>
</body>
</html>
|
最终效果如下图：
AJAX 和 Java 交互
这部分内容就不再写了，具体可参考以下教程。搜索关键词：【Ajax java】：
菜鸟教程之AJAX
Java Web 之 AJAX
JSON 知识
JSON 简介
CSDN教程之JSON
菜鸟教程之JSON
JSON 的数据格式一览：
1
2
3
4
5
6
7
8
9
10
11
12
| {
"date": "2019.12.27",
"src": "https://guoshizhan.github.io/avatar.gif",
"name": "何年の再遇见",
"desc": "愿你走出半生，归来仍是少年",
"url": "https://guoshizhan.github.io",
"address": {
"street": "学苑路",
"city": "吉安"
},
"hobby": [sleep, read, music]
}
|
