【AJAX :异步的 JavaScript 和 XML】
一、 概念
Asynchronous JavaScript And XML :异步的 JavaScript 和 XML
1. AJAX 引入介绍
- AJAX 是一种无需重新加载整个网页的情况下,能够更行部分网页的技术。
- 通过在后台与服务器进行少量的数据交换,AJAX 可以使网页实现异步更新,这意味着可以在不重新加载整个网页的情况下,对网页的部分内容进行更新。
- 传统的网页(不适用 AJAX)如果需要更新内容,必须重载整个网页页面。
2. 异步和同步
- 异步和同步:在客户端和服务器端相互通信的基础上
- 客户端必须等待服务器端的响应,在等待的期间客户端不能做其他操作
- 客户端不需要等待服务器端的响应,在服务器处理请求的过程中,客户端可以进行其他的操作
二、 实现方式
1. 原生的 JavaScript 实现方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生JavaScript实现AJAX</title>
<script>
// 定义方法
function fun() {
// 发送异步请求
// 1. 创建核心对象
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+,Firefox,Chrome,Opera,Safari
xmlhttp=new XMLHttpRequest();
}else {
// code for IE6,IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 2. 建立连接
// 参数:
// 1.请求方式:GET、POST
// get 方式,请求参数在 URL 后面拼接,send 方法为空参
// post 方式:请求参数在 send 方法中定义
// 2. 请求的 URL
// 3. 同步或异步的请求:true(异步)或者 false(同步)
xmlhttp.open("GET","ajaxServlet?username=Tom",true);
// 如果这里是 false 那么在点击“发送异步请求”时,线程进入睡眠,将不能使用文本输入框
// 如果是 true 时,那么在点击“发送异步请求”时,线程进入睡眠,仍然可以进行文本输入
// 3. 发送请求
xmlhttp.send();
// 4. 接受并处理来自服务器的响应结果
// 获取方式:xmlhttp.responseText
// 当服务器响应成功后后再获取
// 当 xmlhttp 对象的就绪状态改变时,触发事件 onreadystatechange
xmlhttp.onreadystatechange=function () {
// 判断 readyState 就绪状态是否为4,判断 status 响应状态码是否为200
if (xmlhttp.readyState==4&&xmlhttp.status==200){
// document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
// 获取服务器的响应结果
var responseText=xmlhttp.responseText;
alert(responseText);
}
}
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1. 获取请求参数
String username = request.getParameter("username");
// 假设处理业务逻辑,耗时
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
// 2. 打印 username
System.out.println(username);
// 3. 响应
response.getWriter().write("hello : "+username);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
2. jQuery 实现方式
$.ajax()
- 语法:
$.ajax({键值对});
- 语法:
$.get()
: 发送 get 请求- 语法:
$.get(url,[data],[callback],[type])
- 参数:
- url:请求参数
- data:请求参数
- callback:回调函数
- type:响应结果的类型
- 语法:
$.post()
:发送 post 请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现方式</title>
<script src="js/jquery-3.6.1.min.js"></script>
<script>
// 定义方法
function fun() {
// 使用 $.ajax 发送异步请求
$.ajax({
url:"ajaxServlet", // 请求路径
type:"POST", // 请求方式
// data:"username=Jack&age=23", // 请求参数
data:{"username":"Jack","age":23},
success:function (data) {
alert(data);
}, // 相应成功后的回调函数
error:function () {
alert("出错了!!!");
}, // 表示如果请求响应出现错误,会执行回调函数(比如路径无法找到)
dataType:"text" // 设置接受到的响应数据格式
});
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的GET实现方式</title>
<script src="js/jquery-3.6.1.min.js"></script>
<script>
// 定义方法
function fun() {
$.get("ajaxServlet",{username:"Rose"},function (data) {
alert(data);
},"text");
}
function fun() {
$.post("ajaxServlet",{username:"Rose"},function (data) {
alert(data);
},"text");
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input>
</body>
</html>