1. 测试内容： 20
1.1 发送ajax get请求
发送数据到服务器，服务器获取的数据是否乱码？
- 服务器响应给前端的中文，会不会乱码？
1.2 发送ajax post请求
- 发送数据到服务器，服务器获取的数据是否乱码？
- 服务器响应给前端的中文，会不会乱码？
1.3 包括还要测试tomcat服务器的版本：
- tomcat10和tomcat9都要进行测试。
2. 测试结果：20
- 对于tomcat10来说，关于字符集，我们程序员不需要干涉，不会出现乱码。
对于tomcat9来说呢？
- 响应中文的时候，会出现乱码，怎么解决？
response.setContentType("text/html;charset=UTF-8");
- 发送ajax post请求的时候，发送给服务器的数据，服务器接收之后乱码，怎么解决？
request.setCharacterEncoding("UTF-8");
代码在com.bjpowernode.ajax.servlet
AjaxRequest7Servlet
package com.bjpowernode.ajax.servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
//测试ajax乱码问题 20
@WebServlet("/ajaxrequest7")
public class AjaxRequest7Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//接收的中文会不会出现乱码问题
String username = request.getParameter("username");
System.out.println(username);
//响应的中文会有乱码嘛
//get请求tomcat9以及之前的版本，这行代码是必须的
//response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print(username);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//接收的中文会不会出现乱码问题
//post请求 tomcat9以及之前的版本，这行代码是必须的
//request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
System.out.println(username);
//响应的中文会有乱码嘛
PrintWriter out = response.getWriter();
out.print(username);
}
}E:\java学习\Ajax\course\course6\web
ajax8.html
<!--测试ajax乱码问题 20-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试ajax乱码问题</title>
</head>
<body>
<script type="text/javascript">
window.onload = function (){
document.getElementById("btn1").onclick = function (){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if (this.readyState==4) {
if(this.status==200){
document.getElementById("mydiv").innerHTML = this.responseText
}
}
}
var username = document.getElementById("username").value
xhr.open("GET","/ajax/ajaxrequest7?username="+username+"&t="+new Date().getTime(),true)
xhr.send()
}
document.getElementById("btn2").onclick = function (){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if (this.readyState==4) {
if(this.status==200){
document.getElementById("mydiv").innerHTML = this.responseText
}
}
}
xhr.open("POST","/ajax/ajaxrequest7",true)
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
var username = document.getElementById("username").value
xhr.send("username="+username)
}
}
</script>
<input type="text" id="username">
<button id="btn1">发送ajax get请求，测试乱码问题</button>
<button id="btn2">发送ajax post请求，测试乱码问题</button>
<div id="mydiv"></div>
</body>
</html>
3. AJAX的异步与同步 21
3.1 什么是异步？什么是同步？ 21
- ajax请求1和ajax请求2，同时并发，谁也不用等谁，这就是异步。（a不等b，b也不等a）
- 如果ajax请求1在发送的时候需要等待ajax请求2结束之后才能发送，那么这就是同步。（a等待b，或者b等待a，只要发生等待，就是同步。）
3.2 异步和同步在代码上如何实现？ 21
3.2.1 假设这个是ajax请求1 21
如果第三个参数是false：这个就表示“ajax请求1”不支持异步，也就是说ajax请求1发送之后，会影响其他ajax请求的发送，只有当我这个请求结束之后，你们其他的ajax请求才能发送。
false表示，不支持异步。我这个请求发了之后，你们其他的请求都要靠边站。都等着。你们别动呢，等我结束了你们再说。
xhr1.open("请求方式", "URL", false)
xhr1.send()
3.2.2 假设这个是ajax请求2 21
如果第三个参数是true：这个就表示“ajax请求2”支持异步请求，也就是说ajax请求2发送之后，不影响其他ajax请求的发送。
xhr2.open("请求方式", "URL", true)
xhr2.send()
代码在com.bjpowernode.ajax.servlet 21
AjaxRequest8Servlet
package com.bjpowernode.ajax.servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
//演示ajax的同步或者异步 21
@WebServlet("/ajaxrequest8")
public class AjaxRequest8Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
//设置睡眠时间
Thread.sleep(10*1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
response.setContentType("text/html;chaset=UTF-8");
PrintWriter out = response.getWriter();
out.print("ajax请求1");
}
}AjaxRequest9Servlet
package com.bjpowernode.ajax.servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
//演示ajax的同步或者异步 21
@WebServlet("/ajaxrequest9")
public class AjaxRequest9Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print("ajax请求2");
}
}E:\java学习\Ajax\course\course6\web
ajax9.html
<!--演示ajax的同步或者异步 21-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示ajax的同步或者异步</title>
</head>
<body>
<script type="text/javascript">
window.onload = function (){
document.getElementById("btn1").onclick = function (){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if(this.readyState==4){
if(this.status==200){
document.getElementById("div1").innerHTML = this.responseText
}else {
alert(this.status)
}
}
}
//xhr.open("GET","/ajax/ajaxrequest8?t="+new Date().getTime(),true)
// 我不支持异步了，我这个请求只要发，你们都得靠边站。都得等着我结束你们才能发请求。
xhr.open("GET", "/ajax/ajaxrequest8?t=" + new Date().getTime(), false)
xhr.send()
}
document.getElementById("btn2").onclick = function (){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if (this.readyState == 4) {
if (this.status == 200) {
document.getElementById("div2").innerHTML = this.responseText
}else{
alert(this.status)
}
}
}
xhr.open("GET", "/ajax/ajaxrequest9?t=" + new Date().getTime(), true)
xhr.send()
}
}
</script>
<button id="btn1">ajax请求1</button>
<div id="div1"></div>
<button id="btn2">ajax请求2</button>
<div id="div2"></div>
</body>
</html>