一、概述
javascript和xml -- 异步请求
在不中断用户对页面的情况下，实现和后台操作的数据交互，并利用服务器的响应数据进行页面的局部更新。
异步：用户对页面操作和请求是可以同时进行的（与同步不同）
更新：无需对整个页面进行刷新，所以后台向页面响应的数据无需包含全部，页面只需要添加部分内容，提高响应效率
二、ajax实现方式
2.1、原生js实现Ajax
代码：
@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置请求和响应的乱码
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
//1.获取请求参数
String username = req.getParameter("username");
//模拟服务器处理请求需要5秒钟
/*try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}*/
//2.判断姓名是否已注册
if("zhangsan".equals(username)) {
resp.getWriter().write("<font color='red'>用户名已注册</font>");
}else {
resp.getWriter().write("<font color='green'>用户名可用</font>");
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}
}
前端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<form autocomplete="off">
姓名：<input type="text" id="username">
<span id="uSpan"></span>
<br>
密码：<input type="password" id="password">
<br>
<input type="submit" value="注册">
</form>
</body>
<script>
//1.为姓名绑定失去焦点事件
document.getElementById("username").onblur = function() {
//2.创建XMLHttpRequest核心对象
let xmlHttp = new XMLHttpRequest();
//3.打开链接
let username = document.getElementById("username").value;
xmlHttp.open("GET","userServlet?username="+username,true);
//xmlHttp.open("GET","userServlet?username="+username,false);
//4.发送请求
xmlHttp.send();
//5.处理响应
xmlHttp.onreadystatechange = function() {
//判断请求和响应是否成功
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//将响应的数据显示到span标签
document.getElementById("uSpan").innerHTML = xmlHttp.responseText;
}
}
}
</script>
</html>
解析：
-
核心对象：XMLHttpRequest
用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新 -
打开链接：open(method,url,async)
method：请求的类型 GET 或 POST
url：请求资源的路径
async：true(异步) 或 false(同步) -
发送请求：send(String params)
params：请求的参数(POST 专用) -
处理响应：onreadystatechange
readyState：0-请求未初始化，1-服务器连接已建立，2-请求已接收，3-请求处理中，4-请求已完成，且响应已就绪
status：200-响应已全部 OK -
获得响应数据形式
responseText：获得字符串形式的响应数据
responseXML：获得 XML 形式的响应数据
2.2、jQuery实现Ajax
2.2.1、get | post请求方式
语法：
$.[ get | post ]("请求url",请求参数,function(data){
//data是服务器响应回来的数据
//在此处解析数据，进行页面局部更新
},"响应数据类型");解释：
请求参数：
① 字符串格式，如： "username=zhangsan&pwd=123"
② json对象格式，如： {username:"zhangsan",pwd:"123"}响应数据类型：告诉框架服务器响应的数据格式，框架内部会进行对象转换
text -- 默认值，框架内部不做处理，data是string格式
json -- 框架内部会将服务器响应的json格式字符串，转成json对象
xml -- 框架内部会将服务器响应的xml格式字符串，转成document对象
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<form autocomplete="off">
姓名：<input type="text" id="username">
<span id="uSpan"></span>
<br>
密码：<input type="password" id="password">
<br>
<input type="submit" value="注册">
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//1.为用户名绑定失去焦点事件
$("#username").blur(function () {
let username = $("#username").val();
//2.jQuery的GET方式实现AJAX
$.get(
//请求的资源路径
"userServlet",
//请求参数
"username=" + username,
//回调函数
function (data) {
//将响应的数据显示到span标签
$("#uSpan").html(data);
},
//响应数据形式
"text"
);
});
</script>
</html>
2.2.3、通用方式
语法：
$.ajax({
type:"请求方式",
url:"请求路径",
data:请求参数,
async:是否同步（Boolean）
success:function(result){
//result是服务器响应回来的数据
//在此处解析数据，进行页面局部更新
},
error:function () {
alert("操作失败...");
}
dataType:"响应数据类型"
});解释：
和get相同
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<form autocomplete="off">
姓名：<input type="text" id="username">
<span id="uSpan"></span>
<br>
密码：<input type="password" id="password">
<br>
<input type="submit" value="注册">
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//1.为用户名绑定失去焦点事件
$("#username").blur(function () {
let username = $("#username").val();
//2.jQuery的通用方式实现AJAX
$.ajax({
//请求资源路径
url:"userServletxxx",
//是否异步
async:true,
//请求参数
data:"username="+username,
//请求方式
type:"POST",
//数据形式
dataType:"text",
//请求成功后调用的回调函数
success:function (data) {
//将响应的数据显示到span标签
$("#uSpan").html(data);
},
//请求失败后调用的回调函数
error:function () {
alert("操作失败...");
}
});
});
</script>
</html>
网友评论