> 文章列表 > servlet(2)—javaEE

servlet(2)—javaEE

AJAX就是前端发请求的万能胶!它能在不刷新页面的情况下和服务器对话,绝对是前端开发的大救星!比如在登录的时候,输入账号密码点击按钮,AJAX就能悄悄地跑过去问服务器“这是谁呀?密码对吗?”这样整个页面不用刷新,用户体验直接拉满!不过,它也有点小脾气,比如不同浏览器可能会有不同的表现,这时候就得写点兼容代码让它乖乖听话了。还有,有时候服务器可能没回应,这时候就得设置个超时机制,别让AJAX一直傻等着。整体而言,AJAX就像是一个尽职尽责的快递小哥,帮你把数据安全送到,还能及时回报结果,简直是现代Web应用的标配!

servlet(2)—javaEE

1.获取请求数据

1.1开发前端发请求

ajax封装代码

// 参数 args 是一个 JS 对象, 里面包含了以下属性
// method: 请求方法
// url: 请求路径
// body: 请求的正文数据
// contentType: 请求正文的格式
// callback: 处理响应的回调函数, 有两个参数, 响应正文和响应的状态码
function ajax(args) {var xhr = new XMLHttpRequest();xhr.onreadystatechange = function () {// 0: 请求未初始化// 1: 服务器连接已建立// 2: 请求已接收// 3: 请求处理中// 4: 请求已完成,且响应已就绪if (xhr.readyState == 4) {args.callback(xhr.status, xhr.responseText)}}xhr.open(args.method, args.url);if (args.contentType) {xhr.setRequestHeader('Content-type', args.contentType);}if (args.body) {xhr.send(args.body);} else {xhr.send();}
}

html前端代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input id="u" type="text" placeholder="请输入账号"><br><input id="p" type="password" placeholder="请输入密码"><br><button onclick="