ajax乱码问题和异步同步问题-摩杜云开发者社区

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>