AJAX
AJAX：即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，尤其是在一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
传统Web开发
World Wide Web（简称Web）：是随着Internet的普及使用而发展起来的一门技术，其开发模式是一种请求→刷新→响应的模式，每个请求由单独的一个页面来显示，发送一个请求就会重新获取这个页面。
Ajax采用异步通信，主要以数据交互为主；传统的web开发采用同步通信，主要以页面交互为主。
例子：在页面写一个生成随机数的表单
用form表单提交的方式
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
</head>
<body>
<form action="random.do" method="post">
<input type="text" name="max" >
<input type="button" value="请输入随机数" onclick="getNum()">
${num}
</form>
</body>
</html>
random.do
@WebServlet(name = "randomServlet",urlPatterns = "/random.do")
public class randomServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String strmax = request.getParameter("max");
int max = Integer.parseInt(strmax);
Random random = new Random();
int num = random.nextInt(max);
request.setAttribute("num",num);
request.setAttribute("max",max);
request.getRequestDispatcher("index.jsp").forward(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
用这种方式是向后台提交整个网页
下面用ajax方式
ajax请求步骤
1.创建Ajax对象
var request = new XMLHttpRequest();
2.连接服务器
open(method,url,async);
request.open("get","query.do",true);
//get或者post（多用get），请求的服务器地址，同步（false）或者异步（true）请求
3.发送请求
send(string)
在使用GET方式请求时无需填写参数,对数据库无害的时候用get
req.open('get','random.do?max=100‘,true);
req.send();
在使用POST方式时参数代表着向服务器发送的数据
req.open('post','random.do',true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//post请求需要设置HTTP头信息,否则发送数据有问题
req.send('max=100');
4.接收服务器相应数据
req.onload = function () {
console.log(req.responseText);
}
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script>
function getNum() {
var input = document.getElementById("max");
//以ajax的方式（js），向服务器发出请求，收到回应（回应中包含服务器生成的随机数）
//1.创建ajax请求对象
var req = new XMLHttpRequest();
//2.调用第一步中创建的req对象的open方法，设置连接服务器的信息
//open(method,url,async);method是post或者get,url是链接地址，async是true（异步）或者false（同步）
req.open("get","random.do?max="+input.value,true);
//3.真正向服务器发出该请求
req.send();
//4.处理服务器的回应,服务器回应的数据可以在req对象的responseText属性中获得
req.onload = function () {
//将该随机数显示在id是num的div中
var div = document.getElementById("num");
div.innerHTML = req.responseText;
}
}
</script>
</head>
<body>
<form action="#">
<input type="text" name="max" id="max">
<input type="button" value="请输入随机数" onclick="getNum()">
<div id="num">
</div>
</form>
</body>
</html>
random.do
@WebServlet(name = "randomServlet",urlPatterns = "/random.do")
public class randomServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String strmax = request.getParameter("max");
int max = Integer.parseInt(strmax);
Random random = new Random();
int num = random.nextInt(max);
PrintWriter printWriter = response.getWriter();
printWriter.println(num);
// request.setAttribute("num",num);
// request.setAttribute("max",max);
// request.getRequestDispatcher("index.jsp").forward(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
ajax校验用户名是否已存在
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script>
function check() {
var input = document.getElementById("username");
var req = new XMLHttpRequest();
req.open("get","reg.do?username="+input.value,true);
req.send();
req.onload = function () {
var span = document.getElementById("msg");
if(req.responseText == 1){
span.innerHTML = "用户名已经存在";
span.style.color = "red";
}
else{
span.innerHTML="可以注册";
span.style.color = "green";
}
}
}
</script>
</head>
<body>
<form action="#">
name: <input type="text" id="username" onblur = "check()">
<span id="msg"></span>
hobby:<input type="text">
<input type="button" value="注册">
</form>
</body>
</html>
reg.do
@WebServlet(name = "regServlet",urlPatterns = "/reg.do")
public class regServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
if(username.equals("admin")){
response.getWriter().println(1);
}
else {
response.getWriter().println(0);
}
}
}
网友评论