ajax进阶,Ajax 进阶（一）

技术基础：

HTML+CSS：略懂

JS：熟练※

开发工具：

IDEA

测试：

伪造Ajax,使用iframe 测试，感觉效果html

a)新建模块，导入web支持

b)编写一个html文件，使用iframe测试，浏览器运行



开发

基础知识：前端

使用ajax技术的网页，经过在后台服务器进行少许的数据交换，就能够实现异步局部更新。

使用Ajax，用户能够建立接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

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

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

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

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

url：请求地址

type：请求方式，GET、POST

data：要发送的数据(重要！！！！)

success：成功以后执行的回调函数(全局)

error：失败以后执行的回调函数(全局)

测试应用场景：数据库

注册时，输入用户名自动检测用户是否已经存在。浏览器

登录时，提示用户名密码错误tomcat

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

一、使用最原始的HttpServletResponse处理

(1)配置web.xml和springmvc的配置文件

(2)编写一个AjaxController

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

(4)编写index.jsp测试

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

**参数不匹配时：**


**参数匹配时：**


Tip：业务流程：

Controller接受前端发送的username参数 与data里面的值相匹配

过程当中出现的错误：

(1)缺乏lib包

缘由：构建Maven项目时打包方式没选war

解决方法：右上角项目构建，新建一个lib文件夹，手动导入lib包。

(2)运行到浏览器时，报错jQuery找不到

缘由：

①：一开始我是使用的在线CDN直接导的jQuery，网站进不去因此没访问到，后面直接手动下载包导入的。

②：手动导入后仍是报错，检查代码后发现applicationContest中静态资源过滤器没有配置。

解决方法：在文件中配置

知识内化：