当前位置: 首页 > 图灵资讯 > 技术篇> ajax乱码问题和异步同步问题

ajax乱码问题和异步同步问题

来源:图灵教育
时间:2023-05-28 09:29:51

1.测试内容:201.1发送ajaxget请求

将数据发送到服务器,服务器获取的数据是否乱码?

-服务器响应前端的中文,会不会乱码?

1.2发送ajaxpost请求

-将数据发送到服务器,服务器获取的数据是否乱码?

-服务器响应前端的中文,会不会乱码?

1.3包括测试tomcat服务器的版本:

-测试tomcat10和tomcat9。

2.测试结果:20

-对于tomcat10,我们程序员不需要干涉字符集,也不需要乱码。

tomcat9呢?

-响应中文时,会出现乱码。如何解决?

response.setContentType("text/html;charset=UTF-8");

-发送ajaxpost请求时,发送给服务器的数据,服务器接收后的乱码,如何解决?

request.setCharacterEncoding("UTF-8");

com中的代码.bjpowernode.ajax.servletAjaxrequest7Servlet
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\course6webajax8.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("myp").innerHTML = this.responseText                    }                }            }            var username = document.getElementById("username").value            xhr.open("GET","/ajax/ajaxrequest7username="+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("myp").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><p id="myp"></p></body></html>
3.AJAX的异步和同步213.1什么是异步?什么是同步?21

-ajax请求1和ajax请求2同时并发,没有人需要等待任何人,这就是异步。(a不等b,b不等a)

-如果ajax请求1在发送时需要等待ajax请求2结束后才能发送,那么这就是同步。(a等待b或b等待a,只要等待发生,就是同步。)

代码上如何实现3.2异步和同步?213.2.假设ajax要求121

如果第三个参数是false:这意味着“ajax请求1”不支持异步,也就是说,ajax请求1发送后,会影响其他ajax请求的发送。只有当我的请求结束时,你的其他ajax请求才能发送。

false说不支持异步。我的请求发出后,你的其他请求都要靠边站。等着。别动,等我结束了再说。

xhr1.open(“请求方式”URL",false)

xhr1.send()

3.2.假设这是ajax请求221

如果第三个参数是true:这意味着“ajax请求2”支持异步请求,即ajax请求2发送后,其他ajax请求的发送不受影响。

xhr2.open(“请求方式”URL",true)

xhr2.send()

com中的代码.bjpowernode.ajax.servlet21Ajaxrequest8Servlet
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\course6webajax9.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("p1").innerHTML = this.responseText                    }else {                        alert(this.status)                    }                }            }            //xhr.open("GET","/ajax/ajaxrequest8t="+new Date().getTime(),true)            // 我不支持异步。只要我发这个请求,你就得靠边站。t="+new Date().getTime(),true)            // 我不支持异步。只要我发送这个请求,你就必须站在一边。你必须等我结束才能发送请求。            xhr.open("GET", "/ajax/ajaxrequest8t=" + 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("p2").innerHTML = this.responseText                    }else{                        alert(this.status)                    }                }            }            xhr.open("GET", "/ajax/ajaxrequest9t=" + new Date().getTime(), true)            xhr.send()        }    }</script><button id="btn1">ajax请求1</button><p id="p1"></p><button id="btn2">ajax请求2</button><p id="p2"></p></body></html>

上一篇:

级联查询

下一篇:

封装 JDBCUtils和事务