郑州港区建设投资公司网站新媒体平台
目录
（一）什么是Ajax
（二）同步交互与异步交互
（三）AJAX常见应用情景
（四）AJAX的优缺点
（五）使用jQuery实现AJAX
1.使用JQuery中的ajax方法实现步骤（jQuery是js的一个框架）
2.$.ajax()
语法:
（六）案例：实现光标移开输入框就判断用户名是否存在的功能
思路：
运行结果：
（一）什么是Ajax
Ajax（Asynchronous Javascript And XML） 翻译成中文就是“异步JavaScript和XML”，即使用JavaScript与服务器进行异步交互，传输的数据为XML。
AJAX还可以在浏览器实现局部刷新的效果，即不需要刷新整个页面，就比如之前的案例：验证码，这一特点给用户的感受是在不知不觉中完成请求和响应过程。
特点：
- 与服务器异步交互
- 实现浏览器页面局部刷新
（二）同步交互与异步交互
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
通俗来说，同步交互就如同，当你向一个人发消息，你发了一条，必须要等对方回复了才能发下一条，异步交互则不需要等待对方的回复，两人可以同时发送自己想发的信息。
（三）AJAX常见应用情景
当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为zhangSan的用户是否存在，最终服务器返回true表示名为zhangSan的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”。
整个过程中页面没有刷新，只是局部刷新了；
在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；
（四）AJAX的优缺点
优点：
- 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的实现,具有较高灵活性
语法:
$.ajax(
参数1：请求地址url,
参数2：请求类型,
参数3：请求参数,
参数4：请求参数的类型,
参数5：请求成功的回调函数
);
常用设置参数如下:
参 数 说 明 String url 发送请求的地址,默认为当前页地址 String type 请求方式(POST或者GET,默认为GET) Number timeout 设置请求超时时间 Object data 或 String data 发送到服务器的数据 String dataType 预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text function beforeSend(XMLHttpRequest xhr) 发送请求前调用的函数参数xhr,可选, XMLHttpRequest对象 function complete(XMLHttpRequest xhr,String ts) 请求完成后调用的函数(请求成功或失败时均调用)参数: xhr,可选, XMLHttpRequest对象, ts可选,描述请求类型的字符串 function success(Object result,String ts) 请求成功后调用的函数参数result:可选,由服务器返回的数据参数ts可选,描述请求类型的字符串 function error(XMLHttpRequest xhr,String em,Exception e) 请求失败时调用的函数参数: xhr,可选, XMLHttpRequest对象, 参数em可选,错误信息参数e:可选 ,捕获的异常对象 boolean global 默认为true,表示是否触发全局的AJAX事件
（六）案例：实现光标移开输入框就判断用户名是否存在的功能
思路：
- 绑定事件bluron，实现光标移开聚焦即可检测用户名是否存在
- 在jsp中使用ajax函数，湘服务器传递参数
- 编写Servlet类，通过response对象得到响应输出流，湘客户端写入用户名是否存在的数据
- 编写dao层方法，从数据库中查询该用户名的信息
JSP页面：
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>注册页面</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(function(){$("#uname").blur(function(){var uname = $(this).val();if(uname == ""){$("#remind").html("用户名不能为空");} else {$.ajax({url: "http://localhost:8080/CheckUsername",type: "get",data: "uname=" + uname,dataType: "text",success: function(result) {console.log("Response received: " + result);alert(result);},error: function(xhr, status, error) {console.error("AJAX Error: " + status + error);}});}});});</script> </head> <body> 用户名：<input type="text" name="uname" id="uname" /><span id="remind"></span> </body> </html>Servlet方法：
@WebServlet("/CheckUsername") public class CheckUsernameServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 接收前端输入的用户名String uname = req.getParameter("uname");req.setCharacterEncoding("utf-8");resp.setContentType("text/html;charset=utf-8");UserService userService = new UserServiceImpl();if(userService.queryUsername(uname)){resp.getWriter().write("用户名已存在");}else{resp.getWriter().write("用户名不存在");}}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);} }Dao层方法：
public class UserDaoImpl implements UserDao {@Overridepublic boolean queryUsername(String uname) {Connection conn = null;try {conn= JdbcUtils.getConnection();String sql="select * from users where username = ? ";QueryRunner qr=new QueryRunner();List<User> users = qr.query(conn,sql,new BeanListHandler<User>(User.class),uname);if (users.size()==0){return false;}else {return true;}} catch (SQLException e) {throw new RuntimeException(e);}} }运行结果：
用户名不存在：
用户名已存在：
