当前位置： 首页 > news >正文

Ajax笔记

news 2026/2/8 13:33:46

介绍

        Ajax是一种网页开发技术，全称是Asynchronous JavaScript and XML（异步JavaScript和XML）。作用如下：

  • 数据交换：可以通过Ajax给服务器发送请求，并获取服务器响应的数据。即前端动态的发送Ajax到服务器端来获取相应数据，接收到数据后基于vue中的指令完成相应的数据渲染。
  • 异步交互：能够在不中断用户操作(不重新加载整个页面)的情况下与服务器交换数据并更新部分网页。这意味着用户在提交请求后，仍然可以继续浏览或操作页面，直到服务器响应返回。

与异步交互相对：同步交互

        同步交互：访问客户端——请求服务器——服务器处理(客服端等待)——服务器响应(客服端加载)——客户端继续访问

        我们访问链接，加载图片、视频都属于同步交互，而异步交互则可在不中断客服端操作的情况下与服务器交换数据

原生Ajax

一、创建XMLHttpRequest对象，用于和服务器交换数据

var xhr = new XMLHttpRequest();//创建XMLHttpRequest对象

二、调用 XMLHttpRequest 对象中的 open() 方法来设置请求的方式和请求路径，并调用 send() 方法来向服务器发送请求

xhr.open(method, url, async);//发送异步请求
xhr.send(data);//发送请求
  • method: 请求类型，如 “GET”, “POST”, “PUT”, “DELETE” 等。
  • url: 请求的URL(此处使用本地文本代替)。
  • async: (可选) 布尔值，表示请求是否异步，默认为true。
  • data: (可选) 发送到服务器的数据，通常为json数据

三、获取服务器响应的数据

<script>function loadDoc() {var my_xml = new XMLHttpRequest();//创建XMLHttpRequest对象，它是实现Ajax通信的核心。my_xml.onreadystatechange = function () {//为XML对象设置了一个事件处理器，用于监听readyState属性的变化。if (this.readyState == 4 && this.status == 200) {document.getElementById("demo").innerHTML = this.responseText;}};my_xml.open("GET", "ajax_info.txt", true);my_xml.send();} 
</script>

        onreadystatechange 是 my_xml 的一个标准事件处理器属性，用来监听 readyState 和 status 的属性变化，两属性不同的值代表不同的含义：

readyState

0：请求未初始化

1：服务器连接已建立

2：请求已收到

3：正在处理请求

4：请求已完成且响应已就绪

status

200: "OK"

403: "Forbidden"

404: "Not Found"

        当readyState变为4（请求已完成）并且HTTP状态码为200（请求成功）时，函数将进行：

  1. 使用document.getElementById("demo")获取页面中ID为demo的元素。
  2. 将该元素的innerHTML属性设置为this.responseText，即服务器返回的响应文本。
<!DOCTYPE html>//示例
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AAA专业苏打饼干打孔</title>
</head><body><input type="button" value="获取数据" onclick="loadDoc()"><div id="demo"></div>
</body>
<script>function loadDoc() {var my_xml = new XMLHttpRequest();my_xml.onreadystatechange = function () {if (this.readyState == 4 && this.status == 200) {document.getElementById("demo").innerHTML = this.responseText;}};my_xml.open("GET", "../json/students_info.json", true);my_xml.send();} 
</script></html>

        但这种方式比较繁琐，且在早期的浏览器中可能还会遇到兼容问题，所以原生Ajax已不再使用，现在所使用的是基于原生Ajax封装起来的技术如Axios

Axios 

一、自备Axios文件并引入，或直接引入官方文档

<script src="js/axios-0.18.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

二、使用Axios发送请求，并获取响应结果

    axios({method: "get",//请求方式为geturl: 'http://example.com/api/cookies'//此处url仅做示范//请求的路径，如需传递数据则在url后以?key=value,例:?name=123&age=123的形式传输数据}).then((result) => {//.then响应服务器数据并调用"成功回调函数"console.log(result.data); //拿到result中的data属性});axios({method: "post",//post传输数据在请求体中传输，通过data属性来指定所传请求参数url: 'http://example.com/api/cookies/${cookieId}',data: "id=1"}).then((result) => {console.log('数据删除成功:', result.data);});

例： 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AAA专业苏打饼干打孔</title><script src="../js/axios-0.18.0.js"></script>
</head><body><input type="button" value="获取数据" onclick="get()"><input type="button" value="删除数据" onclick="post()">
</body>
<script>function get() {//通过axios发送异步请求-getaxios({method: "get",url: 'https://yapi.pro/mock/557466/user/getById'}).then((result) => {console.log(result.data);});}function del() {//通过axios发送异步请求-postaxios({method: "post",url: 'https://yapi.pro/mock/557466/user/getById',data: "id=1"}).then((result) => {console.log('数据删除成功:', result.data);});}
</script></html>

        但这种请求方式 过于复杂，为方便书写，Axios已经为支持的所有请求方式提供了请求方式的别名：

  • axios.get(url, [config]):
    • url: 必需，字符串，请求的服务器URL。
    • config: 可选，配置对象，可以包含以下选项：
      • params: 将被添加到URL查询字符串中的参数。
      • headers: 请求头信息。
      • responseType: 响应数据的类型，例如 ‘json’, ‘blob’, ‘document’, ‘arraybuffer’, ‘text’, ‘stream’。
      • timeout: 请求超时的毫秒数。
      • withCredentials: 是否跨站点请求时携带凭证（cookies）。
  • axios.delete(url, [config]):
    • url: 必需，字符串，请求的服务器URL。
    • config: 可选，配置对象，与 axios.get 的配置选项类似，可以包含 params, headers, timeout, withCredentials 等属性。
  • axios.post(url, [data], [config]):
    • url: 必需，字符串，请求的服务器URL。data: 可选，要作为请求体发送的数据，可以是对象、字符串或数组。
    • config: 可选，配置对象，与 axios.get 的配置选项类似，但还可以包含 data 的处理选项，如 transformRequest 和 transformResponse。
  • axios.put(url, [data], [config]):
    • url: 必需，字符串，请求的服务器URL。
    • data: 可选，要作为请求体发送的数据，通常用于更新资源。
    • config: 可选，配置对象，与 axios.post 的配置选项相同。

        简化后：

<script>function get() {//通过axios发送异步请求-getaxios.get('http://example.com/api/cookies').then((result) => {console.log(result.data);});}function del() {//通过axios发送异步请求-postaxios.post('http://example.com/api/cookies', id = 1).then((result) => {console.log('数据删除成功:', result.data);}); }
</script>
  •         接下来我们将其与vue放在一起使用，我们需要浏览器页面加载完成后自动发送异步请求到服务端获取数据，并自动将其渲染在页面中。想实现这一点离不开vue。
    •         前面介绍过vue有生命周期，其中有八个钩子函数，我们需要在 mounted 钩子函数中发送异步请求。
    • <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AAA专业苏打饼干打孔</title><script src="../js/axios-0.18.0.js"></script><script src="../js/vue.js"></script>
</head><body><div id="app"><table border="1" cellspacing="0" width=60%><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>编号</th></tr><tr align="center" v-for="(person, index) in emps" :key="index"><td>{{ index+1}}</td><td>{{ person.name }}</td><td>{{ person.age }}</td><td v-if="person.gender==1">{{ "男" }}</td><td v-else-if="person.gender==2">{{ "女" }}</td><td>{{ person.studentID }}</td></tr></table></div>
</body>
<script>new Vue({el: "#app",data: {emps: [],},mounted() {//发送异步请求，访问数据axios.get("https://yapi.pro/mock/557466/user/list").then(result => {this.emps = result.data.students;})},})
</script></html>

相关文章：

Ajax笔记

介绍 Ajax是一种网页开发技术&#xff0c;全称是Asynchronous JavaScript and XML&#xff08;异步JavaScript和XML&#xff09;。作用如下&#xff1a; 数据交换&#xff1a;可以通过Ajax给服务器发送请求&#xff0c;并获取服务器响应的数据。即前端动态的发送Ajax到服务器端…...

编程日记 2024/10/25 9:06:52

软考：缓存分片和一致性哈希

缓存分片技术是一种将数据分散存储在多个节点上的方法&#xff0c;它在分布式缓存系统中尤为重要。这项技术的核心目的是提高系统的性能和可扩展性&#xff0c;同时确保数据的高可用性。以下是缓存分片技术的一些关键点&#xff1a; 数据分片&#xff1a;缓存分片涉及将数据分成…...

编程日记 2024/10/25 9:05:51

3109 体验积分值

经验值&#xff1a;1200 时间限制&#xff1a;1000毫秒 内存限制&#xff1a;128MB 合肥市第34届信息学竞赛&#xff08;2017年&#xff09; 不许抄袭&#xff0c;一旦发现&#xff0c;直接清空经验&#xff01; 题目描述 Description 卡卡西和小朋友们做完了烧脑的数字游…...

编程日记 2024/10/25 9:03:49

初识jsp

学习本章节前建议先安装Tomcat web服务器&#xff1a;tomcat下载安装及配置教程_tomcat安装-CSDN博客 1、概念 我的第一个JSP程序&#xff1a; 在WEB-INF目录之外创建一个index.jsp文件&#xff0c;然后这个文件中没有任何内容。将上面的项目部署之后&#xff0c;启动服务器…...

编程日记 2024/10/25 9:02:48

Ansible 的脚本 --- playbooks剧本

playbooks 本身由以下各部分组成 &#xff08;1&#xff09;Tasks&#xff1a;任务&#xff0c;即通过 task 调用 ansible 的模板将多个操作组织在一个 playbook 中运行 &#xff08;2&#xff09;Vars&#xff1a;变量 &#xff08;3&#xff09;Templates&#xff1a;模板 &a…...

编程日记 2024/10/25 9:01:47

Windows 死机时 系统错误日志分析与故障排除

目录 前言正文 前言 对于服务器异常重启&#xff0c;推荐阅读&#xff1a;详细分析服务器自动重启原因&#xff08;涉及Linux、Window&#xff09; 以下主要做一个总结梳理 正文 查看系统事件日志&#xff1a; 可以查看系统事件日志&#xff0c;找出可能导致系统崩溃的错误…...

编程日记 2024/10/25 9:00:46

基于pytorch搭建CNN

先上代码 import torch import torch.nn as nn import torch.optim as optim import torch.nn.functional as F from torchvision import datasets, transforms import matplotlib.pyplot as plt import numpy as np import pandas as pd import matplotlibmatplotlib.use(tkA…...

编程日记 2024/10/25 8:59:43

C#实现与Windows服务的交互与控制

在C#中&#xff0c;与Windows服务进行交互和控制通常涉及以下几个步骤&#xff1a; 创建Windows服务&#xff1a;首先&#xff0c;需要创建一个Windows服务项目。可以使用Visual Studio中的“Windows 服务 (.NET Framework)”项目模板来创建Windows服务。 配置服务控制事件&am…...

编程日记 2024/10/25 8:58:41

Java和Ts构造函数的区别

java中子类在使用有参构造创建对象的时候不必要必须调用父类有参构造 而js则必须用super()调用父类的有参构造,即使用不到也必须传递 Java 中的处理方式 可选择性参数: 在 Java 中&#xff0c;当子类使用父类的有参构造方法创建对象时&#xff0c;可以只传递需要的参数。如果父…...

编程日记 2024/10/25 8:57:40

植物健康，Spring Boot来助力

3系统分析 3.1可行性分析 通过对本植物健康系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本植物健康系统采用SSM框架&#xff0c;JAVA作为开发语言&#…...

编程日记 2024/10/25 8:56:38

百度文心一言接入流程-java版

百度文心一言接入流程-java版 一、准备工作二、API接口调用-java三、百度Prompt工程参考资料： 百度文心一言：https://yiyan.baidu.com/百度千帆大模型：https://qianfan.cloud.baidu.com/百度千帆大模型文档：https://cloud.baidu.com/doc/WENXINWORKSHOP/index.html千tokens…...

编程日记 2024/10/25 8:53:34

Java 11 新特性深度解析与应用实践

Java 作为一种广泛应用的编程语言&#xff0c;不断演进以满足开发者日益增长的需求和适应技术的发展趋势。Java 11 带来了一系列重要的新特性和改进&#xff0c;这些变化不仅提升了语言的性能和功能&#xff0c;还为开发者提供了更好的开发体验和工具。本文将深入探讨 Java 11 …...

编程日记 2024/10/25 8:51:29

druid 连接池监控报错 Sorry, you are not permitted to view this page.本地可以，发布正式出错

简介&#xff1a; druid 连接池监控报错 Sorry, you are not permitted to view this page. 使用Druid连接池的时候&#xff0c;遇到一个奇怪的问题&#xff0c;在本地&#xff08;localhost&#xff09;可以直接打开Druid连接池监控&#xff0c;在其他机器上打开会报错&#…...

编程日记 2024/10/25 8:50:25

[RN与H5] 加载线上H5通信失败问题记录(启动本地H5服务OK)

RT: nextjs项目 在本地启动H5服务, 本地开发都OK 发布到线上后, 效果全无, 经排查发现, 写了基本配置的js脚本在挂载时机上的差异导致 根本原因是...

编程日记 2024/10/25 8:49:24

electron 打包

安装及配置 安装electron包以及electron-builder打包工具 # 安装 electron cnpm install --save-dev electron # 安装打包工具 cnpm install electron-builder -D 参考的package.json文件 其中description和author为必填项目 {"name": "appfile",&qu…...

编程日记 2024/10/25 8:47:22

ChatGLM-6B和Prompt搭建专业领域知识问答机器人应用方案（含完整代码）

目录 ChatGLM-6B部署 领域知识数据准备 领域知识数据读取 知识相关性匹配 Prompt提示工程 领域知识问答 完整代码 本文基于ChatGLM-6B大模型和Pompt提示工程搭建医疗领域知识问答机器人为例。 ChatGLM-6B部署 首先需要部署好ChatGLM-6B，参考 ChatGLM-6B中英双…...

编程日记 2024/10/25 8:44:19

虚拟机配置静态IP地址(人狠话不多简单粗暴)

1.先找到以下位置&#xff1a; 2. 虚拟机中执行vi /etc/sysconfig/network-scripts/ifcfg-ens33 根据上图信息修改配置文件内容&#xff1a; 静态IP地址设置不超过255就行&#xff0c;我这里弄得100&#xff0c;没毛病。 3.修改并保存文件后&#xff0c;重启网络执行&#…...

编程日记 2024/10/25 8:42:16

Android token JJWT

在Android开发领域&#xff0c;JJWT&#xff08;Java JWT&#xff0c;即Java Json Web Token&#xff09;库是一个流行的工具&#xff0c;用于处理JSON Web Tokens&#xff08;JWTs&#xff09;。JWT是一种轻量级的、自包含的、基于JSON的用于双方之间安全传输信息的简洁的、UR…...

编程日记 2024/10/25 8:41:15

动态规划＜一＞初识动态规划

目录 认识动态规划 LeetCodeOJ练习 斐波那契数列模型 认识动态规划 1.动态规划是一种用于解决优化问题的算法策略。 2.它的核心原理是把一个复杂的问题分解为一系列相互关联的子问题。通过先求解子问题&#xff0c;并且记录这些子问题的解&#xff08;通常用一个表格之类的…...

编程日记 2024/10/25 8:39:14

【AIGC】ChatGPT提示词Prompt精确控制指南：Scott Guthrie的建议详解与普通用户实践解析

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | ChatGPT 文章目录 &#x1f4af;前言&#x1f4af;斯科特古斯里&#xff08;Scott Guthrie&#xff09;的建议解读人机交互设计的重要性减轻用户认知负担提高Prompt的易用性结论 &#x1f4af;普通用户视角的分析普通用户…...

编程日记 2024/10/25 8:38:12

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2026/2/8 4:37:22

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/12/14 20:57:41

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2026/2/8 12:24:34

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2026/1/31 13:42:15

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2026/1/30 1:47:17

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2026/2/7 11:00:30

Webpack性能优化：构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

编程新知 2025/12/26 15:05:09