Ajax 快速入门

Ajax

  1. 概念:Ajax是一种Web开发技术,允许在不重新加载整个页面的情况下,与服务器交换数据并更新网页的部分内容。

  2. 作用

    • 数据交换:Ajax允许通过JavaScript向服务器发送请求,并能够接收服务器响应的数据。

    • 异步交互:它使得Web应用程序可以在后台与服务器进行数据交换,而不会干扰用户当前的页面操作。

  3. 应用场景

    • 搜索联想:在搜索框中输入文字时,动态显示搜索建议。

    • 用户名可用性校验:在用户注册或修改用户名时,实时检查用户名是否已被占用。

  4. 技术实现:Ajax通常通过JavaScript的XMLHttpRequest对象或现代的fetch API来实现,这些API允许开发者发送HTTP请求并与服务器进行通信。

  5. 优势

    • 提高用户体验:通过异步数据加载,提高页面响应速度,提升用户体验。

    • 减轻服务器负担:只请求必要的数据,减少不必要的页面加载,减轻服务器负担。

  6. 现代应用:随着Web开发技术的发展,Ajax已经成为现代Web应用程序中不可或缺的一部分,尤其是在创建单页应用(SPA)和动态用户界面时。

AJAX 并非编程语言。

AJAX 仅仅组合了:

  • 浏览器内建的 XMLHttpRequest 对象(从 web 服务器请求数据)

  • JavaScript 和 HTML DOM(显示或使用数据)

Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据,但将数据作为纯文本或 JSON 文本传输也同样常见。

Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分,而不需要重新加载整个页面。

原生Ajax

<body><input type="button" onclick = "getData"/><div id="div1"></div>
</body>
​
<script>function getData(){//1.创建XMLHttpRequestvar xmlHttpRequest = new XMLHttpRequest();//发送异步请求xmlHttpRequest.open("GET","url");xmlHttpRequest.send(); // 发送请求//监听就绪状态改变xmlHttpRequest.onreadystatechange()=function(){ if(xmlHttpRequest.readState == 4 && xmlHttpRequest.status == 200){document.getElementById("div1").innerHTML = xmlHttpRequest.reponseText; //获得“文本响应”的数据}}}
</script>

XMLHttpRequest 对象方法

方法描述
new XMLHttpRequest()创建新的 XMLHttpRequest 对象。
abort()取消当前请求。
getAllResponseHeaders()返回头部信息。
getResponseHeader()返回特定的头部信息。
open(method, url, async, user, psw)规定请求。method:请求类型 GET 或 POSTurl:文件位置async:true(异步)或 false(同步)user:可选的用户名psw:可选的密码
send()向服务器发送请求,用于 GET 请求。
send(string)向服务器发送请求,用于 POST 请求。
setRequestHeader()将标签/值对添加到要发送的标头。

XMLHttpRequest 对象属性

属性描述
onload定义接收到(加载)请求时要调用的函数。
onreadystatechange定义当 readyState 属性发生变化时调用的函数。
readyState保存 XMLHttpRequest 的状态。 0:请求未初始化1:服务器连接已建立 2:请求已收到 3:正在处理请求 4:请求已完成且响应已就绪
responseText以字符串形式返回响应数据。
responseXML以 XML 数据返回响应数据。
status返回请求的状态号 200: "OK" 403: "Forbidden" 404: "Not Found" 如需完整列表请访问 Http 消息参考手册
statusText返回状态文本(比如 "OK" 或 "Not Found")

Axios

axios快速入门

  • 创建HTML界面,引用Axios.js文件

    <script src="/axios.js"> </script>
  • 使用Axios发送请求

  • //const axios = require('axios');
    axios.get("url","id=1").then()
    //或者
    axios({method: "get",url: "/url", // 请替换为实际的请求 URLparams: {id: 1} // 这里是一个对象,我们会将其转换为查询字符串
    }).then(function (response) {console.log(response.data); // 成功回调函数}) .catch(function (error) {// 处理错误情况console.log(error);}).finally(function () {// 总是会执行});
    ​
    ​
    /*
    这两种向服务器会带消息的params: {    //配置 GET 请求参数id: 1} data: {     //jsonid: 1}, 
    */
    axios.post("url","id=1").then()
    //或者
    axios({method: "post",url: "/url", // 请替换为实际的请求 URLdata: {id: 1}, // 这里是一个对象,我们需要将其转换为 JSON 字符串headers: {'Content-Type': 'application/json' // 设置 Content-Type 为 JSON}
    }).then(function (response) {console.log(response.data); // 成功回调函数}) .catch(function (error) {// 处理错误情况console.log(error);}).finally(function () {// 总是会执行});
    ​

  • params 是一个用于配置 GET 请求参数的对象。当您使用 params 字段时,Axios 会自动将参数编码为 URL 查询字符串,并将它们附加到请求的 URL 末尾。这对于发送键值对(如查询字符串)的 GET 请求非常有用。

并发请求

function getUserAccount() {// 定义一个函数 getUserAccount,该函数返回一个 Axios GET 请求的 Promisereturn axios.get('/user/12345');
}
​
function getUserPermissions() {// 定义一个函数 getUserPermissions,该函数返回一个 Axios GET 请求的 Promisereturn axios.get('/user/12345/permissions');
}
​
const [acct, perm] = await Promise.all([getUserAccount(), getUserPermissions()]);
// 使用 await 等待 Promise.all 执行完成,并解构返回的数组,分别赋值给 acct 和 perm
// Promise.all 接受一个数组,其中每个元素都是一个 Promise
// 在这个例子中,数组包含两个元素:getUserAccount() 和 getUserPermissions()
// Promise.all 返回一个 Promise,当数组中的所有 Promise 都解决时,返回一个包含所有解决值的数组
​
// OR
​
Promise.all([getUserAccount(), getUserPermissions()]).then(function ([acct, perm]) {// 使用 Promise.all 的返回值// 在这个 then 方法中,我们得到一个包含两个解决的 Promise 值的数组// 我们可以通过解构赋值来分别获取 acct 和 perm});
// 这段代码与上面的 await 版本等效,只是使用了 Promise.all 的返回值
// 在 then 方法中处理返回的数组,而不是直接在 await 后面解构
​
​

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/348148.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【人工智能】第五部分:ChatGPT的实际应用案例和未来发展方向

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

Ecovadis审核的内容

Ecovadis审核的内容。Ecovadis是一家国际性的企业社会责任评估机构&#xff0c;旨在为全球供应链的可持续性发展提供评估和审核。在本文中&#xff0c;我们将从以下几个方面详细介绍Ecovadis审核的内容&#xff1a; 一、Ecovadis审核的范围和目的 Ecovadis审核的范围涵盖了各个…

Halcon 多相机统一坐标系

小杨说事-基于Halcon的多相机坐标系统一原理个人理解_多相机标定统一坐标系-CSDN博客 一、概述 最近在搞多相机标定等的相关问题&#xff0c;对于很大的场景&#xff0c;单个相机的视野是不够的&#xff0c;就必须要统一到一个坐标系下&#xff0c;因此我也用了4个相机&#…

IDEA配置mybatis-config.xml模板文件

IDEA配置mybatis-config.xml模板文件 File>>Settings>>File and Code Templates 创建mybatis-config.xml模板 模板内容取自mybatis官网 mybatis官网 <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE configurationPUBLIC &qu…

理解数学概念——线性(线性性)

1. 线性相关词汇的词源 1.1 单词“line”的词源 这个单词是古英语“line”和古法语“ligne”二者的融合。在古英语中&#xff0c;“line”的词义为“缆绳&#xff0c;绳索&#xff1b;一系列&#xff0c;行&#xff0c;字母行&#xff1b;规则&#xff0c;方向(cable, rope; s…

TextCtrl输入文本类

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 wx.StaticText类只能够用于显示纯粹的静态文本&#xff0c;但是有时需要输入文本与用户进行交互&#xff0c;此时&#xff0c;就需要使用wx.TextCtrl…

什么是校园抄表系统?

1.校园抄表系统的简述 校园抄表系统是当代高校管理中的一个重要组成部分&#xff0c;主要运用于全自动搜集、管理方法与分析校园里的电力能源使用数据&#xff0c;如水电煤等。它通过先进的方式方法&#xff0c;完成了对能源消耗的实时监控系统&#xff0c;提升了电力能源管理…

GoogleDeepMind联合发布医学领域大语言模型论文技术讲解

Towards Expert-Level Medical Question Answering with Large Language Mod 这是一篇由Google Research和DeepMind合作发表的论文,题为"Towards Expert-Level Medical Question Answering with Large Language Models"。 我先整体介绍下这篇论文的主要内容&#x…

CCNA 0基础入门

OSI & TCP/IP OSI参考模型 TCP/IP协议 应用层 ------↓表示层 ------>应用层会话层 ------↑传输层 ------>传输层网络层 ------>网络互联层链路层 ------>网络接口层物理层 ------>↑ 物理层 传输的信号以及网线以及接线 主要作用是产生并检测电…

计算机网络:网络层 - IPv4数据报 ICMP协议

计算机网络&#xff1a;网络层 - IPv4数据报 & ICMP协议 IPv4数据报[版本 : 首部长度 : 区分服务 : 总长度][标识 : 标志 : 片偏移][生存时间 : 协议 : 首部检验和][可变部分 : 填充字段] ICMP协议 IPv4数据报 一个IPv4数据报&#xff0c;由首部和数据两部分组成&#xff…

大型语言模型(LLMs)的后门攻击和防御技术

大型语言模型&#xff08;LLMs&#xff09;通过训练在大量文本语料库上&#xff0c;展示了在多种自然语言处理&#xff08;NLP&#xff09;应用中取得最先进性能的能力。与基础语言模型相比&#xff0c;LLMs在少样本学习和零样本学习场景中取得了显著的性能提升&#xff0c;这得…

----几种接口的使用---

Compareable接口 对于给数组中的变量成员排序&#xff0c;我们能想到用sort&#xff0c;根据成员之间的大小进行排序&#xff0c;那么如果数组中的成员是对象的话&#xff0c;单单只是用sort去排序肯定是步成功的&#xff0c;因为并不知道要根据什么去排序&#xff0c; 这时要…

【漏洞复现】海洋CMS /js/player/dmplayer/dmku/ SQL注入漏洞复现(CVE-2024-29275)

0x01 产品简介 海洋CMS是一套专为不同需求的站长而设计的内容管理系统&#xff0c;灵活、方便、人性化设计、内容的专业网站。海洋CMS基于PHPMySql技术开发&#xff0c;完全开源免费、无任何加密代码。简单易用是最大的特色&#xff0c;可快速建立一个海量 0x02 漏洞概述 海…

虚拟机开启网络代理设置

前言&#xff1a; 不管是物理主机还是实验环境中的VMware虚拟机&#xff0c;有时候总要访问一些镜像网站或者资源网站拉取一些学习资料&#xff0c;但由于国内外网络环境的差异和网络安全的问题。总是会被阻拦。物理机相对比较容易一些&#xff0c;今天我们来说一说虚拟机应该…

SpringBoot+Vue网上购物商城系统(前后端分离)

技术栈 JavaSpringBootMavenMySQLMyBatisVueShiroElement-UI 系统角色对应功能 用户商家管理员 系统功能截图

Java面试八股之构造方法有哪些特性

构造方法有哪些特性 方法名与类名相同&#xff1a;构造方法的名称必须与它所在的类名称完全相同&#xff0c;包括大小写。 无返回类型&#xff1a;构造方法没有返回类型声明&#xff0c;连void也不需要。虽然没有明确的返回类型&#xff0c;但它隐式地返回了新创建的实例的引…

C语言调用so/dll动态库

文章目录 windows系统linux系统windows 与 linux下 C 调用动态库的差异 C语言调用动态链接库 windows系统 windows系统下&#xff0c;C语言调用win下的动态库dll&#xff0c;使用头文件<windows.h>。 准备基础C代码 lauf.c #include <stdio.h>// 定义函数&#x…

Hbase布隆过滤器

Hbase布隆过滤器 说在前面 重要思想&#xff1a; 1.时间换空间&#xff1a;降低内存使用率 --> 降低数据查询时间 2.空间换时间&#xff1a;提高数据查询速率 --> 保存在内存中

Web前端大作业:基于html+css+js的仿淘宝首页前端项目(内附源码)

文章目录 一、项目介绍二、项目展示三、源码展示四、源码获取 一、项目介绍 这个项目是一个Web前端大作业,目的是让学生们通过实践仿设计淘宝官网的前端页面,来全面锻炼他们的HTML、CSS和JavaScript编程能力,以及产品需求分析、界面设计、交互设计等软实力。 淘宝作为国内最大…

UML交互图-协作图

概述 协作图和序列图都表示出了对象间的交互作用&#xff0c;但是它们侧重点不同。序列图清楚地表示了交互作用中的时间顺序&#xff0c;但没有明确表示对象间的关系。协作图则清楚地表示了对象间的关系&#xff0c;但时间顺序必须从顺序号获得。序列图常常用于表示方案&#…