前端基础之AJAX
AJAX
什么是AJAX，简单来说就是利用JavaScript天生异步的特性，使用异步请求后台数据，从而达到不刷新网页也能局部更新页面的效果。
原生AJAX
JavaScript中的AJAX依赖于XMLHttpRequest对象。
- Js也使用new创建对象：
new XMLHttpRequest() onreadystatechange监听事件，监听请求和响应变化，也可以理解为回调函数callback（onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。）- readyState：请求状态值，存有 XMLHttpRequest 的状态。从 0 到 4 发生变化：
- 0 : 请求未初始化
- 1 : 服务器连接已建立
- 2 : 请求已接收
- 3 : 请求处理中
- 4 : 请求已完成，且响应已就绪
- status：响应状态值：200：成功响应，404
open(method,url,async)：规定请求方式、地址、同/异步：- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置
- async：true（异步）或 false（同步）（同步时不需要设置回调函数）
send(String)发送请求。当get时，open中的url拼好参数，send中不传参数；当post时，open中不带参数，send中传入参数（此时需要使用serHeader方法设置Content-Type属性）responseText以字符串方式获得响应结果。（responseXML）以XML方式获得响应
上个原生AJAX检测用户名的Demo：
原生AJAX
前端HTML：
<h2>用户注册</h2>
用户名：
<input type="text" name="userName" id="userName"> <span id="info"></span>
Js：
//绑定失去焦点事件
document.getElementById("userName").onblur = function (ev) {
var userName = this.value;
var xhr = new XMLHttpRequest();
//绑定回调函数
xhr.onreadystatechange = function (ev1) {
if (xhr.readyState === 4 && xhr.status === 200){
document.getElementById('info').innerText = xhr.responseText;
}
};
xhr.open("get", '/AjaxServlet?userName=' + userName, true);
xhr.send();
};
servlet后台：
String userName = request.getParameter("userName");
response.setContentType("text/plain;charset=utf-8");
if ("admin".equals(userName)){//这里为了简单不从数据库获取了，直接使用固定的"admin"检验
response.getWriter().println("用户名已存在");
}else {
response.getWriter().println("用户名可用");
}
JQuery封装的AJAX
JQuery对原生AJAX进行了封装，来更方便的使用。
| 请求方式 | 语法 | 说明 |
|---|---|---|
| GET请求 | $.get(url,[data],[callback],[type]) |
带[ ]为可选参数 |
| POST请求 | $.post(url,[data],[callback],[type]) |
带[ ]为可选参数 |
| AJAX请求 | $.ajax({settings}) |
|
| GET签名 | $.get({settings}) |
jQuery3.0新增get方法 |
| POST签名 | $.post({settings}) |
jQuery3.0新增post方法 |
Get/Post
$.get(url,[data],[callback],[type])
$.post(url,[data],[callback],[type])
| 参数 | 说明 | 是否必需 |
|---|---|---|
| url | 请求地址 | 必需 |
| data | 发送给服务器端的请求参数，格式： 方式一：key=value&key=value 方式二： |
可选 |
| callback | 回调函数：当请求成功后触发的函数 | 可选 |
| type | 返回参数类型：取值可以是xml, html, script, json, text, _defaul等，默认text | 可选 |
使用JQuery的get/post方法进行AJAX访问：
$('#userName').blur(function () {
//看var不舒服换成了let
let userName = $(this).val();
$.get('/AjaxServlet', {userName:userName},function (result) {
$('#info').text(result)
});
});
//get/post用法一样
以下情况使用post，其他情况一般使用get
- 无法使用缓存文件（更新服务器上的文件或数据库）--提交表单数据
- 向服务器发送大量数据（POST 没有数据量限制） ---文件上传
使用JQuery的ajax方法进行AJAX访问：
$.ajax({settings})
setting参数：
| 属性名 | 描述 |
|---|---|
| url | 请求的url地址 |
| async | true为异步，false为同步（默认为true） |
| data | 发送到服务器的数据，可以使键值对形式，也可以是js对象形式 |
| type | 请求方式（默认为get） |
| dataType | 预期返回数据类型（xml, html, script, json, text, _default） |
| success | 请求成功的回调函数 |
| error | 请求失败的回调函数 |
ajax方法进行数据请求：
AJAX方法
$("#userName").blur(function () {
let userName = $(this).val();
$.ajax({
url:"/ajaxDemoServlet",
data:{"userName":userName,"age":4},
async:true,
type:"GET",
dataType:"text",
success:function (result) {
$("#info").text(result);
},
error:function (errorRes) {
alert("出现异常了")
}
})
});
JQuery 3.0 新增方法：$.get({settings})、$.post({settings})用法和ajax方法类似：
新增Get方法
$("#userName").blur(function () {
let userName = $(this).val();
$.get({
url:"/ajaxDemoServlet",
data:{"userName":userName,"age":4},
dataType:"text",
success:function (result) {
//处理正常的响应
$("#info").text(result);
},
error:function (errorRes) {
alert("出现异常了")
}
})
});
JSON
Json的三种表达方式：
| 类型 | 方式 | 描述 |
|---|---|---|
| 对象类型： | {K:V,K:V} |
代表一个对象，有多个属性名和值 |
| 数组/集合类型： | [V1，V2，V3] |
代表一个数组对象，里面的元素可以是任意类型 |
| 混合类型： | [{K:V, K:V}, {K:V, K:V}]或{K:[V, V, V]} |
代表数组中每个元素都是对象，一个对象某个属性值是一个数组 |
Java中Json与对象互转
使用Jackson
添加依赖（可以手动添加三个包jackson-databind.jar jackson-core.jar jackson-annotation.jar，或者直接使用maven）：
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.9</version>
</dependency>
对象转化Json字符串：
依靠ObjectMapper对象，调用writeValueAsString(Object o)方法即可把对象、数组、集合转化为Json。
Json字符串转化为对象
调用ObjectMapper的public <T> T readValue(String content, Class<T> valueType)方法。
使用FastJson工具类
主要使用toJSONString和parseObject两个静态方法进行序列化和反序列化的操作，这里不再赘述。
AJAX 进行用户名验证的Demo
前端页面：
<input type="text" id="inputUserName" name="username" class="form-control" placeholder="用户名" required autofocus>
<span id="info"></span>
完整代码：
HTML完整代码
使用了Bootstrap框架，请自行修改JS文件位置。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come test in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>AJAX Demo</title>
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/css/login.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form class="form-signin" action="/login" method="POST">
<div class="text-center">
<h2 class="form-signin-heading">登录页面</h2>
</div>
<label for="inputUserName" class="sr-only">用户名</label>
<input type="text" id="inputUserName" name="username" class="form-control" placeholder="用户名" required autofocus>
<span id="info"></span>
<label for="inputPassword" class="sr-only">密码</label>
<input type="password" id="inputPassword" name="password" class="form-control" placeholder="密码" required>
<div>
<input type="text" name="checkCode" class="form-control" style="width: 184px;float: left;"
placeholder="请输入验证码">
<img id="captcha" style="width: 84px;margin-left: 29px;" src="/CodeServlet" alt="验证码"
onclick="changeImg(this)">
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> 记住账号密码
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
</form>
</div> <!-- /container -->
</body>
<script src="/js/jquery.js"></script>
<script src="/js/myjs/login.js"></script>
</html>
JavaScript绑定事件：
//使用JQuery绑定
$('#inputUserName').blur(function () {
//获取输入的userName
let userName = $(this).val();
if (userName === "") {
$('#info').html('<font color="red">请输入用户名</font>');
} else {
//AJAX异步请求数据
$.get('/CheckNameServlet', {userName: userName}, function (result) {
//这里需要把字符串转化为boolean
if (!JSON.parse(result.flag)) {
$('#info').html('<font color="red">用户名已存在</font>');
} else {
$('#info').html('<font color="green">✔</font>');
}
console.log(result);
},'json')
}
});
然后是后端控制层：
@WebServlet("/CheckNameServlet")
public class CheckNameServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/plain;charset=utf-8");
String userName = request.getParameter("userName");
UserService us = new UserService();
boolean flag = us.queryUserByName(userName);
Map<String,String> map = new HashMap<>();
map.put("flag", String.valueOf(flag));//返回布尔值好像还不如返回 0 或 1
//这里使用了Jackson转化为Json
response.getWriter().print(new ObjectMapper().writeValueAsString(map));
//System.out.println(map);
}
}
后台业务层：
public class UserService {
public boolean queryUserByName(String name){
UserDao ud = new UserDao();
List<User> list = ud.queryUserByName(name);
if (list!=null && list.size()>0){
return false;
}else {
return true;
}
}
}
后台持久层：
public class UserDao {
public List<User> queryUserByName(String name) {
JdbcTemplate jt = DataSourceUtil.getJdbcTemplate();
String sql = "select * from t_user where username = ?";//这个sql不太好，查询了太多无用数据
return jt.query(sql, new BeanPropertyRowMapper<>(User.class), name);
}
}
最终效果：
初始页面：
不输入的情况下用户名框失去焦点时：
输入已存在用户名时：
用户名可用时：
至此，AJAX简单介绍完毕
