【Java Web】Ajax 介绍及 jQuery 实现

server/2024/11/17 23:59:47/

文章目录

    • AJAX介绍
    • XMLHttpRequest
    • jQuery实现Ajax
      • $.ajax()
      • $().load()
      • $.get()
      • $.post()

AJAX介绍

AJAX（Asynchronous JavaScript and XML）是一种创建高效、动态网页应用的网页开发技术。它允许在不重新加载整个页面的情况下进行异步数据更新和交互，从而提供更流畅的用户体验。尽管名字中包含了XML，但实际上，AJAX可以使用任何格式的数据，包括JSON、HTML等。

AJAX的工作原理

  1. 客户端请求：用户在网页上执行某些操作（如点击按钮），触发JavaScript代码发送一个异步请求到服务器。
  2. 服务器处理：服务器接收请求后，处理这些请求，并返回响应给客户端。
  3. 客户端处理：客户端通过JavaScript接收到服务器的响应，并根据需要更新页面的一部分，而不需要刷新整个页面。

在这里插入图片描述

AJAX与传统Web的主要区别

方式及比较项传统WebAjax技术
发送请求方式浏览器发送同步请求异步引擎对象发送请求
服务器响应响应内容是一个完整页面响应内容只是需要的数据
客户端处理方式需等待服务器响应完成并重新加载整个页面后用户才能进行操作可以动态更新页面中的部分内容
不影响用户在页面进行其他操作

XMLHttpRequest

XMLHttpRequest (XHR) 是一个内置在浏览器中的API，是实现AJAX功能的核心技术之一。用于在客户端和服务器之间异步交换数据。

主要方法和属性

open()：初始化一个新的请求。这个方法接受三个参数：请求的方法（GET、POST等）、请求的URL以及是否异步执行该请求。

xhr.open('GET', 'https://example.com/data', true);

send()：发送请求。对于POST请求，可以在 send() 方法中传递请求体数据。

xhr.send(data);

setRequestHeader()：设置HTTP请求头。这对于发送带有特定头部信息的请求非常有用。

xhr.setRequestHeader('Content-Type', 'application/json');

onreadystatechange：当 readyState 属性改变时调用的事件处理器。

readyState 的值有五个：

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪

status 和 statusText：分别表示HTTP状态码和状态消息，如 200 OK、404 Not Found 等。

responseType：指定响应的数据类型，如 'text', 'json', 'document', 'arraybuffer' 或 'blob'。

response 和 responseText：分别用于获取响应数据。response 是根据 responseType 设置的响应类型，而 responseText 总是返回字符串形式的响应。responseXML 将XML格式的响应内容解析成DOM对象。

jQuery实现Ajax

请求方法描述适用场景
$.ajax()通用的 AJAX 方法，可以处理各种类型的 HTTP 请求功能最全但也最复杂
$().load()用于将外部 HTML 文件的内容加载到当前页面指定元素的方法使用简单，功能有限
$.get()专门用于处理 GET 请求使用简单，功能有限
$.post()专门用于处理 POST 请求适用于动态加载页面内容

ajax_76">$.ajax()

通过 HTTP 请求加载远程数据

语法：jQuery.ajax([settings])

  • settings：可选。用于配置 Ajax 请求的键值对集合
java">$("#b01").click(function(){htmlobj = $.ajax({url:"/jquery/test1.txt",async:false});$("#myDiv").html(htmlobj.responseText);
});

参数

参数类型描述
optionsObiect可选，AJAX 请求设置，所有选项都是可选的
asyncBoolean默认值异步请求 true 同步请求为 false
cacheBoolean默认值 true dataType 为 script 和 jsonp 时默认不缓存此页面 false
dataString发送到服务器的数据
dataTypeString预期服务器返回的数据类型
errorFunction请求失败时调用此函数
successFunction请求成功后的回调函数
jsonpString在一个 jsonp 请求中重写回调函数的名字
jsonpCallbackString为 jsonp 请求指定一个回调函数名

常见配置选项

java">$.ajax({url: '请求的URL',type: '请求类型（如GET、POST等）',data: '要发送的数据（如果是GET请求，通常将数据附加到URL中）',contentType: '发送数据的内容类型（默认为"application/x-www-form-urlencoded; charset=UTF-8"）',dataType: '预期服务器返回的数据类型（如html、json、xml、script、text等）',success: function(data, textStatus, jqXHR) {// 请求成功时执行的函数},error: function(jqXHR, textStatus, errorThrown) {// 请求失败时执行的函数},complete: function(jqXHR, textStatus) {// 请求完成后执行的函数，无论成功还是失败},beforeSend: function(jqXHR, settings) {// 在请求发送之前执行的函数},async: true, // 默认情况下为异步请求，设置为false则变为同步请求cache: true, // 默认情况下GET请求会被缓存timeout: 0, // 请求超时时间（毫秒），默认为0（无超时）global: true, // 触发全局AJAX事件processData: true, // 默认情况下会尝试处理发送的数据为查询字符串traditional: false, // 用于序列化数组的参数
});

$().load()

从服务器加载数据，并把返回的数据放入被选元素中

语法：$(selector).load(URL [, data] [, callback]);

  • selector：一个 CSS 选择器字符串，用于匹配 DOM 元素。
  • URL：一个字符串，指定要加载的 HTML 文件的 URL。
  • data：可选参数，一个对象，包含要发送到服务器的数据，这些数据会以 POST 方式发送。
  • callback：可选参数，一个函数，当请求完成时调用（在文档片段被插入到 DOM 中之后）。
【data.html】
<p>Hello from data.html</p>

<div id="content"></div>
<script>javascript">$(document).ready(function() {$('#content').load('data.html', function(response, status, xhr) {if (status == 'success') {console.log('加载成功');} else if (status == 'error') {console.error('加载失败: ' + xhr.status + ' ' + xhr.statusText);} else if (status == 'complete') {console.log('加载完成');}});});
</script>

#content 元素将会被填充 data.html 文件的内容。

$.get()

通过 HTTP GET 请求从服务器上请求数据

语法：$.get(url, [data], [callback], [dataType]);

  • url：必需，一个字符串，表示请求的 URL。

  • data：可选，一个对象或字符串，表示要发送到服务器的数据。

  • callback：可选，一个函数，当请求成功时执行。此函数接受三个参数：

    ​ data：服务器返回的数据。

    ​ statusText：HTTP 状态文本，如 “success” 或 “error”。

    ​ jqXHR：jQuery 的 XMLHttpRequest 对象。

  • dataType：可选，预期服务器返回的数据类型，如 “xml”, “html”, “script”, “json”, “text”, “jsonp” 等。

java">// 带数据的 GET 请求
$.get('https://api.example.com/data', { key: 'value' }, function(data, status) {console.log('请求成功，状态：' + status);console.log('返回的数据：', data);
});

java">// 错误处理
$.get('https://api.example.com/data', function(data, status, jqXHR) {if (status === 'success') {console.log('请求成功，返回的数据：', data);} else if (status === 'error') {console.error('请求失败，状态码：' + jqXHR.status);}
});

$.post()

通过 HTTP POST 请求从服务器上请求数据

语法：$.post(url, [data], [callback], [dataType]);

参数同上

java">// 简单的 POST 请求
$.post('https://api.example.com/data', { key: 'value' }, function(data, status) {console.log('请求成功，状态：' + status);console.log('返回的数据：', data);
});

java">// 指定数据类型
$.post('https://api.example.com/data', { key: 'value' }, function(data) {console.log('请求成功，返回的数据：', data);
}, 'json');

java">// 错误处理
$.post('https://api.example.com/data', {key:'value'}, function(data,status,jqXHR) {if (status === 'success') {console.log('请求成功，返回的数据：', data);} else if (status === 'error') {console.error('请求失败，状态码：' + jqXHR.status);}
});

除上述基本用法外，$.post() 还可以接受一个配置对象，类似于 $.ajax() 方法的选项

java">$.post({url: 'https://api.example.com/data',data: { key: 'value' },success: function(data, status, jqXHR) {console.log('请求成功，状态：' + status);console.log('返回的数据：', data);},error: function(jqXHR, textStatus, errorThrown) {console.error('请求失败，状态码：' + jqXHR.status);console.error('错误信息：' + errorThrown);},complete: function(jqXHR, textStatus) {console.log('请求完成，状态：' + textStatus);},dataType: 'json',async: true, // 默认为 true，表示异步请求cache: false, // 默认情况下，POST 请求不会被缓存timeout: 3000 // 请求超时时间（毫秒）
});
  • $.post(URL,data,success,“json”);
  • $.getJSON(URL,data,success)
  • $.get(URL,data,success,“json”)

http://www.ppmy.cn/server/142757.html

相关文章

蓝队知识浅谈（上）

蓝队知识浅谈（上）

声明&#xff1a;学习视频来自b站up主 泷羽sec&#xff0c;如涉及侵权马上删除文章 感谢泷羽sec 团队的教学 视频地址&#xff1a;蓝队基础之网络七层杀伤链_哔哩哔哩_bilibili 本文主要分享一些蓝队相关的知识。 首先我们先来了解一下什么是蓝队&#xff1f; 蓝队是信息安全领…
阅读更多...
Docker compose部署Activemq

Docker compose部署Activemq

整个工具的代码都在Gitee或者Github地址内 gitee&#xff1a;solomon-parent: 这个项目主要是总结了工作上遇到的问题以及学习一些框架用于整合例如:rabbitMq、reids、Mqtt、S3协议的文件服务器、mongodb github&#xff1a;GitHub - ZeroNing/solomon-parent: 这个项目主要是…
阅读更多...
【书生大模型实战营 闯关材料】入门岛：第4关 玩转HF/魔搭/魔乐社区

【书生大模型实战营 闯关材料】入门岛：第4关 玩转HF/魔搭/魔乐社区

2.1.2-2.1.3 InternLM 模型下载 模型下载 使用Hugging Face平台、魔搭社区平台&#xff08;可选&#xff09;和魔乐社区平台&#xff08;可选&#xff09;下载文档中提到的模型&#xff08;至少需要下载config.json文件、model.safetensors.index.json文件&#xff09;&#x…
阅读更多...
Spring Boot编程训练系统：开发与管理

Spring Boot编程训练系统：开发与管理

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…
阅读更多...
大三学生实习面试经历（1）

大三学生实习面试经历（1）

最近听了一位学长的建议&#xff0c;不能等一切都准备好再去开始&#xff0c;于是就开始了简历投递&#xff0c;恰好简历过了某小厂的初筛&#xff0c;开启了线上面试&#xff0c;记录了一些问题&#xff1a; &#xff08;通过面试也确实了解到了自己在某些方面确实做的还不够…
阅读更多...
结构体的简单操作

结构体的简单操作

代码结构 代码&#xff1a; main.c #include <stdio.h> #include <stdlib.h> #include <string.h>//定义结构体 struct Student{char name[10];int score;int age; };//打印结构体信息 void PrintStruct(const struct Student s) {printf("Student.na…
阅读更多...
thinkphp 连表查询

thinkphp 连表查询

在ThinkPHP中&#xff0c;可以使用Query类的join方法来进行连表查询。连表查询可以用于在查询结果中包含多个表的数据&#xff0c;以便获取更丰富的信息。 以下是一个简单的例子&#xff0c;假设有两个表user和order&#xff0c;我们想要查询用户的订单信息&#xff1a; $use…
阅读更多...
PaddlePaddle 开源产业级文档印章识别PaddleX-Pipeline “seal_recognition”模型 开箱即用篇（一）

PaddlePaddle 开源产业级文档印章识别PaddleX-Pipeline “seal_recognition”模型 开箱即用篇（一）

AI时代到来&#xff0c;各行各业都在追求细分领域垂直类深度学习模型&#xff0c;今天给大家介绍一个PaddlePaddle旗下&#xff0c;基于PaddleX Pipeline 来完成印章识别的模型“seal_recognition”。 官方地址&#xff1a;https://github.com/PaddlePaddle/PaddleX/blob/relea…
阅读更多...
最新文章

Copyright @ 2022~2023