Ajax
2023年11月15日大约 10 分钟约 2080 字
介绍
- AJAX 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML)
- Ajax 是一种浏览器异步发起请求(指定发哪些数据)，局部更新页面的技术
应用场景
- 搜索引擎根据用户输入关键字，自动提示检索关键字
- 动态加载数据，按需取得数据【树形菜单、联动菜单...】
- 改善用户体验。【输入内容前提示、带进度条文件上传...】
- 电子商务应用。 【购物车、邮件订阅...】
- 访问第三方服务。【访问搜索服务、rss 阅读器】
- 页面局部刷新, https://piaofang.maoyan.com/dashboard
（1）异步请求（2）发送指定数据（3）局部
原理示意图
传统web数据通信方式
Ajax原理示意图
JavaScript原生Ajax请求
应用实例-验证用户名是否存在
1、演示 javascript 发送原生 ajax 请求的案例
1）在输入框输入用户名
2）点击验证用户名, 使用 ajax 方式， 服务端验证该用户名是否已经占用了, 如果该用户已经占用, 以 json 格式返回该用户信息
3)假定用户名为 king , 就不可用, 其它用户名可以=》 后面我们接入 DB[Mysql+JDBC]
4）对页面进行局部刷新, 显示返回信息
package com.lzw.ajax.entity;
/**
* User类就是一个 javabean/pojo/entity/domain
*/
public class User {
private Integer id;
private String username;
private String pwd;
private String email;
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;
}
}package com.lzw.ajax.servlet;
import com.google.gson.Gson;
import com.lzw.ajax.entity.User;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class CheckServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// System.out.println("CheckServlet 被调用");
//接收ajax提交的数据
String uname = request.getParameter("uname");
System.out.println("uname = " + uname);
response.setContentType("text/html;charset=utf-8");
//假定用户名为king，就不可用，其他用户名可以
if("king".equals(uname)){
//后面这个信息，从DB获取
User king = new User(100, "king", "666", "king@163.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);
}
}<!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/checkServlet?username=" + uname 就是 url
//(3)true , 表示异步发送
xhr.open("GET", "/ajax/checkServlet?uname=" + uname, true);
//在send函数调用前，给XMLHttpRequest 绑定一个事件onreadystatechange
//该事件表示，可以去指定一个函数，当数据变化，会触发onreadystatechange
// 每当 xhr对象readyState 改变时，就会触发 onreadystatechange 事件
xhr.onreadystatechange = function(){
//如果请求已完成，且响应已就绪, 并且状态码是200
if(xhr.readyState = 4 && xhr.status == 200){
//把返回的json数据显示在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/checkServlet" 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>JQuery中的Ajax
$.ajax 函数
● url： 请求的地址 ● type : 请求的方式 get 或 post ● data : 发送到服务器的数据。将自动转换为请求字符串格式 ● success: 成功的回调函数 ● error: 失败后的回调函数 ● dataType: 返回的数据类型 常用 json 或 text
$.get函数和$.post函数
url: 请求的 URL 地址 data: 请求发送到服务器的数据 success: 成功时回调函数 type: 返回内容格式，xml, html, script, json, text
$.get 和 $.post 底层还是使用$.ajax()方法来实现异步请求
$.getJSON
url: 请求发送的哪个 URL data: 请求发送到服务器的数据 success: 请求成功时运行的函数
$.getJSON 底层使用$.ajax()方法来实现异步请求
应用实例
- 演示 jquery 发送 ajax 请求的案例
- 在输入框输入用户名
- 点击验证用户名, 服务端验证该用户名是否已经占用了, 如果该用户已经占用, 以 json格式返回该用户信息
- 假定用户名为 king , 就不可用, 其它用户名可以
- 对页面进行局部刷新, 显示返回信息
<!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对象，要转成字符串
//
// $("#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对象，要转成字符串
//
// $("#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对象，要转成字符串
//
// $("#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对象，要转成字符串
$("#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>package com.lzw.ajax.servlet;
import com.google.gson.Gson;
import com.lzw.ajax.entity.User;
import com.lzw.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 {
//定义一个UserService属性
private UserService userService = new UserService();
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//接收jquery发送的ajax数据
String username = request.getParameter("username");
System.out.println("username = " + username);
response.setContentType("text/json;charset=utf-8");
Gson gson = new Gson();
User user = userService.getUserByName(username);
if(user != null){
response.getWriter().write(gson.toJson(user));
}else{
// User user1 = new User();
// user1.setUsername("");
// response.getWriter().write(gson.toJson(user1));
}
// if("king".equals(username)){
// //接入到db
// User user = new User(100, "king", "abc", "king@163.com");
// response.getWriter().write(gson.toJson(user));
// }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);
}
}