AJAX学习笔记4解决乱码问题_biubiubiu0706的博客-CSDN博客
示例
前端代码
<!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("请求失败")
}
}
}
xhr.open("get","/ajax/test1",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("div2").innerHTML=this.responseText
}else{
alert("请求失败")
}
}
}
xhr.open("get","/ajax/test2",false)
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>
后端两个
test1
package com.web;
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;
/**
* @author hrui
* @date 2023/9/4 10:34
*/
@WebServlet("/test1")
public class AjaxRequestTest1 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
try {
Thread.sleep(10000);
} catch (InterruptedException e) {
e.printStackTrace();
}
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().print("AJAX请求1");
}
}
test2
package com.web;
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;
/**
* @author hrui
* @date 2023/9/4 10:34
*/
@WebServlet("/test2")
public class AjaxRequestTest2 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// try {
// Thread.sleep(10000);
// } catch (InterruptedException e) {
// e.printStackTrace();
// }
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().print("AJAX请求2");
}
}
同步与异步的使用
当第一个按钮改成同步后 test1里面睡10秒
文章来源:https://www.toymoban.com/news/detail-703631.html
文章来源地址https://www.toymoban.com/news/detail-703631.html
到了这里,关于AJAX学习笔记5同步与异步理解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!