JAX常见应用情景

1.使用JQuery中的ajax方法实现步骤jQuery是js的一个框架

2.$.ajax()

翻译成中文就是“异步JavaScript和XML”即使用JavaScript与服务器进行异步交互传输的数据为XML。

AJAX还可以在浏览器实现局部刷新的效果即不需要刷新整个页面就比如之前的案例验证码这一特点给用户的感受是在不知不觉中完成请求和响应过程。

与服务器异步交互实现浏览器页面局部刷新

同步交互客户端发出一个请求后需要等待服务器响应结束后才能发出第二个请求

异步交互客户端发出一个请求后无需等待服务器响应结束就可以发出第二个请求。

通俗来说同步交互就如同当你向一个人发消息你发了一条必须要等对方回复了才能发下一条异步交互则不需要等待对方的回复两人可以同时发送自己想发的信息。

三AJAX常见应用情景

当输入用户名后把光标移动到其他表单项上时浏览器会使用AJAX技术向服务器发出请求服务器会查询名为zhangSan的用户是否存在最终服务器返回true表示名为zhangSan的用户已经存在了浏览器在得到结果后显示“用户名已被注册”。

AJAX使用JavaScript技术向服务器发送异步请求AJAX不需要刷新整个页面因为服务器不是响应的整个页面而是局部所以AJAX能够提高系统的性能

AJAX并不适用所有场景有很多情况还是需要用到同步交互AJAX虽然提高了用户的体验但无形中向服务器发送了太多请求导致服务器的压力增大因为AJAX是在浏览器中使用JavaScript技术完成的所以还需要考虑服务器的兼容性问题

五使用jQuery实现AJAX

JQuery中已经将AJAX相关的操作进行了封装,使用时只需要在合适的地方调用AJAX相关的方法即可

1.使用JQuery中的ajax方法实现步骤jQuery是js的一个框架

先引入jQuery文件调用jQuery中的ajax函数编写Servlet方法接受请求并处理在ajax中接收来自服务端的结果

2.$.ajax()

$.ajax()可以通过发送HTTP请求加载远程数据,是jQuery最底层的AJAX的实现,具有较高灵活性

语法:

type请求方式(POST或者GET,默认为GET)Number

data

dataType预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Textfunction

xhr,String

ts)请求成功后调用的函数参数result:可选,由服务器返回的数据参数ts可选,描述请求类型的字符串function

error(XMLHttpRequest

绑定事件bluron实现光标移开聚焦即可检测用户名是否存在在jsp中使用ajax函数湘服务器传递参数编写Servlet类通过response对象得到响应输出流湘客户端写入用户名是否存在的数据编写dao层方法从数据库中查询该用户名的信息

JSP页面

contentTypetext/html;charsetUTF-8

languagejava

srchttps://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js/scriptscript$(function(){$(#uname).blur(function(){var

uname

http://localhost:8080/CheckUsername,type:

get,data:

req.getParameter(uname);req.setCharacterEncoding(utf-8);resp.setContentType(text/html;charsetutf-8);UserService

userService

UserServiceImpl();if(userService.queryUsername(uname)){resp.getWriter().write(用户名已存在);}else{resp.getWriter().write(用户名不存在);}}Overrideprotected

void

JdbcUtils.getConnection();String

sqlselect

BeanListHandlerUser(User.class),uname);if

false;}else