Ajax 进阶（一）

技术基础：

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的配置文件

（2）编写一个AjaxController

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

（4）编写index.jsp测试

（5）启动tomcat测试！打开浏览器的控制台，当我们鼠标离开输入框的时候，可以看到发出了一个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 />

知识内化：