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

Ajax笔记

news 2025/6/21 3:39:30

介绍

        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

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2025/6/20 12:22:27

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2025/6/20 12:05:35

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2025/6/15 14:03:42

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2025/6/18 20:47:42

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/6/17 3:05:21

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/6/17 23:00:16

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2025/6/19 12:34:55

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/6/17 23:13:07

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/6/15 9:22:28

云安全与网络安全：核心区别与协同作用解析

在数字化转型的浪潮中&#xff0c;云安全与网络安全作为信息安全的两大支柱&#xff0c;常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异&#xff0c;并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全&#xff1a;聚焦于保…...

编程新知 2025/6/18 20:10:39