AJAX基础

最新推荐文章于 2023-11-20 21:35:13 发布

Double-V

最新推荐文章于 2023-11-20 21:35:13 发布

阅读量548

点赞数

分类专栏： JavaWeb 文章标签： ajax 服务器 javaweb 前端

本文链接：https://blog.csdn.net/qq_39230153/article/details/122202222

版权

JavaWeb 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、主要概念

AJAX:ASynchronous JavaScript And XML 异步的JavaScript 和 XML

1.同步和异步

从上图中我们了解到，同步是指客户端必须等待服务器端响应，在等待期间客户端不能做其他操作;

异步指的是客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他等待操作；

Ajax 是一种在无需重新加载整个页面的情况下，能够更新部分页面的技术。

2.实现方式

原生的JS实现方式

JQuery实现方式

二、原生JS方式

异步：

新建HTML文件:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 定义方法
function fun(){
// 发送异步请求
// 创建核心对象
var xmlhttp;
if(window.XMLHttpRequest){
// code for IE7+ FireFox Chrome Opera Safari
xmlhttp = new XMLHttpRequest();
}else{
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);

// 3.发送请求
xmlhttp.send();
// 4.接收处理来自服务器的响应结果
}

</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
</body>
</html>

新建servlet对象:

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 获取请求参数
String username = request.getParameter("username");
// 打印
System.out.println(username);
// 响应
response.getWriter().write("hello"+username);
}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}

结果：

点击：发送异步请求

同步：

修改HTML代码，建立连接处改为false

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 定义方法
function fun(){
// 发送异步请求
// 创建核心对象
var xmlhttp;
if(window.XMLHttpRequest){
// code for IE7+ FireFox Chrome Opera Safari
xmlhttp = new XMLHttpRequest();
}else{
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",false);

// 3.发送请求
xmlhttp.send();
// 4.接收处理来自服务器的响应结果
}

</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input>
</body>
</html>

设置同步servlet，为了显示同步等待，设置延迟5秒

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 获取请求参数
String username = request.getParameter("username");
// 处理业务逻辑，耗时
try {
Thread.sleep(5000);
}catch(InterruptedException e){
e.printStackTrace();
}
// 打印
System.out.println(username);
// 响应
response.getWriter().write("hello"+username);
}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}

需要等5秒后才能输入send后发送。

附上完整html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 定义方法
function fun(){
// 发送异步请求
// 创建核心对象
var xmlhttp;
if(window.XMLHttpRequest){
// code for IE7+ FireFox Chrome Opera Safari
xmlhttp = new XMLHttpRequest();
}else{
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);

// 3.发送请求
xmlhttp.send();
// 4.接收处理来自服务器的响应结果
// 获取方式
// 当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
xmlhttp.onreadystatechange=function(){
// 判断就绪状态是否为4，“4”表示请求已经完成，且响应已就绪，响应状态码“200”
if(xmlhttp.readyState==4 && xmlhttp.status==200){
// 获取服务器的响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
}

</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input>
</body>
</html>

弹出：

三、JQuery实现方式

具体方法：

$.ajax()

$.get()

$.post()

1.$.ajax()

语法：$.ajax({键值对})；

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JS/jquery.js"></script>
<script>
function fun() {
// 使用$.ajax()发送异步请求
$.ajax({
url:"ajaxServlet1111", // 请求路径
type:"POST" , // 请求方式
//data:"username=jack&age=23", // 请求参数
data:{"username":"jack","age":23},
success:function (data) {
alert(data);
},// 响应成功后的回调函数
error:function () {
alert("error");
},// 表示请求响应出错，会执行的回调函数
dataType:"text" // 设置接收到的响应数据格式
}) ;
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input>
</body>
</html>

运行：

2.$.get()

语法：$.get()（url，[data],[callback],[type]）

参数：

url：请求路径

data：请求参数

callback：回调函数

type：响应结果的类型

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JS/jquery-3.3.1.min.js"></script>
<script>
function fun() {
$.get("ajaxServlet",{username:"rose"},function (data) {
alert(data);
},"text");
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input>
</body>
</html>

运行结果：

抓包：

3.$.post()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JS/jquery-3.3.1.min.js"></script>
    <script>
        function fun() {
            $.post("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");
        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input>
</body>
</html>

测试结果:

抓包：

get！

Double-V

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX基础

一、主要概念AJAX:ASynchronous JavaScript And XML 异步的JavaScript和 XML1.同步和异步从上图中我们了解到，同步是指客户端必须等待服务器端响应，在等待期间客户端不能做其他操作;异步指的是客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他等待操作；Ajax是一种在无需重新加载整个页面的情况下，能够更新部分页面的技术。2.实现方式原生的JS实现方式JQuery实现方式二、原生J...
复制链接

扫一扫