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"。
相关推荐
诸葛亮的芭蕉扇4 小时前
Vue3核心编译库@vuecompiler-core内容分享
前端·javascript·vue.js
Hopebearer_5 小时前
Vue3生命周期以及与Vue2的区别
前端·javascript·vue.js·前端框架·vue3
雅望天堂i6 小时前
vue的diff算法
前端·javascript·vue.js
爱上妖精的尾巴6 小时前
3-5 WPS JS宏 工作表的移动与复制学习笔记
javascript·笔记·学习·wps·js宏·jsa
Joker Zxc6 小时前
【前端基础】2、HTML的元素（基础说明）
前端·html
予安灵7 小时前
《白帽子讲 Web 安全：点击劫持》
前端·网络·安全·web安全·网络攻击模型·安全威胁分析·点击劫持
Enti7c8 小时前
什么是 jQuery
前端·javascript·jquery
cafehaus8 小时前
关于JavaScript性能问题的误解
开发语言·javascript·ecmascript
taopi20249 小时前
若依vue plus环境搭建
前端·javascript·vue.js
李奶酪9 小时前
React Native 原理
javascript·react native·react.js
热门推荐
01DeepSeek各版本说明与优缺点分析02DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具03如何在WPS和Word/Excel中直接使用DeepSeek功能04从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑05本地部署DeepSeek教程（Mac版本）06DeepSeek本地部署详细指南07【docker】Windows10安装Docker Desktop - WSL update failed08保姆级教程：利用Ollama与Open-WebUI本地部署 DeedSeek-R1大模型09DeepSeek r1本地安装全指南10Anaconda +Jupyter Notebook安装（2025最新版）