ajax进阶,Ajax 进阶(一)

技术基础:

HTML+CSS:略懂

JS:熟练※

开发工具:

IDEA

测试:

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

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

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

![image.png](/img/bVbMqm7)

![image.png](/img/bVbMqnQ)

开发

基础知识:前端

使用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的请求!是后台返回给咱们的结果!测试成功!

**参数不匹配时:**

![image.png](/img/bVbMqBq)

**参数匹配时:**

![image.png](/img/bVbMqBP)

Tip:业务流程:

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

过程当中出现的错误:

(1)缺乏lib包

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

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

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

缘由:

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

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

解决方法:在文件中配置

知识内化:

你可能感兴趣的:(ajax进阶)