?AJAX
?? (Asynchronous JavaScript And XML):异步的 JavaScript 和 XML。
?
我们先来说概念中的?JavaScript
? 和 XML
?
JavaScript
? 表明该技术和前端相关;
XML
? 是指以此进行数据交换。
?
AJAX 作用有以下两方面:
我们先来看之前做功能的流程,如下图:
?
??
??
?
如上图,?Servlet
?? 调用完业务逻辑层后将数据存储到域对象中,然后跳转到指定的 jsp
?? 页面,在页面上使用 EL表达式
?? 和 JSTL
?? 标签库进行数据的展示。
?
而我们学习了 AJAX 后,就可以使用 AJAX 和服务器进行通信,以达到使用 HTML+AJAX 来替换 JSP 页面了?。如下图,浏览器发送请求 servlet,servlet 调用完业务逻辑层后将数据直接响应回给浏览器页面,页面使用 HTML 来进行数据展示。
?
??
??
??
?
?
上图所示的效果我们经常见到,在我们输入一些关键字(例如 奥运
?)后就会在下面联想出相关的内容,而联想出来的这部分数据肯定是存储在百度的服务器上,而我们并没有看出页面重新刷新,这就是 更新局部页面 的效果。再如下图:
?
??
?
?
我们在用户名的输入框输入用户名,当输入框一失去焦点,如果用户名已经被占用就会在下方展示提示的信息;在这整个过程中也没有页面的刷新,只是在局部展示出了提示信息,这就是 更新局部页面 的效果。
知道了局部刷新后,接下来我们再聊聊同步和异步:
??
??
浏览器页面在发送请求给服务器,在服务器处理请求的过程中,浏览器页面不能做其他的操作。只能等到服务器响应结束后才能,浏览器页面才能继续做其他的操作。
? 浏览器页面发送请求给服务器,在服务器处理请求的过程中,浏览器页面还可以做其他的操作。
在项目的创建?com.north.web.servlet
? ,并在该包下创建名为 AjaxServlet
? 的 servlet
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
? ?@Override
? ?protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
? ? ? ?//1. 响应数据
? ? ? ?response.getWriter().write("hello ajax~");
? }
? ?@Override
? ?protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
? ? ? ?this.doGet(request, response);
? }
}
在?webapp
? 下创建名为 01-ajax-demo1.html
? 的页面,在该页面书写 ajax
? 代码
创建核心对象,不同的浏览器创建的对象是不同的
var xhttp;
if (window.XMLHttpRequest) {
? ?xhttp = new XMLHttpRequest();
} else {
? ?// code for IE6, IE5
? ?xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
发送请求
//建立连接
xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
//发送请求
xhttp.send();
获取响应
xhttp.onreadystatechange = function() {
? ?if (this.readyState == 4 && this.status == 200) {
? ? ? ?// 通过 this.responseText 可以获取到服务端响应的数据
? ? ? ?alert(this.responseText);
? }
};
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
? ?
<meta charset="UTF-8" />
? ?
<title>Title</title>
</head>
<body>
<script>
//1. 创建核心对象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
} //2. 发送请求
xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
xhttp.send(); //3. 获取响应
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
};
</script>
</body>
</html>
在浏览器地址栏输入?http://localhost:8080/ajax-demo/01-ajax-demo1.html
? ,在 01-ajax-demo1.html
? 加载的时候就会发送 ajax
? 请求,效果如下
??
??
我们可以通过?开发者模式
? 查看发送的 AJAX 请求。在浏览器上按 F12
? 快捷键
??
??
?
?