目录
1.什么是AJAX?
Ajax:只刷新局部页面的技术
JavaScript
:更新局部的网页
XML
:一般用于请求数据和响应数据的封装
XMLHttpRequest对象:发送请求到服务器并获得返回结果,
Ajax
技术的核心
CSS
:美化页面样式
异步
:发送请求后
不等
返回结果,由回调函数处理结果
2,,为什么使用Ajax
无刷新:不刷新整个页面,只刷新局部
无刷新的好处:只更新部分页面,有效利用带宽,提高用户体验
3,方法
通过
HTTP
请求加载远程数据。
一、
$.ajax()
常用参数 | 说 明 |
url | 一个用来包含发送请求的URL字符串(请求地址) |
type | 请求方式 (“POST” 或 “GET“[默认]) |
data | 发送到服务器的数据(参数) |
dataType | 预期服务器返回的数据类型(xml、json、text) |
success(data) | 请求成功的回调函数 |
error | 请求失败的回调函数 |
通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
一、$.post()
常用参数 | 说 明 |
url | 一个用来包含发送请求的URL字符串(请求地址) |
data | 发送到服务器的数据(参数) key/value |
success(data) | 请求成功的回调函数 |
type | 返回内容格式(xml、json、text等 |
4,代码演示
导入jar包和js库
Servlet层编写
@SuppressWarnings("all")
@WebServlet("/userServlet")
public class UserServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置编码
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
//获取out对象
PrintWriter out = resp.getWriter();
//方法一:
// //获取前端提交的参数name
// String name = req.getParameter("name");
//
// //默认返回给前端的提示语句
// String str = "该账号可以注册!!!";
//
// //除了admin其他的都可以注册
// if(null !=name && !"".equals(name)) {
// if("admin".equals(name)) {
// str="该账号已经存在,请更换";
// }
// }
//
// //将响应新消息输出/响应到前端
// out.write(str);
// out.flush();
// out.close();
//方法二;
//获取模糊查询的关键字
String name = req.getParameter("ta");
//调用模糊查询方法
UserDao ud = new UserDao();
List<User> listUser = ud.query(name);
//后台能不能把集合listUser返回给前端
//把集合listUser转换成前台和后台都识别的数据格式,JSON(键值对形式存储数据)
String data = JSON.toJSONString(listUser);
//把json字符串data返回给前端
out.write(data);
out.flush();
out.close();
}
}
ajax实现无刷新验证(注册时账号是否存在)
<!-- 引入jquery库 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-3.3.1.js"></script>
<script type="text/javascript">
/*验证用户名是否已经存在 */
$(function(){
//给账号文本框添加失去焦点事件
$("#name").blur(function(){
//1,获取用户名
var name = $("#name").val();
//2,想后台起ajax请求
//方法一
$.post('${pageContext.request.contextPath}/userServlet',{
name:name
},function(str){
$("#sname").text(str);
},'text');/*后台返回到前端的数据是text格式 */
//方法二
$.post('${pageContext.request.contextPath}/userServlet',{
name:name
},function(str){
$("#sname").text(str);
});/*后台返回到前端的数据是text格式 */
//指明了提交方法是get方式,而且前端期望获取的数据类型是json
$.post('${pageContext.request.contextPath}/userServlet',{
name:name
},function(str){
$("#sname").text(str);
});/*后台返回到前端的数据是text格式 */
//方法三
$.ajax({
url:'请求路径',
date:'请求参数',
dataType:'json',//后台返回给前端的数据格式,html/text/json
async:true,//请求是否异步(默认异步)
success:function(str){//请求成功
alert('查询成功')
},error:function(str){//请求失败
alert('查询失败')
}
})
})
})
</script>
</head>
<body>
<div>
账号:<input type ="text" name="name" id="name">
<span id="sname"></span>
</div>
<div>
密码:<input type="password" name="pwd" id="pwd">
</div>
<button>注册</button>
</body>
</html>
用ajax实现搜索自动补全
<!-- 引入jquery库 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//给文本框添加键盘事件
$("#ta").keyup(function(){
//获取文本框的内容
let ta =$("#ta").val();
//发ajax请求
$.post('${pageContext.request.contextPath}/userServlet',{ta:ta},function(date){
//将后台响应的数据转换成js对象集合
let us = $.parseJSON(date);
if(data.length==0){//后台没有查询出数据
$("#da").hide();//没有数据则隐藏div
}else{
//否则有数据就显示div
$("#da").show();
var sb ="<ul>"
//遍历集合us
$.each(us,function(i,u){
sb +="<li>名字:"+u.name+".性别:"+u.sex+".年龄"+u.age+"</li>"
})
sb+="</ul>";
//组后把sb赐给div
$("#da").html(sb);
}
});
})
})
</script>
</head>
<body>
<input type="text" id="ta" />
<button>百度一下</button>
<hr/>
<div id="da"></div>
</body>
</html>