AJAX
JavaWeb之AJAX
什么是Ajax
- AsynchronousJavaScriptAndXML
- 它不是新的编程语言，是一种使用现有标准的新方法
- 它就是一个页面局部刷新的技术(在页面不进行刷新的情况下页面的部分地方与后台交互)
- 把先用成熟的技术组合在一起，形成一种新的操作方式
- HTML
- JavaScript
- css
- dom
- xml
- XMLHttpRequest
- ajax的实现是基于JavaScript的
Ajax的请求与传统请求的区别
- 异步请求与同步请求的区别
- 同步请求
- 客户端发送请求
- 服务端响应请求
- 调用者必须等待服务器返回结果，才能做其他事情
- 界面交互十分不友好
- 异步请求
- 调用者发送一个请求，不需要等待服务器返回响应
- 当服务端响应结果后，会通知调用者，返回结果
- 核心技术点：Ajax引擎对象
Ajax的实现方式
- 核心对象
- Ajax的引擎对象XMLHttpRequest
- 步骤
- 创建ajax引擎对象
- 使用open方法设置异步的请求链接处理(打开链接)
- xmlHttpRequestr.open("提交方式","提交参数",是否为异步);
- 设置回调函数 xmlHttpRequestr.onreadstatechange=callback
- onreadstatechange：存储函数，每当readState属性改变时，就会调用该函数
- on：事件、readstate：读取状态、change：更改
- readstate状态码
- 0：请求初始化
- 1：服务器连接已建立
- 2：请求已接收
- 3：请求处理中
- 4：请求已完成，且响应已就绪
- status状态
- 服务器状态码
- 200：OK
- 404：找不到页面
- ....等等
- 实现回调函数function callback(){}
- 发送请求 xmlHttpRequestr.send(null)
- GET请求
- 由于get请求的参数是在地址栏中，所以，在send发送时，是不需要传递数据的，所以send发送时，为null
- POST请求
- 由于post请求的参数是在请求体中的，所以在send发送时，需要将参数发送到请求体中，所以，send发送时，参数为请求参数
- 在使用send方法发送post请求参数时，需要设置请求头，没有请求头无法传递参数数据
- xmlHttpRequestr.setRequestHeader("Content type","application/x-www-form-urlencoded")
- 服务端响应的数据会被存储到 XMLHttpRequest下的responseTest属性中
- Ajax的JQuery实现
- JQuery是对JavaScript的封装库
- ajax是基于JavaScript
- 常用的操作
- $.ajax()
- 常用参数
- type -- 请求类型
- url -- 使用ajax提交请求的地址
- data -- 使用ajax提交请求的参数
- success -- ajax提交请求成功后执行的回调函数
- $.get()
- 常用参数
- url -- 使用ajax的get方式提交请求的地址
- data -- 使用ajax的get方法提交请求的参数
- callback -- 使用ajax的get方式提交请求后执行的回调函数
- type
- 使用ajax的get方法提交请求成功后，在执行回调函数时设置返回数据的格式
- 格式
- XML
- HTML
- script
- json
- text
- $.post()
- 常用参数：和get一样
- $.JSON()
- 常用参数
- 和get的常用方法类似
- 区别：没有type属性
- getJSON是以get方式提交，以JSON格式返回数据，所以不需要type属性来指定返回类型
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>JavaScript实现ajax实例</title>
<script src="js/jquery-3.5.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#username").blur(function () {
var value=$(this).val();
// $.ajax({
// type:"post",
// url:"validata.do",
// data:"username="+value,
// success:function (data) {
// alert("data参数中是服务端响应的数据:"+data);
// }
// });
// $.get("validata.do",{"username":value},function (data) {
// alert("get发送的ajax返回的响应数据:"+data.info+","+data.password);
// },"json");
// $.post("validata.do",{"username":value},function (data) {
// alert("get发送的ajax返回的响应数据:"+data.info+","+data.password);
// },"json");
$.getJSON("validata.do",{"username":value},function (data) {
alert("get发送的ajax返回的响应数据:"+data.info+","+data.password);
});
});
});
</script>
</head>
<body>
<div align="left">
<form action="login.do" method="get">
帐户:<input type="text" name="username" id="username"/><span id="span_name"></span><br/>
密码:<input type="password" name="password"/><br/>
<input type="submit" value="提交"/>
</form>
</div>
</body>
</html>
- ajax接收服务端Java对象数据
- 拼接json
- 使用Json工具
- 使用Jackson可以实现Java后端与前端数据交互
- 操作步骤
- 导包
- 创建工具类对象
- 将指定Java对象传入前端