Ajax 基本介绍
Ajax 是什么
- AJAX 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML)
- Ajax 是一种浏览器异步发起请求(指定发哪些数据)，局部更新页面的技术
- 传统的方式
Ajax 经典应用场景
- 搜索引擎根据用户输入关键字，自动提示检索关键字
- 动态加载数据，按需取得数据【树形菜单、联动菜单…】
- 改善用户体验。【输入内容前提示、带进度条文件上传…】
- 电子商务应用。 【购物车、邮件订阅…】
- 访问第三方服务。【访问搜索服务、rss 阅读器】
- 页面局部刷新
Ajax 原理示意图
传统的 WEB 应用
Ajax 原理示意图
JavaScript 原生 Ajax 请求
应用实例
验证用户名是否存在
演示 javascript 发送原生 ajax 请求的案例
- 在输入框输入用户名
- 点击验证用户名, 使用 ajax 方式， 服务端验证该用户名是否已经占用了, 如果该用户已经占用, 以 json 格式返回该用户信息
- 假定用户名为 king , 就不可用, 其它用户名可以=》 后面我们接入 DB[Mysql+JDBC]
- 对页面进行局部刷新, 显示返回信息
程序框架图
数据库的思路分析图
代码完成
User.java
/** * User类就是一个javabean/pojo/entity/domain */ public class User { private Integer id; private String username; private String pwd; private String email; //必须提供一个无参构造器, 是给我们的反射使用 public User() { } public User(Integer id, String username, String pwd, String email) { this.id = id; this.username = username; this.pwd = pwd; this.email = email; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPwd() { return pwd; } public void setPwd(String pwd) { this.pwd = pwd; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } }
CheckUserServlet.java
import com.google.gson.Gson; import com.hspedu.ajax.entity.User; import com.hspedu.ajax.service.UserService; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; public class CheckUserServlet extends HttpServlet { //定义一个UserService属性 private UserService userService = new UserService(); protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //System.out.println("CheckUserServlet 被调用...."); //接收ajax提交的数据 String uname = request.getParameter("uname"); System.out.println("uname= " + uname); response.setContentType("text/html;charset=utf-8"); //到DB查询 //如果有就返回user对象，否则，返回的是null //User user = userService.getUserByName(uname); //if (user != null) {//说明用户名存在..,返回该user的json格式数据字符串 // Gson gson = new Gson(); // String strUser = gson.toJson(user); // response.getWriter().write(strUser); // } else { //response.getWriter().write(""); // } //假定用户名为 king , 就不可用, 其它用户名可以 if("king".equals(uname)) {//不能使用king用户名 //后面这个信息，是从DB获取 User king = new User(100, "king", "666", "king@sohu.com"); //把 king 转成 json字符串 String strKing = new Gson().toJson(king); //返回 response.getWriter().write(strKing); } else { //如果用户名可以用，返回"" response.getWriter().write(""); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } }
login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> <script type="text/javascript"> window.onload = function () { //页面加载后执行function var checkButton = document.getElementById("checkButton"); //给checkButton绑定onclick checkButton.onclick = function () { //1. 创建XMLHttpRequest对象(!!!) [ajax引擎对象] var xhr = new XMLHttpRequest(); // 获取用户填写的用户名 var uname = document.getElementById("uname").value; //2. 准备发送指定数据 open, send //解读 //(1)"GET" 请求方式可以 GET/POST //(2)"/ajax/checkUserServlet?username=" + uname 就是 url //(3)true , 表示异步发送 xhr.open("GET", "/ajax/checkUserServlet?uname=" + uname, true); //说明，在send函数调用前，给XMLHttpRequest 绑定一个事件onreadystatechange //该事件表示，可以去指定一个函数，当数据变化，会触发onreadystatechange // 每当 xhr对象readyState 改变时，就会触发 onreadystatechange 事件 xhr.onreadystatechange = function () { //如果请求已完成，且响应已就绪, 并且状态码是200 if (xhr.readyState == 4 && xhr.status == 200) { //把返回的jon数据,显示在div document.getElementById("div1").innerHTML = xhr.responseText; //console.log("xhr=", xhr) var responseText = xhr.responseText; //console.log("返回的信息=" + responseText); if (responseText != "") { document.getElementById("myres").value = "用户名不可用" } else { document.getElementById("myres").value = "用户名可用" } } } //3. 真正的发送ajax请求[http请求] // 说明如果你POST 请求，再send("发送的数据") xhr.send(); } } </script> </head> <body> <h1>用户注册~</h1> <form action="/ajax/checkUserServlet" method="post"> 用户名字:<input type="text" name="username" id="uname"> <input type="button" id="checkButton" value="验证用户名"> <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/> 用户密码:<input type="password" name="password"><br/><br/> 电子邮件:<input type="text" name="email"><br/><br/> <input type="submit" value="用户注册"> </form> <h1>返回的json数据</h1> <div id="div1"></div> </body> </html>
sql
CREATE DATABASE ajaxdb USE ajaxdb -- 创建表 CREATE TABLE `user` ( id INT PRIMARY KEY, username VARCHAR(32) NOT NULL DEFAULT '', pwd CHAR(32) NOT NULL DEFAULT '', email VARCHAR(32) NOT NULL DEFAULT '')CHARSET utf8 ENGINE INNODB -- 测试数据 INSERT INTO `user` VALUES(100, 'king', MD5('123'), 'king@qq.com'); INSERT INTO `user` VALUES(200, 'hspedu', MD5('666'), '123@qq.com'); SELECT * FROM `user`
原生 Ajax 请求问题分析
- 编写原生的 Ajax 要写很多的代码，还要考虑浏览器兼容问题，使用不方便。
- 在实际工作中，一般使用 JavaScript 的库(比如 Jquery) 发送 Ajax 请求，从而解决这个问题
在线文档：jQuery AJAX get() 和 post() 方法
$.ajax 方法
1. $.ajax 常用参数
● url： 请求的地址
● type : 请求的方式 get 或 post
● data : 发送到服务器的数据。将自动转换为请求字符串格式
● success: 成功的回调函数
● error: 失败后的回调函数
● dataType: 返回的数据类型 常用 json 或 text
. g e t 请求和 .get 请求和.get请求和.post 请求
- $.get 和 $.post常用参数
url: 请求的 URL 地址
data: 请求发送到服务器的数据
success: 成功时回调函数
type: 返回内容格式，xml, html, script, json, text
- 说明：$.get 和 . p o s t 底层还是使用 .post 底层还是使用.post底层还是使用.ajax()方法来实现异步请求
$.getJSON
- $.getJSON 常用参数
url: 请求发送的哪个 URL
data: 请求发送到服务器的数据
success: 请求成功时运行的函数
- 说明：. g e t J S O N 底层使用 .getJSON 底层使用.getJSON底层使用.ajax()方法来实现异步请求
代码实战
- 在输入框输入用户名
- 点击验证用户名, 服务端验证该用户名是否已经占用了, 如果该用户已经占用, 以 json格式返回该用户信息
- 链接数据库验证表前面有
- 对页面进行局部刷新, 显示返回信息
login2.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> <!-- 引入jquery--> <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function () { //绑定事件 $("#btn1").click(function () { //发出ajax /** * 解读 * 1. 指定参数时，需要在{} * 2. 给参数时，前面需要指定参数名 * 3. dataType: "json" 要求服务器返回的数据格式是json */ // $.ajax({ // url: "/ajax/checkUserServlet2", // type: "POST", // data: { //这里我们直接给json, 为啥我要传日期, 为了浏览器缓存 // username: $("#uname").val(), // date: new Date() // }, // error: function () { //失败后的回调函数 // console.log("失败~") // }, // success: function (data, status, xhr) { // console.log("成功"); // console.log("data=", data); // console.log("status=", status); // console.log("xhr=", xhr); // //data是json对象-> 显示转成json的字符串 // $("#div1").html(JSON.stringify(data)); // //对返回的结果进行处理 // if ("" == data.username) { // $("#myres").val("该用户名可用"); // } else { // $("#myres").val("该用户名不可用"); // } // }, // dataType: "json" // }) //说明 //1.$.get() 默认是get请求，不需要指定 请求方式 //2.不需要指定参数名 //3.填写的实参，是顺序 url, data, success回调函数, 返回的数据格式 //讲解.get() 使用 // $.get( // "/ajax/checkUserServlet2", // { // username: $("#uname").val(), // date: new Date() // }, // function (data, status, xhr) { // console.log("$.get() 成功"); // console.log("data=", data); // console.log("status=", status); // console.log("xhr=", xhr); // //data是json对象-> 显示转成json的字符串 // $("#div1").html(JSON.stringify(data)); // //对返回的结果进行处理 // if ("" == data.username) { // $("#myres").val("该用户名可用"); // } else { // $("#myres").val("该用户名不可用"); // } // }, // "json" // ) //说明$.post() 和 $.get() 的方式一样 //只是这时，是按照post方式发送ajax请求 // $.post( // "/ajax/checkUserServlet2", // { // username: $("#uname").val(), // date: new Date() // }, // function (data, status, xhr) { // console.log("$.post() 成功"); // console.log("data=", data); // console.log("status=", status); // console.log("xhr=", xhr); // //data是json对象-> 显示转成json的字符串 // $("#div1").html(JSON.stringify(data)); // //对返回的结果进行处理 // if ("" == data.username) { // $("#myres").val("该用户名可用"); // } else { // $("#myres").val("该用户名不可用"); // } // }, // "json" // ) //说明 //1. 如果你通过jquery发出的ajax请求是get 并且 返回的数据格式是json //2. 可以直接使用getJSON() 函数，就很简洁 $.getJSON( "/ajax/checkUserServlet2", { username: $("#uname").val(), date: new Date() }, function (data, status, xhr) {//成功后的回调函数 console.log("$.getJSON 成功"); console.log("data=", data); console.log("status=", status); console.log("xhr=", xhr); //data是json对象-> 显示转成json的字符串 $("#div1").html(JSON.stringify(data)); //对返回的结果进行处理 if ("" == data.username) { $("#myres").val("该用户名可用"); } else { $("#myres").val("该用户名不可用"); } } ) }) }) </script> </head> <body> <h1>用户注册-Jquery+Ajax</h1> <form action="/ajax/checkUserServlet2" method="post"> 用户名字:<input type="text" name="username" id="uname"> <input type="button" id="btn1" value="验证用户名"> <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/> 用户密码:<input type="password" name="password"><br/><br/> 电子邮件:<input type="text" name="email"><br/><br/> <input type="submit" id="submit" value="用户注册"> </form> <h1>返回的json数据</h1> <div id="div1"></div> </body> </html>
CheckUserServlet2
import com.google.gson.Gson; import com.hspedu.ajax.entity.User; import com.hspedu.ajax.service.UserService; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; public class CheckUserServlet2 extends HttpServlet { private UserService userService=new UserService(); protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //接收jquery发送的ajax数据 String username = request.getParameter("username"); //查询有没有这个人 User userByName = userService.getUserByName(username); response.setContentType("text/json;charset=utf-8"); Gson gson = new Gson(); if (null!=userByName) { response.getWriter().write(gson.toJson(userByName)); } else { //返回一个不存在的User=>是有设计 User user = new User(-1, "", "", ""); response.getWriter().write(gson.toJson(user)); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } }
