ajax的常规操作(原始方式)

java 复制代码
package com.csdn.servlet;
import jakarta.servlet.GenericServlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.ServletRequest;
import jakarta.servlet.ServletResponse;
import jakarta.servlet.annotation.WebServlet;
import java.io.IOException;
import java.io.PrintWriter;
//演示Ajax
@WebServlet("/h09")
public class AjaxServlet extends GenericServlet {
    @Override
    public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
        String uname = servletRequest.getParameter("uname");
        uname = uname.toUpperCase();
        PrintWriter out = servletResponse.getWriter();
        out.println(uname);
        out.flush();
    }
}
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax01</title>
    <script>
        let xmlHttpRequest;
        function sendAjax01() {
            let uname = document.getElementById("uname").value;

            xmlHttpRequest = new XMLHttpRequest();
            xmlHttpRequest.open("Get","h09?uname="+uname,true);//Get:请求方式    h09:请求的目的地   true:异步请求
            //onreadystatechange:当状态发生改变的时候调用sendAjax01CB
            //状态取值有 0-4 ,共 5 个,我们感兴趣的是 4
            //0 表示 xmlHttpRequest未创建
            //1 表示开始发送请求
            //2 表示发送请求完成
            //3 表示开始接收响应
            //4 表示接收响应成功,客户端成功解析服务器返回的响应
            xmlHttpRequest.onreadystatechange = sendAjax01CB;    //CB:call back 回调函数
            //发送请求
            xmlHttpRequest.send();
        }
        function sendAjax01CB() {
            if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                //获取响应文本
                let msg = xmlHttpRequest.responseText;
                document.getElementById("uname2").innerText = msg;
            }
        }
    </script>
</head>
<body>
        uname:<input type="text" id="uname"/>
        <input type="button" value="发生异步请求" onclick="sendAjax01()"><br/>
        服务器响应回来的内容:<span id="uname2">&nbsp</span>
</body>
</html>
相关推荐
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员4 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐4 小时前
前端图像处理(一)
前端