Ajax

最新推荐文章于 2026-01-09 22:13:29 发布

原创最新推荐文章于 2026-01-09 22:13:29 发布 · 148 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #js #jquery

学习笔记专栏收录该内容

6 篇文章

订阅专栏

本文深入介绍了Ajax的基础概念，包括其异步特性以及相对于传统网页的优势。通过示例展示了如何使用原生JavaScript和JQuery库实现Ajax请求，包括GET和POST方式。内容涵盖$.ajax(), $.get()和$.post()等函数的用法。

Ajax基础

概念

ASynchronous JavaScript And XML （异步的JavaScript 和 XML）

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

好处

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

异步和同步的区别

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

同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。

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

实现方式

1.原生的JS实现方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js实现Ajax</title>
    <script>

        function fun() {
            //发送异步请求
            
            //1.创建核心对象
            var xmlhttp;
            if (window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
            }

            //2.建立连接
            //使用GET请求方式时，请求参数写在请求路径后用?隔开
            xmlhttp.open("GET","ajaxServlet?username=tom",true);
            //使用POST请求方式时，请求参数写在send()中
            //xmlhttp.open("GET","ajaxServlet",true);
            //3.发送请求
            //GET
            xmlhttp.send();
            //POST
            //xmlhttp.send("username=tom");
            //4.接收并处理来自服务器的响应结果
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }

        }

    </script>
</head>
<body>

    <input type="button" value="发送异步请求" onclick="fun();">

</body>
</html>

2.JQuery实现方式

2.1 $.ajax()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery实现Ajax方式一</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>

        function fun() {

            //使用$.ajax()发送异步请求
            $.ajax({
                url:"ajaxServlet",  //请求路径
                type:"POST",        //请求方式
                data: {"username":"jack","age":"18"},  //请求参数
                success:function (data) {
                    alert(data);
                },//响应成功后的回调函数
                error:function () {
                    alert("出错了...");
                },//响应请求出错后会执行的的回调函数
                dataType:"json"     //设置接收到的响应数据的格式

            });
        }

    </script>
</head>
<body>

    <input type="button" value="发送异步请求" onclick="fun();">

</body>
</html>

2.2 $.get()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery实现Ajax方式二</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>

        function fun() {

            //使用$.get()发送异步请求
            // 参数：
			//	* url：请求路径
			//	* data：请求参数
			//	* callback：回调函数
			//	* type：响应结果的类型
            $.get("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");
            
        }

    </script>
</head>
<body>

    <input type="button" value="发送异步请求" onclick="fun();">

</body>
</html>

2.3 $.post()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery实现Ajax方式三</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>

        function fun() {


            //使用$.post()发送异步请求(参数与$.get()一致)
            $.post("ajaxServlet",{username:"rose"},function (data) {
                 alert(data);
            },"text");
            
        }

    </script>
</head>
<body>

    <input type="button" value="发送异步请求" onclick="fun();">

</body>
</html>