使用Ajax发送请求四个步骤:
- 创建XMLHTTPRequest对象
- 设置onreadystatechange回调函数
- open() 打开连接
- send() 发送请求
1.Ajax从Servlet中获取数据
新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<script type="text/javascript">
function change() {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let divElement=document.getElementById("div1");
divElement.innerHTML = xhr.responseText;
divElement.style.color = "red";
}
};
xhr.open("get", "test", true);
xhr.send();
}
</script>
</head>
<body>
<div id="div1">看我</div>
<button οnclick="change()">ajax修改内容</button>
</body>
</html>新建AjaxServlet.java:
package com.qianqian.practice.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(name = "AjaxServlet", value = "/test")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
response.getWriter().println("这是服务器传给你的数据");
}
}
运行结果：
2.Ajax提交表单的两种方式
本例实现一个简单版的实时检查用户注册的用户名是否在存在
一.GET方式：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<script type="text/javascript">
function change() {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let divElement = document.getElementById("div1");
divElement.innerHTML = xhr.responseText;
divElement.style.color = "red";
}
};
let userName = document.getElementById("user-name-label").value;
xhr.open("get", "test?userName=" + userName, true);
xhr.send();
}
</script>
</head>
<body>
<div id="div1"></div>
用户名:<input id="user-name-label" type="text" οninput="change()"/>
</body>
</html>AjaxServlet.java:
package com.qianqian.practice.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(name = "AjaxServlet", value = "/test")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String userName = request.getParameter("userName");
String rightName = "jack";
//如果此名存在，提示用户
if (userName.equals(rightName)) {
response.getWriter().println("此用户名已存在！");
} else {
response.getWriter().println("✔✔✔✔✔✔！");
}
}
}
结果：
二.POST方式：
使用post与get只在数据的上传形式上有一点区别，如下index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<script type="text/javascript">
function change() {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let divElement = document.getElementById("div1");
divElement.innerHTML = xhr.responseText;
divElement.style.color = "red";
}
};
let userName = document.getElementById("user-name-label").value;
xhr.open("post", "test", true);
//设置请求头(注意要卸载open后，默认Content-Type为plain）
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
xhr.send("userName=" + userName);
}
</script>
</head>
<body>
<div id="div1"></div>
用户名:<input id="user-name-label" type="text" οninput="change()"/>
</body>
</html>AjaxServlet.java同上
3.GET和POST的区别：
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：
-
不使用缓存文件（更新服务器上的文件或数据库）
-
向服务器发送大量数据（POST 没有数据量限制）
-
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
