Ajax的初步了解：
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 优点：在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。
Ajax的关键元素：
JavaScript语言：Ajax技术的主要开发语言
XML / SON / HTML等：用来封装请求或响应的数据格式
DOM文档对象模型：通过 DOM 属性或方法修改页面元素，实现页面局部刷新
CSS：改变样式，美化页面效果，提升用户体验
Ajax 引擎 ：即 XMLHttpRequest 对象，以异步方式在客户端与服务器端之间传递数据
我们通常使用 JQuery 来实现 Ajax，直接使用 $.ajax()方法：
前提：要引入 JQuery 依赖，浏览器搜索JQuery cdn 选择百度的即可。
这样的优点：可以通过发送 HTTP请求加载远程数据，是 jQuery 最底层的 Ajax 实现，具有较高灵活性。
例子：博客系统 blog_list 中的代码修改 (注意代码注释)
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="js/app.js"></script> <script> //从服务器获取数据发送 ajax function getBlogs() { $.ajax({ type: 'get',//请求的方法是get url: 'blog',//请求的URL是blog 对应后端 @WebServlet("/blog"); // 获取成功, 则 body 就是一个 js 对象数组. 每个元素就是一个博客 success: function (body) { let container = document.querySelector('.container-right'); for (let blog of body) {//遍历，和java中的for-each类似 //每个 clss=blog 的div 就是一个博客 let blogDiv = document.createElement('div'); blogDiv.className = 'blog'; //构造博客标题 let titleDiv = document.createElement('div'); titleDiv.className = 'title'; //构造博客日期 let dateDiv = document.createElement('div'); dateDiv.className = 'date'; //构造博客摘要 desc let descDiv = document.createElement('div'); dateDiv.className = 'desc'; //构造查看全文按钮 let a = document.createElement('a'); a.href = 'blog_detail.html?blogId=' + blog.blogId;//这里表示 如果blogID为null则返回博客列表，如果有id则返回一个博客的详情页 a.innerHTML = '查看全文 >>';//>是一个转义字符 表示 '>' //拼装并获得最终结果 blogDiv.appendChild(titleDiv); blogDiv.appendChild(dateDiv); blogDiv.appendChild(descDiv); blogDiv.appendChild(a); container.appendChild(blogDiv);//把这个准备好的博客放到 container 中 } } }); } </script>
