关于java: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 />