一、概念
- Ajax（Asynchronous JavaScript and XML），即异步JavaScript和XML。这里提到的异步其实想表达的意思是局部刷新。
- AJAX 不是新的编程语言，而是一种使用现有标准的新方法，是几种原有技术的结合体，包括：（1）使用CSS和XHTML来表示。（2）使用DOM模型来交互和动态显示。（3）使用XMLHttpRequest来和服务器进行异步通信。（4）使用javascript来绑定和调用。
- Ajax 是一种在局部刷新技术，即无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
- Ajax是一种浏览器端的技术，其核心是 XMLHttpRequest 对象。不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。
- Ajax解决的需求：有的时候我们需要将本次的响应结果和当前的响应结果内容在同一个页面中展现给用户，之前的技术是在后台服务器端多次响应内容重新拼接成一个jsp页面进行响应。但是这样会造成很多响应内容被重复响应，浪费资源。Ajax技术可以只更新一部分内容，效率较高。
二、工作原理
1.关于异步和同步
异步：客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他操作。
同步：客户端必须等待服务器端的响应，在等待期间客户端不能做其他操作。
2.示意图
页面中有一部分需要更新数据，则该局部页面向服务器发送请求，并响应数据，更新局部页面。并不需要将整个页面全部刷新。
3.工作原理
XHR（XMLHttpRequest）相当于是一个通信兵，来负责客户端与服务器之间的通信传输。要打仗了，前方阵地不可能只等着通信兵传递消息其他什么也不干吧，所以前方阵地还在干着自己的事情派通信兵去请求后方指挥的命令（服务器），指挥下达命令指挥，通信兵再吧命令传到前方阵地（客户端），然后客户端把数据渲染到页面。AJAX就是通过浏览器的内置对象XMLHttpResquest来发送异步请求的，异步请求不会妨碍前方阵地（客户端）的任何操作。
4.XMLHttpRequest 对象的常用的属性
（1）onreadystatechange 属性： 状态改变的事件触发器，存有处理服务器响应的函数。当readyState的值改变时自动触发执行其对应的函数（javaScript函数 ）
xmlHttp.onreadystatechange = function() {
//我们需要在这写一些代码
}（2）readyState 属性：存有服务器响应的状态信息。readyState 属性可能的值：
//测试我们的响应是否已完成(意味着可获得数据)
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
//从服务器的response获得数据
}
}（3）responseText 属性：可以通过 responseText 属性来取回由服务器返回的数据。
//我们将把时间文本框的值设置为等于 responseText
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
document.myForm.time.value = xmlHttp.responseText;
}
其他属性如下：
5.XMLHttpRequest 对象的常用的方法
（1）open() 方法：open() 有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理。
xmlHttp.open("GET","testservlet",true);
//第一个参数：请求方式：get（请求参数在URL后边拼接，send方法为空），post（请求参数在send方法中定义）
//第二个参数：请求的URL：文件在服务器上的位置，可以是后端Servlet的别名，即将请求发送给后端Servlet进行处理
//第三个参数：同步或者异步请求：true（异步）或false（同步）（2）send() 方法：将请求送往服务器，post请求时才使用字符串参数，否则不用带参数。若为get请求，直接写null即可。
//get请求
xmlHttp.send(null);
//post请求
xmlHttp.send(name=wgh&age=44&sex=0);其它方法如下：
三、实现方式
Ajax实现流程：
- 创建XMLHttpRequest对象
- 设置请求方式并发送请求
- 回调函数
1.创建XMLHttpRequest对象
创建XMLHttp对象的语法是：
var xmlHttp=new XMLHttpRequest();如果是IE5或者IE6浏览器，则使用ActiveX对象，创建方法是：
var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");一般我们手写AJAX的时候，首先要判断该浏览器是否支持XMLHttpRequest对象，如果支持则创建该对象，如果不支持则创建ActiveX对象。JS代码如下：
//第一步：创建XMLHttpRequest对象
var xmlHttp;
if (window.XMLHttpRequest) { //非IE
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) { //IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}2.设置请求方式并发送请求
在WEB开发中，请求有两种形式，一个是get，一个是post，所以在这里需要设置一下具体使用哪个请求，XMLHttpRequest对象的open()方法就是来设置请求方式的。
//第二步：向服务器发送请求到TestServlet
xmlHttp.open("get", TestServlet, true);
xmlHttp.send();3.回调函数
所谓回调函数，就是请求在后台处理完，再返回到前台所实现的功能。XMLHttpRequest对象有一个onreadystatechange属性，这个属性返回的是一个匿名的方法，所以回调函数就在这里写。当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200 时，表示响应已就绪。在这个例子里，我们的回调函数要实现的功能就是接收后台处理后反馈给前台的数据，然后将这个数据显示到指定的div上。因为从后台返回的数据可能是错误的，所以在回调函数中首先要判断后台返回的信息是否正确，如果正确才可以继续执行。
原生的JS实现方式（总流程）
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","test",true);
xmlhttp.send(null);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("showdiv").innerHTML=xmlhttp.responseText;
}
}四、应用
- 注册时，输入用户名自动检测用户是否已经存在。
- 登陆时，提示用户名密码错误
- 删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。
Demo:使用Ajax技术完成页面局部刷新，从后台Servlet取值到指定div内显示
jsp页面：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'json.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
#showdiv{
border:solid 3px green;
background-color:yellow;
width:400px;
height:400px;
}
input{
margin-top: 40px;
margin-left: 40px;
}
</style>
<script type="text/javascript">
function test(){
var ajax=new XMLHttpRequest();
ajax.onreadystatechange=function(){
if(ajax.readyState==4){
var result=ajax.responseText;
var obj=eval("("+result+")");
var showdiv=window.document.getElementById("showdiv");
showdiv.innerHTML=result;
}
}
ajax.open("get","ajax");
ajax.send(null);
}
</script>
</head>
<body>
<h1>Welcome Ajax Study</h1>
<hr/>
<div id="showdiv"></div>
<input type="button" value="测试" onclick="test()"/>
</body>
</html>
后台Servlet：
package com.shangxuetang.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
public class MyServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
List<User> list=new ArrayList<User>();
User user= new User();
user.setUid(1);
user.setUname("aaa");
user.setPwd("bbb");
list.add(user);
User user1=new User();
user1.setUid(2);
user1.setUname("张三");
user1.setPwd("aaa");
list.add(user1);
Gson gson=new Gson();
String s=gson.toJson(list);
resp.getWriter().write(s);
}
}
五、总结
参考链接：
https://blog.csdn.net/u013766533/article/details/52314519
https://blog.csdn.net/weixin_37580235/article/details/81459282
2840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
