【JavaWeb】Ajax

news/2024/12/21 20:41:25/

目录

一、什么是Ajax?

二、同步与异步

 三、Ajax工作原理

四、Ajax实现步骤

五、Ajax应用场景

六、Ajax常见问题

1.缓存问题

2.跨域问题

3.请求超时与网络异常

4.取消请求

七、常见Ajax三种请求方式

1.jQuery请求

2.Axios请求

3.Fetch请求 

一、什么是Ajax?

Ajax 即 Asynchronous Javascript And XML(异步JavaScript和XML),是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新

二、同步与异步

  1. 同步: 发送一个请求,需要等待响应返回,然后才可以发送下一个请求,如果该请求没有响应,则需等待
  2. 异步:发送一个请求,不需要等待响应返回,随时可以发送下一个请求

 三、Ajax工作原理

Ajax的目的是提高用户体验,较少网络数据的传输量。Ajax在客户端和服务器之间加了一个中间层,使客户端操作与服务器响应异步化,一些数据验证和数据处理交给Ajax引擎自己来做,而不需要交给服务器,只有确定需要从服务器读取新数据时才会通过Ajax引擎代为向服务器提交请求

四、Ajax实现步骤

  • 创建XMLHttpRequest核心对象xhr
const xhr = new XMLHttpRequest();
  • 通过XMLHttpRequest对象的open()方法给当前对象提供访问方式、URL等与服务端建立连接
xhr.open(method, url, [async][, user][, password])
//method:表示当前的请求方式,常见的有GET、POST
//url:服务端地址
//async:布尔值,表示是否异步执行操作,默认为true
//user: 可选的用户名用于认证用途;默认为null
//password: 可选的密码用于认证用途,默认为null
  • 通过XMLHttpRequest对象的send()方法发送给服务端
xhr.send([body])
//body: 在 xhr 请求中要发送的数据体,如果不传递数据则为 null 如果使用GET请求发送数据的时候,需要注意如下:
//将请求数据添加到open()方法中的url地址中
//发送请求数据中的send()方法中参数设置为null
  • 接受返回值并处理
request.onreadystatechange = function(e){if(request.readyState === 4){ // 整个请求过程完毕if(request.status >= 200 && request.status <= 300){console.log(request.responseText) // 服务端返回的结果}else if(request.status >=400){console.log("错误信息:" + request.status)}}
}//readyState 属性一共有5个值,分别表示不同的请求响应阶段://0: 还未创建请求,即未调用 open() 方法
//1: 已调用 open() 方法,但未发送 send() 方法
//2: 已调用 send() 方法,但未接收到响应
//3: 已接收到部分响应
//4: 已接收到全部的响应

五、Ajax应用场景

  • 动态加载内容:Ajax可以在不刷新整个页面的情况下,通过异步请求从服务器获取数据并动态更新页面的部分内容,从而实现更流畅的用户体验

  • 表单验证:Ajax可以在不刷新整个页面的情况下,实时验证表单数据的合法性(如手机号、唯一性校验)并提供反馈信息

  • 搜索建议:当用户在搜索框中输入内容时,Ajax可以在输入框下方实时显示相关的搜索建议,帮助用户更快速地找到自己需要的信息

  • 购物车更新:Ajax可以在不刷新整个页面的情况下,实时更新购物车中的商品数量以及总价等信息

  • 实时聊天:Ajax可以实现与服务器的实时通信,让用户在不刷新页面的情况下,实时接收到其他用户的消息(如直播评论、点赞、礼物等)

六、Ajax常见问题

1.缓存问题

在一些浏览器中存在缓存机制,Ajax只会发送一次请求,剩余请求则不会再发送给浏览器,而是直接读取缓存中的数据

解决方案:浏览器缓存是通过URL地址记录,只需更改URL地址即可解决缓存问题,xhr.open("get","/demo?t="+Date.now())

2.跨域问题

 当一个页面向另一个不同域名/不同协议/不同端口的页面请求资源时,因为浏览器的同源策略,会产生跨域问题

解决方案:

  1. 后台Http请求转发
  2. 后台配置Cors
  3. 使用SpringCloud网关
  4. 使用Nginx转发

3.请求超时与网络异常

当请求时间过长或网络出现问题时,可单独做一些特殊处理

javascript">btn.addEventListener('click', function(){const xhr = new XMLHttpRequest();//超时时间设置为2sxhr.timeout = 2000;//超时处理xhr.ontimeout = function(){// 超时相关操作}//网络异常处理xhr.onerror = function(){// 网络异常相关操作}xhr.open("GET",'http://127.0.0.1:8080/demo');xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status< 300){result.innerHTML = xhr.response;}}}})

4.取消请求

当请求发出但并未响应时,可通过abort()取消请求

javascript">const btns = document.querySelectorAll('button');let x = null;btns[0].onclick = function(){x = new XMLHttpRequest();x.open("GET",'http://127.0.0.1:8080/demo');x.send();}// 取消请求btns[1].onclick = function(){x.abort();}

七、常见Ajax三种请求方式

1.jQuery请求

jQuery是⼀个优秀的js框架,对JS原⽣的Ajax进⾏了封装,封装后的Ajax的操作⽅法更简洁,功能更强⼤,jQuery三种常见请求方式:

请求方式语法
Ajax请求$.ajax([settings])
GET请求$.get(url,[data],[callback],[type])
POST请求$.post(url,[data],[callback],[type])
参数名称描述
url请求地址
data请求参数
type请求类型
async布尔类型true/false,代表异步和同步,默认为true
dataType回传数据类型
success成功回调函数
error失败回调函数
javascript">// Ajax请求
$.ajax({url:"",data:{},type:"post/get",async:true,dataType:"text",success:function(obj){},error:function(){}
})
javascript">// GET请求
$("button").click(function(){$.get("demo_test.asp",function(data,status){alert("Data: " + data + "\nStatus: " + status);});
});
javascript">// POST请求
$("button").click(function(){$.post("demo_test_post.asp",{name:"Donald Duck",city:"Duckburg"},function(data,status){alert("Data: " + data + "\nStatus: " + status);});
});

2.Axios请求

javascript">    //配置 baseURLaxios.defaults.baseURL = 'http://127.0.0.1:8080';btns[2].onclick = function () {axios({//请求方法method: 'POST',//urlurl: '/axios-server',//url参数params: {vip: 10,level: 30},//头信息,此部分如果使用自定义的头信息,需要服务端进行相应修改,正常不设置headers: {a: 100,b: 200},//请求体参数data: {username: 'admin',password: 'admin'}}).then(response => {//响应状态码console.log(response.status);//响应状态字符串console.log(response.statusText);//响应头信息console.log(response.headers);//响应体console.log(response.data);})}

3.Fetch请求 

javascript">btn.onclick = function () {fetch('http://127.0.0.1:8080/fetch-server?vip=10', {//请求方法method: 'POST',//请求头headers: {name: 'aodi'},//请求体body: 'username=admin&password=admin'}).then(response => {// return response.text();return response.json();}).then(response => {console.log(response);});}


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

相关文章

mac编译ijkplayer遇到问题

问题&#xff1a;./init-android.sh git version 2.44.0 pull ffmpeg base : command not founde.sh: line 2: : command not founde.sh: line 5: : command not founde.sh: line 6: tools/pull-repo-base.sh: line 9: syntax error near unexpected token elif ools/pull-re…

【第九节】Git 服务器搭建

目录 前言 一、 使用裸存储库搭建 Git 服务器 1.1 安装 Git 1.2 创建裸存储库 1.3 配置 SSH 访问 1.4 克隆仓库 二、 使用 GitLab 搭建 Git 服务器 2.1 安装 GitLab 2.2 配置 GitLab 2.3 创建项目 2.4 生成 SSH 密钥 2.5 添加 SSH Key 三、 使用 GitLab 管理项目 …

智源大模型通用算子库FlagGems四大能力升级 持续赋能AI系统开源生态

FlagGems是由智源研究院于2024年6月推出的面向多种AI芯片的开源大模型通用算子库。FlagGems使用Triton语言开发&#xff0c;在Triton生态开源开放的基础上&#xff0c;为多种AI芯片提供开源、统一、高效的算子层生态接入方案。FlagGems沿着统一的中间语言、统一的算子接口和统一…

条款24:若所有参数皆需类型转换,请为此采用非成员函数

条款24&#xff1a;若所有参数皆需类型转换&#xff0c;请为此采用非成员函数 设计一个表示有理数的类时&#xff0c;允许从整数隐式转换为有理数是有用的&#xff1a; class Rational { public:Rational(int numerator 0, // 该构造函数没有explicit限制;int denominator …

linux下操作es及kibana的操作记录

背景&#xff1a;工作中后面开始用es和kibana了&#xff0c;为了方便后面的操作&#xff0c;特记录一下&#xff0c;好多命令实在是记不住了&#xff0c;&#x1f604; kibana的操作 1.查看所有的索引的命令 GET /_cat/indices2.创建索引的命令 PUT /es_dsj_6c_jky_yunzhe_…

【机器学习】机器学习的基本分类-强化学习-REINFORCE 算法

REINFORCE 算法 REINFORCE 是一种基于策略梯度的强化学习算法&#xff0c;直接通过采样环境中的轨迹来优化策略。它是策略梯度方法的基础实现&#xff0c;具有简单直观的优点。 核心思想 目标函数 最大化策略的期望回报&#xff1a; ​​​​​​​ …

SSL Version 2 and 3 Protocol Detection漏洞修复

使用 IIS Crypto 工具 IIS Crypto 是一个免费工具&#xff0c;使管理员能够在 Windows Server 2008&#xff0c;2012&#xff0c;2016 和 2019 上启用或禁用协议&#xff0c;密码&#xff0c;哈希和密钥交换算法。它还允许您重新排序 IIS 提供的 SSL / TLS 密码套件&#xff0c…

基于GRU门控循环神经网络的多分类预测【MATLAB】

随着深度学习的不断发展&#xff0c;循环神经网络&#xff08;RNN&#xff09;在处理时间序列和自然语言处理等领域表现出了强大的能力。然而&#xff0c;传统RNN存在梯度消失和梯度爆炸问题&#xff0c;导致其在长序列任务中的表现受限。为了应对这些问题&#xff0c;门控循环…