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.mzph.cn/diannao/25501.shtml

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

相关文章

STM32H750启动和内存优化(分散加载修改)

前些日子有个朋友一直给我推荐STM32H750这款芯片&#xff0c;说它的性价比&#xff0c;说它多么多么好。于是乎&#xff0c;这两天试了试&#xff0c;嚯&#xff0c;真香&#xff01;我们先看看基本配置 这里简单总结下&#xff0c;cortex-m7内核&#xff0c;128k片内flash …

HTML-CSS练习例子

HTML CSS 练习 https://icodethis.com 作为前端练习生。不敲代码只看&#xff0c;入门是很慢的&#xff0c;所以直接实战是学习前端最快的途径之一。 这个网站练习HTML CSS的&#xff0c;可以打开了解一下&#xff0c;可以每天打卡&#xff0c;例子简单&#xff0c;循序渐进&…

Python第二语言(六、Python异常)

目录 1. 捕获异常&#xff08;try: except: else: finally:&#xff09; 1.1 概念 1.2 基础语法&#xff08;try&#xff1a; except&#xff1a;&#xff09; 1.3 捕获异常&#xff08;异常也有类型&#xff09; 1.4 捕获多个异常&#xff08;try&#xff1a;except(Name…

基于阿里云服务网格流量泳道的全链路流量管理(三):无侵入式的宽松模式泳道

作者&#xff1a;尹航 在前文《基于阿里云服务网格流量泳道的全链路流量管理&#xff08;一&#xff09;&#xff1a;严格模式流量泳道》、《基于阿里云服务网格流量泳道的全链路流量管理&#xff08;二&#xff09;&#xff1a;宽松模式流量泳道》中&#xff0c;我们介绍了流…

大数据数仓的数据回溯

在大数据领域&#xff0c;数据回溯是一项至关重要的任务&#xff0c;它涉及到对历史数据的重新处理以确保数据的准确性和一致性。 数据回溯的定义与重要性 数据回溯&#xff0c;也称为数据补全&#xff0c;是指在数据模型迭代或新模型上线后&#xff0c;对历史数据进行重新处理…

开源多平台AI音乐生成器本地安装结合cpolar内网穿透实现远程访问

文章目录 前言1. 本地部署2. 使用方法介绍3. 内网穿透工具下载安装4. 配置公网地址5. 配置固定公网地址 前言 本文主要介绍如何在Windows系统电脑上快速本地部署一个文字生成音乐的AI创作工具MusicGPT&#xff0c;并结合cpolar内网穿透工具实现随时随地远程访问使用。 MusicG…

基于stm32最小版的超声波测距模块

目录 一、模块准备 二、HC-SR04模块原理解释 三、程序完整代码 四、烧录结果 总结 一、模块准备 STM32F103C8T6 HC-SR04 ST-Link&#xff08;其他烧录器也可以&#xff09; 0.96寸OLED屏幕&#xff08;非必须&#xff0c;仅供显示测距结果&#xff0c;可以使用串口助手代替…

nodejs最新某东h5st(4.7.2)参数分析与javascript逆向纯算法还原(含算法源码)(2024-06-09)

一、作者声明&#xff1a; 文章仅供学习交流与参考&#xff01;严禁用于任何商业与非法用途&#xff01;否则由此产生的一切后果均与作者无关&#xff01;如有侵权&#xff0c;请联系作者本人进行删除&#xff01; 二 、写在前面 h5st从4.1一路更新到4.7.2&#xff0c;逐渐vmp…

66. UE5 RPG 实现远程攻击武器配合角色攻击动画

在制作游戏中&#xff0c;我们制作远程攻击角色&#xff0c;他们一般会使用弓箭&#xff0c;弩&#xff0c;弹弓等武器来进行攻击。比如你使用弓箭时&#xff0c;如果角色在播放拉弓弦的动画&#xff0c;但是弓箭武器没有对应的表现&#xff0c;会显得很突兀。所以&#xff0c;…

k8s和deepflow部署与测试

Ubuntu-22-LTS部署k8s和deepflow 环境详情&#xff1a; Static hostname: k8smaster.example.net Icon name: computer-vm Chassis: vm Machine ID: 22349ac6f9ba406293d0541bcba7c05d Boot ID: 605a74a509724a88940bbbb69cde77f2 Virtualization: vmware Operating System: U…

克鲁斯卡尔算法最小生成树--C语言

同样是最小生成树&#xff0c;普利姆算法是从一个起始顶点开始&#xff0c;逐步扩展生成树&#xff0c;每次选择连接生成树和未包含顶点的最小边。而克鲁斯卡尔算法是按权值排序的方式&#xff0c;从最小的边开始逐步添加到生成树中&#xff0c;确保不会形成环&#xff0c;直到…

自友科技破解走班教育排课难题

新高考后&#xff0c;校园教务都面临着晋级&#xff0c;其中走班教育的分班排课是个巨大的挑战。 所以在分班排课的时候要清楚一下几个问题 一是&#xff1a;清楚的核算学生的选考科目。学生选科提交后做好并承认&#xff0c;最好是在分班后不要改或很少的一部分人改动。 二是…

达梦8 探寻达梦排序原理:传统排序机制(SORT_FLAG=0)

测试版本&#xff1a;--03134283938-20221019-172201-20018 达梦的排序机制由四个dm.ini参数控制&#xff1a; #maximum sort buffer size in Megabytes &#xff0c;有效值范围&#xff08;1~2048&#xff09; SORT_BUF_SIZE 100 #ma…

SpringBoot: 启动流程和类装载

前面我们学过Spring定制了自己的可执行jar&#xff0c;将真正执行时需要的类和依赖放到BOOT-INF/classes、BOOT-INF/lib来&#xff0c;为了能够识别这些为止的源文件&#xff0c;Spring定制了自己类加载器&#xff0c;本节我们来讲解这个类加载器。本节涉及的内容主要包括: Sp…

Linux部署调度工具xxl-job

背景&#xff1a; Pentaho Data Integration&#xff08;kettle&#xff09;作为用户规模最多的开源ETL工具&#xff0c;强大简洁的功能深受广大ETL从业者的欢迎。但kettle本身的调度监控功能却非常弱。Pentaho官方都建议采用crontab(Unix&#xff0c;linux平台)和计划任务(Win…

群体优化算法----树蛙优化算法介绍以及应用于资源分配示例

介绍 树蛙优化算法&#xff08;Tree Frog Optimization Algorithm, TFO&#xff09;是一种基于群体智能的优化算法&#xff0c;模拟了树蛙在自然环境中的跳跃和觅食行为。该算法通过模拟树蛙在树枝间的跳跃来寻找最优解&#xff0c;属于近年来发展起来的自然启发式算法的一种 …

抽象的java入门1.3.2

前言&#xff1a; 全新版本的函数&#xff08;方法&#xff09;定义&#xff0c;更简单 1.优化了验证过程&#xff0c;直击本质 2.新增目前一图流 正片&#xff1a; 函数的结构可以分为三部分&#xff1a;函数名&#xff0c;参数&#xff0c;函数体 一生二&#xff0c;二生…

6.9总结

Vue生命周期 生命周期&#xff1a;指一个对象从创建到销毁的整个过程生命周期的八个阶段&#xff1a;每触发一个生命周期事件&#xff0c;会自动执行一个生命周期的方法&#xff08;钩子&#xff09; mounted&#xff1a;挂载完成&#xff0c;Vue初始化成功&#xff0c;HTML渲…

ssm629基于SSM的二手交易平台设计与开发+jsp【已测试】

前言&#xff1a;&#x1f469;‍&#x1f4bb; 计算机行业的同仁们&#xff0c;大家好&#xff01;作为专注于Java领域多年的开发者&#xff0c;我非常理解实践案例的重要性。以下是一些我认为有助于提升你们技能的资源&#xff1a; &#x1f469;‍&#x1f4bb; SpringBoot…

智慧社区整体解决方案

1.智慧社区整体建设方案内容 2.整体功能介绍