文章目录
- Ajax
- 1. 同步请求异步请求
- 2. Ajax实现方式
- 3. 日程管理第四期
- 4. 响应JSON串
- 4.1 响应JSON串格式的一般格式
- Appendix
Ajax
发送请求的一些方式
1.输入浏览器回车
2.html>head>script/link
img标签
3.a标签form表单标签等
用户手动控制提交产生；
4.通过js代码产生请求；
Ajax的原理，通过js技术向后端发送请求，通过响应来进行判断是否 进行页面跳转，是否生成数据展示到dom树中
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
1. 同步请求异步请求
2. Ajax实现方式
-
假如按钮触发了一个名为getmesssgae的js函数
-
script部分
<script>
function getmessage(){
// 1.实例化一个xmlHttpRequest对象
var req = new XMLHttpRequest;
// 2.设置xmlHttpRequest回调函数
// 3.设置发送请求的方式和请求资源路径
req.open("GET","/hello?username=zhangsan");
// 4.发送请求
req.send();
}
</script>
第二部分的代码有点多，很难写
- 往页面上做出响应的代码*
req.onreadystatechange = function(){
if(req.readyState==4&&req.status==200);
// alert("后端响应了")
console.log(req.responseText)
//将信息放到指定的位置
var inputEle = document.getElementById("message")
inputEle.value = req.responseText
}
- 进行页面跳转*
window.location.href="http://www.atguigu.com"
3. 日程管理第四期
注册提交前进行校验用户名是否占用功能；
也就是前端checkUsername函数 校验完格式后，继续进行是否占用校验 并修改 usernameMsg信息
- 创建XMLHTTPRequest对象
var req = new XMLHTTPRequest()
- 设置回调函数
req.openstatechange = function(){
if(req.status ==200 && req.readyState = 4){
usernameMsg.innerText = req.responseText;
}
}
- 设置请求方式和 资源路径映射
req.open(“GET”,”user/checkUserUsed?username=”+username)
- 发送请求
req.send()
使用Ajax技术在不跳转的情况下响应到前端页面
//控制层新增函数checkUsernameUsed
/**
* 注册时接收要注册的username，目的是检测其是否 合法是否被占用
* @param req
* @param resp
*/
protected void checkUsernameUsed(HttpServletRequest req, HttpServletResponse resp) throws IOException {
// 接收用户名
String username = req.getParameter("username");
// 服务层进行查询该用户名是否存在用户
int username1 = userService.findUsername(new SysUser(null, username, "******"));
// 如果有响应已占有
// 如果没有响应可用
/**
* 0表示没查出来 username
* 1表示 占用
*/
String info = null;
if (username1==0){
info="可用";
}else if (username1==1){
info="不可用";
}
resp.getWriter().write(info);
}
注意：本次开发传参仅传入username，但是会设置一个密码，这个密码必须不为空，因为后续代码逻辑会送入MD5校验，为空报错；
密码直接设置为
******
前端代码 会进行校验格式；用户无法起此代码
4. 响应JSON串
JSON串解决问题如下
-
响应乱码问题
-
响应信息格式问题
后端响应的信息应该是JSON格式，前后端共同尊守；
如果响应可用不可用；前后端需要保持一致，就很麻烦，后端代码进行修改了，那么前端也需要跟着改；
统一的格式是前后端商量好的
- 校验不通过无法阻止表单提交
4.1 响应JSON串格式的一般格式
{
响应行 状态码200，404…
响应头
响应体 { code:”1成功/0失败”, message：业务状态码，“data”：{} }
}
响应报文如上图所示；
所谓的JSON串格式写的是 响应体中的东西
响应行必须触发，把东西响应回来，因此响应行状态码必须是200
响应体中的码是前后端提前商量好的；
code 业务状态码
message 业务状态码的补充说明
data 本次响应数据 具体内容根据业务相关
- 具体流程
我们使用jacksonlib包 转化json格式，减少后端程序员拼写字符串的难度
后端程序员撰写响应体的 class ，后续使用，直接new对象，将我们业务数据封装进去即可
public class Result<T> {
private Integer code;
private String message;
private T data;
}
-
后续会将Result对象使用jackon转化为json串
-
关于业务码code使用枚举形式进行定义，用的时候直接拿来用即可
public enum ResultCodeEnum {
/**
* 此处创建枚举对象，自动的调用下面的构造器；
*/
SUCCESS(200,"success"),
USER_ERROR(501,"usernameError"),
PASSWORD_ERROR(503,"passwordError"),
NOT_LOGIN(504,"notLogin"),
USER_USED(505,"usernameUsed");
private Integer code;
private String message;
ResultCodeEnum(Integer code, String message) {
this.code = code;
this.message = message;
}
}
- 此处创建枚举对象，自动的调用下面的构造器；
- 枚举常量通常使用大写字母表示,默认常量 不可修改；
- 枚举本身是一个类，具有类的所有成分，每一个枚举常量都是枚举类的实例，因此可以看出上面写法；
- 创建Result类 未来后端传递数据使用Result对象即可；
package schedule.common;
/**
* 全局统一响应的JSON格式处理类
*
*/
public class Result<T> {
// 返回码
private Integer code;
// 返回消息
private String message;
// 返回数据
private T data;
public Result(){}
// 返回数据
protected static <T> Result<T> build(T data) {
Result<T> result = new Result<T>();
if (data != null)
result.setData(data);
return result;
}
/**
* 对上一个build的重载，除了设置data以外，还要进行code，message的设置；
* @param body
* @param code
* @param message
* @return
* @param <T>
*/
public static <T> Result<T> build(T body, Integer code, String message) {
Result<T> result = build(body);
result.setCode(code);
result.setMessage(message);
return result;
}
public static <T> Result<T> build(T body, ResultCodeEnum resultCodeEnum) {
Result<T> result = build(body);
result.setCode(resultCodeEnum.getCode());
result.setMessage(resultCodeEnum.getMessage());
return result;
}
/**
* 操作成功，默认是将数据传进去，设置成功的状态码；
* @param data baseCategory1List
* @param <T>
* @return
*/
public static<T> Result<T> ok(T data){
Result<T> result = build(data);
return build(data, ResultCodeEnum.SUCCESS);
}
public Result<T> message(String msg){
this.setMessage(msg);
return this;
}
public Result<T> code(Integer code){
this.setCode(code);
return this;
}
// ------------------------------下面是常规的GetSet方法------------------------------
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public T getData() {
return data;
}
public void setData(T data) {
this.data = data;
}
}
- 因此在后端传递的时候，传递码可以如下表示
Result result = Result.ok();
String info = null;
if (username1==0){
result = result.ok(null);
}else if (username1==1){
result = result.build(null, ResultCodeEnum.USER_USED);
}
- 接下来将result转化为JSON串
- 导入jar包
- 导入jar包后使用ObjectMapper进行 对象–>JSON串转化
// 接下来将result转化为json串响应给客户端
ObjectMapper objectMapper = new ObjectMapper();
String info = objectMapper.writeValueAsString(result);
resp.getWriter().write(info);
对象转JSON串步骤
--导jackson包；
--实例化ObjectMapper对象
--直接使用writeValueAsString即可
- 最终还需要告诉客户端响应json串格式
resp.setContentType("application/json;charset=UTF-8");
- 响应结果如下所示
- 创建WebJson工具类
public class WebJson {
private static ObjectMapper objectMapper;
static {
objectMapper = new ObjectMapper();
}
public static void writeJson(HttpServletResponse resp, Result result){
resp.setContentType("application/json;charset=UTF-8");
try {
String s = objectMapper.writeValueAsString(result);
resp.getWriter().write(s);
} catch (JsonProcessingException e) {
throw new RuntimeException(e);
} catch (IOException e) {
throw new RuntimeException(e);
}
}
}
因此所有代码一句话即可
writeJson是一个静态方法，因此这个工具包，调的不是类，是静态方法；可以直接类名.方法进行调用
Appendix
//回调函数不会阻止表单提交；未来使用vue axios 结合promise处理；