Ajax（小白入门）

最新推荐文章于 2023-08-27 12:25:14 发布

CLAY超

最新推荐文章于 2023-08-27 12:25:14 发布

阅读量124

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/wxc1207/article/details/104598457

版权

Java Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

1. AJAX 的概念
2. AJAX 的作用
3. 同步和异步的概念
4. AJAX 的实现

1. AJAX 的概念

AJAX（ASynchronous JavaScript And XML），异步的 JavaScript 和 XML
它是一种无序加载整个网页的情况下，能够更新部分网页的技术

2. AJAX 的作用

它用于创建更好更快交互性更强的web应用程序
能够提升用户的体验

3. 同步和异步的概念

在这里插入图片描述
同步和异步的区别：

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

4. AJAX 的实现

4.1 $.ajax()

1.语法

$.ajax({键值对});

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        function fun() {
            //使用$.ajax();发送异步请求
            $.ajax({
                url:"ajaxServlet",//请求路径
                type:"POST",//请求方式
                data:{"username":"Toxic", "age":18},//请求参数
                //响应成功后的回调函数
                success:function (data) {
                    alert(data);
                },
                //响应失败后的回调函数
                error:function () {
                    alert("出错啦啦啦");
                },
                dataType:"text"//设置接收到的响应数据的格式

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

4.2 $.get()

1.语法

$.get(url, [data], [callback], [type])

2.参数

url：请求路径
data：请求参数
callback：回调函数
type：响应结果的类型

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>get</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        function fun() {
            $.get(
                "ajaxServlet",
                {
                    username:"wxc",
                    age:123,
                    sdf:"df"
                },
                function (data) {
                    alert(data)
                },
                "text"
            );
        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input>
</body>
</html>

4.3 $.post()

1.语法

$.post(url, [data], [callback], [type])

2.参数

url：请求路径
data：请求参数
callback：回调函数
type：响应结果的类型

3.实例

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>get</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        function fun() {
            $.post(
                "ajaxServlet",
                {
                    username:"wxc",
                    age:999,
                    sdf:"df"
                },
                function (data) {
                    alert(data)
                },
                "text"
            );
        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input>
</body>
</html>

CLAY超

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax（小白入门）

1. AJAX 的概念AJAX（ASynchronous JavaScript And XML），异步的 JavaScript 和 XML2. AJAX 的作用AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJ...
复制链接

扫一扫