AJAX 入门：从基础到实践

小刘|2025-03-02 13:06

1.1 AJAX 介绍

AJAX 是一种用于创建快速动态网页的技术，它结合了 JavaScript 和 XML（虽然现在也常用 JSON 数据格式）。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着在不重新加载整个网页的情况下，对网页的某部分进行更新。

与传统网页技术相比，传统网页如果需要更新内容，必须重载整个网页面，而使用 AJAX 技术则可以避免这种情况。目前，几乎所有的网站都离不开 AJAX 这门技术。

AJAX 的最大特点是页面无刷新的请求，默认是异步的，速度快，用户体验比较好。

同步请求：同步请求是指在客户端向服务器发送请求后，客户端会进入等待状态，直到服务器返回响应结果后，客户端才会继续执行后续的代码。也就是说，在请求发出后，整个程序的执行流程会被阻塞，用户无法进行其他操作，直到请求完成。

异步请求：异步请求是指在客户端向服务器发送请求后，客户端不会等待服务器的响应，而是继续执行后续的代码。当服务器返回响应结果后，会通过回调函数、Promise、async/await 等方式通知客户端进行相应的处理

1.2 AJAX 工作原理

AJAX 的工作原理可以简单概括为以下几个步骤：

  1. 创建 XMLHttpRequest 对象：这是 AJAX 的核心对象，用于与服务器进行异步通信。
  2. 打开连接 ：使用 XMLHttpRequest 对象的 open() 方法打开与服务器的连接，指定请求的方法（GET 或 POST）和请求的 URL。
  3. 发送请求 ：使用 XMLHttpRequest 对象的 send() 方法发送请求到服务器。
  4. 监听状态变化 ：通过监听 XMLHttpRequest 对象的 onreadystatechange 事件，当状态发生变化时，检查请求的状态和响应状态码。
  5. 处理响应 ：如果请求成功，从 XMLHttpRequest 对象的 responseText 或 responseXML 属性中获取服务器返回的数据，并更新网页内容。

二、AJAX 使用

2.1 环境准备

使用 AJAX 技术需要用到 HTML、CSS、JS、jQuery、JavaWeb 相关知识。原生的 JS 也可以进行 AJAX 的操作，但相对比较繁琐，因此我们通常使用 jQuery 封装后的 AJAX 技术来进行开发。

2.2 创建 AJAX 请求

在 jQuery 中，可以使用 $.ajax() 方法来创建 AJAX 请求。以下是一个简单的示例：

javascript 复制代码 
$.ajax({
    url : "ajax/getName?id="+id,// ajax请求的url地址
    type : "get",// 提交的方法
    success : function(data) { // ajax请求回调后执行的方法,data表示从服务器返回的数据 
        alert(data);
    }

2.3 AJAX 参数说明

$.ajax() 方法有很多参数，下面对一些常用的参数进行详细说明：

  • url：要求为 String 类型的参数，（默认为当前页地址）发送请求的地址。
  • type：要求为 String 类型的参数，请求方式（post 或 get）默认为 get。注意其他 http 请求方法，例如 put 和 delete 也可以使用，但仅部分浏览器支持。
  • timeout ：要求为 Number 类型的参数，设置请求超时时间（毫秒）。此设置将覆盖 $.ajaxSetup() 方法的全局设置。
  • async：要求为 Boolean 类型的参数，默认设置为 true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
  • cache：要求为 Boolean 类型的参数，默认为 true（当 dataType 为 script 时，默认为 false），设置为 false 将不会从浏览器缓存中加载请求信息。
  • data ：要求为 Object 或 String 类型的参数，发送给服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get 请求中将附加在 url 后。防止这种自动转换，可以查看 processData 选项。对象必须为 key/value 格式。
  • dataType：要求为 String 类型的参数，预期服务器返回的数据类型。可用的类型有 xml、html、script、json、jsonp、text 等。
  • beforeSend ：要求为 Function 类型的参数，发送请求前可以修改 XMLHttpRequest 对象的函数，例如添加自定义 HTTP 头。在 beforeSend 中如果返回 false 可以取消本次 ajax 请求。
  • complete：要求为 Function 类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。
  • success：要求为 Function 类型的参数，请求成功后调用的回调函数，有两个参数，分别是服务器返回的数据和描述状态的字符串。
  • error：要求为 Function 类型的参数，请求失败时被调用的函数。
  • contentType：要求为 String 类型的参数，当发送信息至服务器时，内容编码类型默认为 "application/x-www-form-urlencoded"。
  • dataFilter：要求为 Function 类型的参数，给 Ajax 返回的原始数据进行预处理的函数。
  • global：要求为 Boolean 类型的参数，默认为 true。表示是否触发全局 ajax 事件。
  • ifModified：要求为 Boolean 类型的参数，默认为 false。仅在服务器数据改变时获取新数据。
  • jsonp：要求为 String 类型的参数，在一个 jsonp 请求中重写回调函数的名字。
  • username：要求为 String 类型的参数，用于响应 HTTP 访问认证请求的用户名。
  • password：要求为 String 类型的参数，用于响应 HTTP 访问认证请求的密码。
  • processData：要求为 Boolean 类型的参数，默认为 true。默认情况下，发送的数据将被转换为对象以配合默认内容类型。
  • scriptCharset：要求为 String 类型的参数，只有当请求时 dataType 为 "jsonp" 或者 "script"，并且 type 是 GET 时才会用于强制修改字符集。

$.get 方法

使用方法

$.get() 方法通过 HTTP GET 请求从服务器加载数据。其基本语法如下：

收起

复制代码 
$.get(url, [data], [callback], [dataType]);
  • url：必需，请求的服务器 URL 地址。
  • data：可选，发送到服务器的数据，以键值对的形式表示。
  • callback：可选，请求成功后执行的回调函数，该函数接收服务器返回的数据作为参数。
  • dataType ：可选，预期服务器返回的数据类型，常见的值有 html、json、text 等。
案例

假设我们有一个服务器端脚本 get_data.php，它会根据传入的参数返回相应的数据。以下是一个使用 $.get 方法获取数据并显示在页面上的示例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>$.get 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <button id="getDataBtn">获取数据</button>
    <div id="result"></div>

    <script>
        $(document).ready(function () {
            $('#getDataBtn').click(function () {
                $.get('get_data.php', { name: 'John', age: 30 }, function (data) {
                    $('#result').html(data);
                }, 'html');
            });
        });
    </script>
</body>

</html>

在上述示例中，当点击按钮时，会向 get_data.php 发送一个 GET 请求，传递 name 和 age 两个参数。服务器返回的数据会被插入到 id 为 result 的 div 元素中。

2. $.load 方法

使用方法

$.load() 方法用于从服务器加载数据并将其插入到指定的 DOM 元素中。其基本语法如下：

复制代码 
$(selector).load(url, [data], [callback]);
  • selector：必需，指定要插入加载数据的 DOM 元素。
  • url：必需，请求的服务器 URL 地址。
  • data：可选，发送到服务器的数据，以键值对的形式表示。
  • callback：可选，加载完成后执行的回调函数。
案例

假设我们有一个 content.html 文件，我们要将其内容加载到页面的一个 div 元素中。以下是示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>$.load 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <button id="loadContentBtn">加载内容</button>
    <div id="contentDiv"></div>

    <script>
        $(document).ready(function () {
            $('#loadContentBtn').click(function () {
                $('#contentDiv').load('content.html', function () {
                    alert('内容加载完成');
                });
            });
        });
    </script>
</body>

</html>

在上述示例中，当点击按钮时，会将 content.html 文件的内容加载到 id 为 contentDiv 的 div 元素中，并在加载完成后弹出一个提示框。

3. $.post 方法

使用方法

$.post() 方法通过 HTTP POST 请求从服务器加载数据。其基本语法如下：

复制代码 
$.post(url, [data], [callback], [dataType]);
  • url：必需，请求的服务器 URL 地址。
  • data：可选，发送到服务器的数据，以键值对的形式表示。
  • callback：可选，请求成功后执行的回调函数，该函数接收服务器返回的数据作为参数。
  • dataType ：可选，预期服务器返回的数据类型，常见的值有 html、json、text 等。
案例

假设我们有一个服务器端脚本 submit_form.php，用于处理表单提交的数据。以下是一个使用 $.post 方法提交表单数据的示例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>$.post 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <form id="myForm">
        <input type="text" name="username" placeholder="用户名">
        <input type="password" name="password" placeholder="密码">
        <input type="button" id="submitBtn" value="提交">
    </form>
    <div id="responseDiv"></div>

    <script>
        $(document).ready(function () {
            $('#submitBtn').click(function () {
                var formData = $('#myForm').serialize();
                $.post('submit_form.php', formData, function (data) {
                    $('#responseDiv').html(data);
                }, 'html');
            });
        });
    </script>
</body>

</html>

三、AJAX 练习：表单验证用户名是否存在

3.1 实现步骤

  1. 构建页面：使用 JSP 或 HTML 构建页面。
  2. 引入 jQuery 的 js 文件：在页面中引入 jQuery 库，以便使用 jQuery 的 AJAX 方法。
  3. 构建表单或者输入用户名的 input 标签：创建一个输入框用于输入用户名。
  4. 考虑触发验证的事件：当用户输入完用户名并失去焦点时，触发验证的 AJAX 请求。
  5. 模拟数据：在本次练习中，不使用 JDBC 和数据库，模拟 "admin 用户" 进行验证。
  6. 发送异步请求：使用 AJAX 发送异步请求验证数据，并拿到服务端的结果，局部更新页面。
  7. 编写服务端的 Servlet：处理 AJAX 的请求，并返回验证结果。
  8. 响应结果给客户端：将验证结果返回给客户端，更新页面显示。

3.2 代码实现

前台页面代码
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX 测试页</title>
    <!--引入 jQuery 的 js-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
    ID:<input type="text" id="username" onblur="sendAjax()"/><br>
    <span id="msg"></span><br>
</body>
<script type="text/javascript">
    // 发送 ajax 的方法
    function sendAjax(){
        // 获取当前输入框的 id
        var username = $("#username").val();
        // 调用 jquery 的 ajax 方法发送请求
        $.ajax({
            url : "ajax/getName?username="+username,
            type : "post",
            success : function(data) {
                // 获取服务器返回内容后显示在页面上
                $("#msg").html(data);
            }
        });
    }
</script>
</html>
Servlet 代码
java 复制代码 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class AJAXServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String result = "";
        if(username!=null && username.equals("zhangsan")){
            result = "is exist";
        }else{
            result = "not exist";
        }

        response.getWriter().write(result);
    }

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

3.3 代码解释

  • 前台页面 ：当用户在输入框中输入用户名并失去焦点时，会触发 sendAjax() 函数。该函数通过 $.ajax() 方法发送一个 POST 请求到服务器，请求的 URL 为 ajax/getName，并将用户名作为参数传递。当服务器返回结果后，将结果显示在 id 为 msg 的 span 标签中。
  • Servlet ：在 doPost() 方法中，获取客户端传递的用户名参数，判断该用户名是否为 "zhangsan"，如果是则返回 "is exist"，否则返回 "not exist"。
相关推荐
WeiXiao_Hyy4 分钟前
成为 Top 1% 的工程师
java·开发语言·javascript·经验分享·后端
吃杠碰小鸡21 分钟前
高中数学-数列-导数证明
前端·数学·算法
kingwebo'sZone27 分钟前
C#使用Aspose.Words把 word转成图片
前端·c#·word
xjt_09011 小时前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农1 小时前
Vue 2.3
前端·javascript·vue.js
夜郎king1 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
辰风沐阳2 小时前
JavaScript 的宏任务和微任务
javascript
夏幻灵2 小时前
HTML5里最常用的十大标签
前端·html·html5
冰暮流星2 小时前
javascript之二重循环练习
开发语言·javascript·数据库
Mr Xu_3 小时前
Vue 3 中 watch 的使用详解：监听响应式数据变化的利器
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03使用 1panel面板 部署 php网站04OpenClaw Chrome扩展使用教程 - 浏览器中继控制05Vue-skills的中文文档06Linux下V2Ray安装配置指南07让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南08从零搭建一个 PHP 登录注册系统（含完整源码）09UV安装并设置国内源10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示