【JavaWeb】AJAX

最新推荐文章于 2024-06-05 15:29:49 发布

Zc_orange

最新推荐文章于 2024-06-05 15:29:49 发布

阅读量193

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/Zc_orange/article/details/103356897

版权

JavaWeb 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

AJAX

1、概念

ASynchronous JavaScript And XML : 异步的JavaScript 和 XML

异步和同步：客户端和服务器端相互通信的基础上

同步：客户端必须等待服务器的响应。在等待的期间客户端不能做其他操作。
异步：客户端不需要等待服务器的响应。在服务器请求的过程中，客户端可以进行其他的操作。

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

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

2、实现方式

1.原生的JS实现方式

2.JQeury实现方式

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

<!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() {
            $.ajax({
                    url:"/ajaxServlet",
                    type:"post",
                  //  data:"username=zc&age=18",
                    data:{"username" : "zc","age" : 18},
                    success:function (data) {
                        alert(data);
                    },
                    error:function () {
                        alert("error")
                    }
                }
            )
        }
    </script>
</head>
<body>
        <input type="button" value="发送异步请求" onclick="fun()">
        <input type="text">
</body>
</html>

$.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 : "zc"},function (data) {
                alert(data)
            },"text");
        }


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

$.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 : "zc"},function (data) {
                alert(data)
            },"text");
        }


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