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

Ajax笔记

news 2025/10/31 23:08:38

介绍

        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

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/10/22 11:16:20

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/10/30 5:06:46

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2025/10/29 8:06:04

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2025/10/14 13:55:53

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/23 3:55:49

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2025/10/28 19:03:33

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2025/7/6 18:33:10

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/10/4 1:16:44

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2025/10/23 22:39:48