一.什么Ajax?
Ajax:异步的Javascript和XML,用于完成局部刷新
XML是用于数据传输,现在外面开始都使用JSON
二.原生的Ajax实现方式
方法
-
获取Ajax对象(必须区分大小写)
var xhr = new XMLHttpRequest(); -
准备请求
methodType:请求的方式(GET/POST)
methodUrl:请求的路径
isSys:是否异步(默认为true) -
设置请求头类型
设置请求头的一个类型,如果是POST请求,一定要加这一句,才可以把数据传到后台位置:open之后,send之前
xhr.open(methodType,methodUrl,isSys) -
发送请求
varBody:POST请求传参(key=value&key=value&…)
xhr.send(varBody)
属性
xhr.status : 请求状态(200代表成功)
xhr.readyState : 响应状态(4代表响应完成)
xhr.responseText : 获取返回的数据(字符串)
事件
xhr.onreadystatechange =function(){} -> 监听readyState状态的变化
三.注意事项
-
使用Ajax请求,后台不进行跳转,只做数据的传输
-
返回的值都是字符串,需要我们自己做相当的判断与转换
简单Ajax案例(登录案例)
后台代码
@WebServlet("/login")
public class LoginServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String username = req.getParameter("username");
String password = req.getParameter("password");
if ("abc".equals(username) && "123".equals(password)) {
resp.getWriter().print("true");
}else{
resp.getWriter().print("false");
}
}
}
前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function login(){
//1.获取用户名和密码
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
//2.创建Ajax对象
var xhr = new XMLHttpRequest();
//3.准备请求(get请求在路径传参,post请求在send中传参)
xhr.open("post","/login");
//如果是post请求必须设置请求头类型,后台才可以拿到相应的数据
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//监听相应的事件
xhr.onreadystatechange = function(){
if (xhr.status==200 && xhr.readyState==4) {
var result = xhr.responseText;
if (result=="true") {
alert("登陆成功");
}else{
document.getElementById("err").innerHTML = "用户名或密码错误";
}
}
}
//4.发送请求(send里面加上发送的数据)
xhr.send("username="+username+"&password="+password);
}
</script>
</head>
<body>
<form action="/login" method="post">
<span style="color: red" id="err" ></span></br>
用户名:<input type="text" name="username" id="username"/>
密码:<input type="password" name="password" id="password"/>
<input type="button" onclick="login()" value="登陆"/>
</form>
</body>
</html>