Ajax

AJAX:
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。是与服务器交换数据并更新部分网页的技术,能在不重新加载整个页面的情况下实现局部刷新的功能。XMLHttpRequest 是 AJAX 的基础,它用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
在这里插入图片描述
传统方式的web请求(同步请求): 如果需要更新内容,必需重载整个网页面。
ajax请求(异步请求): 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。

jQuery实现AJAX:
1.引入jQuery脚本库
在这里插入图片描述
2.编写ajax模板:
在这里插入图片描述
3.ajax属性介绍:
3.1 url:ajax发送请求的一个路径
相对路径:user/login.do(ajax自动拼接:当前地址/项目名/user/login.do)
绝对路径:/项目名/user/login.do或${pageContext.request.contextPath}/user/login.do(ajax不进行拼接地址操作)
3.2 type:提交方式,有GET和POST两种
3.3 data:发送请求的时候,需要携带的参数(key/value形式)
3.4 success:请求成功后的回调函数(data)
3.5 error:执行出现错误时返回方法
3.6 dataType:预期服务器返回的数据类型,比如json
4.对于以上属性:
4.1 属性名必须严格按照jQuery规定写,比如url,type
4.2 遵循{属性名:值}的格式,属性之间用逗号分隔开,最后一个属性不要逗号
4.3 属性没有先后顺序
5.提交方式:与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
5.1 无法使用缓存文件(更新服务器上的文件或数据库)
5.2 向服务器发送大量数据(POST 没有数据量限制)
5.3 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

jQuery集成Ajax实例:
1.在前端执行ajax
在这里插入图片描述
2.测试发送请求连接到后端
在这里插入图片描述3.测试传送参数到后端
前端:
在这里插入图片描述
后端:
在这里插入图片描述
4.添加ajax错误返回方法,分析错误原因
在这里插入图片描述
5.书写登录逻辑,通过对象HttpServletResponse响应结果给ajax
在这里插入图片描述
6.Ajax逻辑书写
在这里插入图片描述
总结:
1. 请求来源于前端页面,通过后端方法回调,最后终于前端页面
2. 可以没有方法的返回值,没有返回值,就没有界面跳转,从而实现了无刷新操作
3. 后端不再处理界面跳转及收集参数的需求,交由前台处理,从而实现后端专注代码的开发
4. 基于此技术实现前端和后台分离,让开发效率更高(RESTful架构)

SpringMVC集成Ajax返回功能:
1.在springmvc-servlet.xml配置文件中开启fastJson功能
在这里插入图片描述
2.在Controller层加上注解@ResponseBody,表示开始调用springMVC的JSON转换功能
在这里插入图片描述
3.方法的返回值决定return值的类型,也决定了是什么样类型的值被JSON转译后,回调到Ajax
如:public String 就return一个字符串, public boolean就return true或 false
4. 根据返回值,在前端页面做逻辑的处理及页面的跳转
在这里插入图片描述

JackSon 和FastJSON 差异对比:
1.字符串类型:String msg = “true”/“false”
JackSon:自动转换为Boolean类型的true/false
FastJSON :字符串类型的“true”/“false”
2.布尔类型:Boolean bl = true/false
JackSon:Boolean类型的true/false
FastJSON :Boolean类型的true/false

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值