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

Ajax笔记

news 2025/9/14 13:39:03

介绍

        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

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/9/3 1:27:59

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/9/12 22:27:30

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/7/20 15:22:30

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/8/29 10:53:38

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/9/12 0:24:07

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/8/27 21:28:45

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2025/9/12 23:22:13

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

编程新知 2025/7/7 21:48:53

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/9/4 2:30:13

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/7/6 7:40:12