Ajax

Asynchronous(异步) Javascript And Xml
无刷新(局部刷新)
后台传统方式的web请求(同步请求):等待服务器端响应;刷新
ajax异步请求:发送请求的同时,可以在页面上执行其他操作 无刷新 提高用户体验度
Ajax_第1张图片
jQuery实现AJAX

1.引入jquery脚本库
2.$.ajax();
3.几个属性:
url: ajax要发送请求的一个地址
相对路径:user/login.do 自动拼接地址 /项目名/user/login.do
绝对路径:/项目名/user/login.do 或 ${pageContext.request.contextPath }/user/login.do
不进行拼接地址操作
data:发送请求的时候,需要携带的参数 key/value
success:请求成功后的回调函数
type:提交方式,默认GET POST
dataType: 预期服务器返回的数据类型,比如json

$.ajax({
url:“xxx.do”,
type:“POST”,
success:function(data){},
dataType:“json”
});

对于以上代码:
a.属性名必须严格按照jquery规定写,比如url,type
b.属性名:值,中间用逗号分隔开;最后不要逗号
c.属性没有先后顺序
Ajax_第2张图片
示例:无刷新登录
1. 创建登录按钮,更改类型 提交 为 按钮
在这里插入图片描述
2. 引入javaScript 和 jQuery在这里插入图片描述
3. 触发方法login()
在这里插入图片描述
4. jQuery集成Ajax
Ajax_第3张图片
5. 测试-是否到后台
Ajax_第4张图片
6. 测试-传送参数到后台
页面
Ajax_第5张图片
后台:
Ajax_第6张图片
7. 书写登录逻辑,通过对象HttpServletResponse响应结果给Ajax
Ajax_第7张图片
8. Ajax逻辑书写Ajax_第8张图片
9. 总结:
1. 请求来源于页面,方法回调,并终于页面
2. 可以没有方法的返回值,没有返回值,就没有界面跳转,从而实现了无刷新操作
3. Controller不再处理界面跳转的需求,交由前台处理,专注代码的开发
4. 基于此技术之一,实现前端和后台分离

你可能感兴趣的:(Ajax)