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中将数据行也删除。

一、使用最原始的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 />

知识内化：