Ajax 进阶(一)

时间:2020-9-6 作者:admin

技术基础:

HTML+CSS:略懂
JS:熟练※

开发工具:

IDEA

测试:

伪造Ajax,使用iframe 测试,感受效果

a)新建模块,导入web支持
b)编写一个html文件,使用iframe测试,浏览器运行
![image.png](/img/bVbMqm7)
![image.png](/img/bVbMqnQ)

开发

基础知识:

  1. 使用ajax技术的网页,通过在后台服务器进行少量的数据交换,就可以实现异步局部更新。
  2. 使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

3.jQuery 提供多个与 AJAX 有关的方法。

4.通过 jQuery AJAX 方法,能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时能够把这些外部数据直接载入网页的被选元素中。

5.jquery.ajax 使用到的部分参数:

url:请求地址
type:请求方式,GET、POST
data:要发送的数据(重要!!!!)
success:成功之后执行的回调函数(全局)
error:失败之后执行的回调函数(全局)

测试应用场景:

注册时,输入用户名自动检测用户是否已经存在。

登陆时,提示用户名密码错误

删除数据行时,将行ID发送到后台,后台在数据库中删 除,数据库删除成功后,在页面DOM中将数据行也删除。

1、使用最原始的HttpServletResponse处理
(1)配置web.xml和springmvc的配置文件

Ajax 进阶(一)


Ajax 进阶(一)

(2)编写一个AjaxController

Ajax 进阶(一)

(3)index.jsp中导入jquery , 可以使用在线的CDN , 也可以下载导入(cdn我没有访问到,直接百度下载包放入web>static>js目录下)

(4)编写index.jsp测试

Ajax 进阶(一)

(5)启动tomcat测试!打开浏览器的控制台,当我们鼠标离开输入框的时候,可以看到发出了一个ajax的请求!是后台返回给我们的结果!测试成功!

Ajax 进阶(一)

**参数不匹配时:**
![image.png](/img/bVbMqBq)
**参数匹配时:**
![image.png](/img/bVbMqBP)

Tip:业务流程:

Controller接受前端发送的username参数 与data里面的值相匹配
过程中出现的错误:
(1)缺少lib包
    原因:构建Maven项目时打包方式没选war
    解决方法:右上角项目构建,新建一个lib文件夹,手动导入lib包。
(2)运行到浏览器时,报错jQuery找不到 
    原因:
    ①:一开始我是使用的在线CDN直接导的jQuery,网站进不去所以没访问到,后面直接手动下载包导入的。
    ②:手动导入后还是报错,检查代码后发现applicationContest中静态资源过滤器没有配置。
    解决方法:在文件中配置
<mvc:default-servlet-handler />
  <mvc:annotation-driven />
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。