AJAX 入门：从基础到实践

news/2025/3/6 9:38:42/

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 方法获取数据并显示在页面上的示例：

<!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 元素中。以下是示例代码：

<!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 方法提交表单数据的示例：

<!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 代码实现

前台页面代码
<!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(){// 获取当前输入框的 idvar username = $("#username").val();// 调用 jquery 的 ajax 方法发送请求$.ajax({url : "ajax/getName?username="+username,type : "post",success : function(data) {// 获取服务器返回内容后显示在页面上$("#msg").html(data);}});}
</script>
</html>
Servlet 代码
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”。

 


http://www.ppmy.cn/news/1577034.html

相关文章

GPU 英伟达GPU架构回顾

GPU 英伟达GPU架构回顾

1999 年&#xff0c;英伟达发明了 GPU&#xff08;graphics processing unit&#xff09;&#xff0c;本节将介绍英伟达 GPU 从 Fermi 到 Blackwell 共 9 代架构&#xff0c;时间跨度从 2010 年至 2024 年&#xff0c;具体包括费米&#xff08;Feimi&#xff09;、开普勒&#…
阅读更多...
【CXX】4.4 其他构建系统

【CXX】4.4 其他构建系统

你需要至少完成以下三件事&#xff1a; 生成CXX生成的C绑定代码。 编译生成的C代码。 将生成的目标文件与你的其他C和Rust目标文件链接在一起。 并非所有构建系统都是平等的。如果你希望使用90年代的构建系统&#xff0c;尤其是如果你希望覆盖2个或更多构建系统&#xff08…
阅读更多...
Tomcat：Java Web应用的强大支撑

Tomcat：Java Web应用的强大支撑

在Java Web开发的广阔天地里&#xff0c;Apache Tomcat以其稳定、高效和灵活的特性&#xff0c;成为了众多开发者和企业的首选服务器。作为Apache软件基金会的一个开源项目&#xff0c;Tomcat不仅为Java Servlet、JavaServer Pages&#xff08;JSP&#xff09;、Java Expressio…
阅读更多...
MySQL常用命令大全（可复制使用）

MySQL常用命令大全（可复制使用）

MySQL常用命令大全&#xff08;可复制使用&#xff09; 基础命令 操作命令连接MySQL相关数据库mysql -u root(用户名) -p;查看所有数据库show databases;选择一个数据库use 数据库名;查看所有表show tables;查看表结构describe 表名&#xff1b;或 show columns from 表名;创…
阅读更多...
0x03 http协议和分层架构

0x03 http协议和分层架构

HTTP协议 简介 Hyper Text Transfer Protocol&#xff0c;超文本传输协议&#xff0c;规定了浏览器和服务器之间数据传输的规则 http协议基于TCP协议&#xff1a;面向连接&#xff0c;安全基于请求-响应模型&#xff1a;一次请求对应一次响应HTTP协议是无状态的协议&#xff…
阅读更多...
Python编程题

Python编程题

1.斐波那契数列 def fib(n):if n 1 or n 2:return 1else:return fib(n - 1) fib(n - 2) n int(input("输入要打印的斐波那契数的项数: ")) for i in range(1,n1):print(fib(i),end" ") 2.计算等差数列前n项和 使用列表保存一个首项为2&#xff0c;公…
阅读更多...
＜ 自用文儿 ＞ DELETED 设置速读 in Ubuntu24

＜ 自用文儿 ＞ DELETED 设置速读 in Ubuntu24

systemctl 和 DELETED&#xff1a; 配置文件&#xff1a; vi /etc/systemd/system/ DELETED.service [Unit] DescriptionV2Ray Service Documentation DELETED Afternetwork.target nss-lookup.target[Service] #Usernobody CapabilityBoundingSetCAP_NET_ADMIN CAP_NET_BIN…
阅读更多...
DeepSeek掘金——DeepSeek-R1驱动的金融分析师

DeepSeek掘金——DeepSeek-R1驱动的金融分析师

DeepSeek掘金——DeepSeek-R1驱动的金融分析师 我们将专注于创建一个专门用于提取相关新闻见解的代理。该代理将利用 DeepSeek-R1 提供全面的市场洞察。 在当今快节奏的金融市场中，获取准确及时的信息对于做出明智的投资决策至关重要。想象一下，一位人工智能金融分析师能够分…
阅读更多...
最新文章

Copyright @ 2022~2023