Ajax | Raven's blog

本文最后更新于 2025-04-25，文章内容可能已经过时。

概念：

Asynchronous JavaScript And XML(异步的JavaScript和XML)

同步&异步：

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

异步：客户端无需等待服务器响应，可以进行其他操作，当服务器响应完成时，客户端再进行本地响应。

Ajax 是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台于服务器进行少量的数据交换，Ajax可以使网页实现异步更新，这意味着可以在不重新刷新整个网页的情况下，对网页的某部分进行更新，提升用户的体验。

实现方法：

原生的js方式（仅供了解）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    function fun(){
        var xmlHttp;
        if(window.XMLHttpRequest){
            //IE7+核心，firefox，chrome，opera，safari
            xmlHttp = new XMLHttpRequest();
        }else {
            //IE6，IE5核心
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        /**
         * 建立连接：
         * 参数：
         * 1.GET/POST（请求方式）
         *  *get方式，请求参数在URL后面拼接，send方法为空参数
         *  *post方式，请求参数在send方法中
         * 2.请求的URL
         * 3.同步或异步请求：true（异步），false（同步）
         */
        xmlHttp.open("GET","AjaxServlet?username=bob",true);
        xmlHttp.send();
        //接受并处理来自服务器的响应结果
        //当http请求成功后，执行如下方法，触发onreadystatechange事件
        /**
            0：请求未初始化
            1：服务器连接已建立
            2：请求已收到
            3：正在处理请求
            4：请求已完成且响应已就绪
            响应码为200，则为请求成功
        */
        xmlHttp.onreadystatechange=function () {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                var responseText = xmlHttp.responseText;
                alert(responseText);
            }
        }
    }
</script>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input>
</body>
</html>

Servlet

package top.mccat.raven;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet(name = "AjaxServlet", value = "/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name = request.getParameter("username");
        System.out.println(name);
        response.getWriter().write("hello "+name);
    }
}

Jquery实现方式

1.$.ajax()

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
    function fun(){
        $.ajax({
            url:"AjaxServlet",//请求路径
            type:"POST",//请求方式
            //data:"username=bob&age=23",//请求参数
            data:{"username":"jack","age":23},//json方式
            dataType:"text",
            success:function (resultData) {//接受服务器传值
                alert(resultData);
            },
            error:function () {
                alert("出错啦");
            }
        });
    }
</script>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input>
</body>
</html>

2.$.get()

语法：$.get(url,[data],[callback],[type])//通过get请求
参数：
url：请求路径
data：请求参数
callback：回调函数
type：响应结果的类型

function fun(){
        $.get("AjaxServlet",{username:"raven",age:18},function (data) {
            alert(data);
        },"text");
    }

3.$.post()

语法：$.post(url,[data],[callback],[type])//通过post请求
参数：
url：请求路径
data：请求参数
callback：回调函数
type：响应结果的类型

$.post("AjaxServlet",{username:"raven",age:18},function (data) {
            alert(data);
        },"text");