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

Ajax笔记

news 文章来源：https://blog.csdn.net/qq_65501197/article/details/143171367 2024/11/27 22:25:11

介绍

        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

2024年10月24日随笔

1024程序员节啊&#xff0c;现在已经是晚上的十点半了&#xff0c;我还在实验室里没走&#xff0c;刚把力扣的每日一题写完&#xff0c;好忙啊&#xff0c;好忙啊&#xff0c;好忙啊&#xff0c;为什么都大三了我还不能做自己的事情&#xff0c;今天老师开会说要给互联网加大赛…...

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

怎么做系统性能优化

对于软件或系统的性能优化&#xff0c;可以采取多种措施来提高效率和响应速度。这里为您列举一些常见的方法&#xff1a; 1. 代码优化&#xff1a;检查并优化算法复杂度&#xff0c;减少不必要的计算。使用更高效的数据结构和算法。 2. 数据库优化&#xff1a; •索引优化&…...

编程日记 2024/10/25 8:36:09

负载均衡：四层与七层

负载均衡建立在现在网络基础之上&#xff0c;提供一种廉价透明有效的方式扩展网络设备和服务器带宽、增加吞吐量、加强网络数据处理能力、提高网络的灵活性和可用性。负载均衡可分为七层负载与四层负载。 四层负载&#xff08;目标地址与端口交换&#xff09; 主要通过报文中…...

编程日记 2024/10/25 8:32:05

【Ubuntu】服务器系统重装SSHxrdpcuda

本文作者&#xff1a; slience_me Ubuntu系统重装操作合集 文章目录 Ubuntu系统重装操作合集1.1 系统安装&#xff1a;1.2 安装openssh-server更新系统包安装OpenSSH服务器检查SSH服务的状态配置防火墙以允许SSH测试SSH连接配置SSH&#xff08;可选&#xff09; 1.3 安装远程连…...

编程日记 2024/10/25 8:31:04

ChatGPT的模型训练入门级使用教程

ChatGPT 是由 OpenAI 开发的一种自然语言生成模型&#xff0c;基于 Transformer 架构的深度学习技术&#xff0c;能够流畅地进行对话并生成有意义的文本内容。它被广泛应用于聊天机器人、客户服务、内容创作、编程助手等多个领域。很多人对如何训练一个类似 ChatGPT 的语言模型…...

编程日记 2024/10/25 8:30:02

【OS】2.1.2 进程的状态与转换_进程的组织

✨ Blog’s 主页: 白乐天_ξ( ✿&#xff1e;◡❛) &#x1f308; 个人Motto&#xff1a;他强任他强&#xff0c;清风拂山冈&#xff01; &#x1f525; 所属专栏&#xff1a;C深入学习笔记 &#x1f4ab; 欢迎来到我的学习笔记&#xff01; 一、进程的状态 1.1.创建态 ……的…...

编程日记 2024/10/25 8:27:00

和为 n 的完全平方数的最少数量

给你一个整数 n &#xff0c;返回 和为 n 的完全平方数的最少数量 。 完全平方数 是一个整数&#xff0c;其值等于另一个整数的平方&#xff1b;换句话说&#xff0c;其值等于一个整数自乘的积。例如&#xff0c;1、4、9 和 16 都是完全平方数&#xff0c;而 3 和 11 不是。 示…...

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

Hallo2 长视频和高分辨率的音频驱动的肖像图像动画 （数字人技术）

HALLO2: LONG-DURATION AND HIGH-RESOLUTION AUDIO-DRIVEN PORTRAIT IMAGE ANIMATION 论文&#xff1a;https://arxiv.org/abs/2410.07718 代码&#xff1a;https://github.com/fudan-generative-vision/hallo2 模型&#xff1a;https://huggingface.co/fudan-generative-ai/h…...

编程日记 2024/10/25 8:20:55

如何在Debian 8上使用Let‘s Encrypt保护Apache

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 简介 本教程将向您展示如何在运行 Apache 作为 Web 服务器的 Debian 8 服务器上设置来自 Let’s Encrypt 的 TLS/SSL 证书。我们还将介…...

编程日记 2024/10/25 8:18:52

百科知识|选购指南

百科知识||选购指南 百科知识选购指南茶叶分类茶叶的味道来源茶叶制作步骤名茶其他一些茶叶的知识 百科知识 选购指南 茶叶 分类 茶叶种类: 六大茶类完美分析介绍&#xff01;茶友推荐收藏 (aboxtik.com) 1.绿茶&#xff08;发酵率0%&#xff09; 2.白茶&#xff08;发酵率…...

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

汕头网站排名优化报价/如何做一个自己的网站呢

20.7.1. Macro Name http://nagios.sourceforge.net/docs/3_0/macrolist.html 20.7.2. 插件开发手册 https://nagios-plugins.org/doc/guidelines.html#THRESHOLDFORMAT 原文出处&#xff1a;Netkiller 系列 手札 本文作者&#xff1a;陈景峯 转载请与作者联系&#xff0c;同时…...

编程日记 2024/11/27 22:20:40

药品加工厂做网站/百度网络营销app下载

项目临近秋招&#xff0c;加紧复习Java知识点。祝福大家每天进步亿点点&#xff0c;在秋招可以找到自己心意的工作。 下列关于修饰符混用的说法&#xff0c;错误的是( ) 正确答案: D 你的答案: A (错误) A、abstract不能与final并列修饰同一个类 B、abstract 类中不建议有pri…...

编程日记 2024/11/27 21:58:30

代运营网站/新网站秒收录技术

不知道别人的习惯是如何的,就我个人来说,写程序一般不是有性能问题,很少主动去使用多线程程序。除了主动去优化的场景&#xff0c;直观地认为多线程还是比较麻烦&#xff0c;可能涉及到同步问题&#xff0c;而且一个线程挂了&#xff0c;连累整个进程挂掉。除了可能快点外&…...

编程日记 2024/11/27 20:44:53

亿赐客网站/国内新闻摘抄2022年

微信公众号搜索 DevOps和k8s全栈技术&#xff0c;点击关注即可查看最新的技术文章&#xff0c;也可通过文章底部扫码关注&#xff0c;每天会分享技术和生活点滴&#xff0c;愿同大家共同进步&#xff0c;共同成长~helm安装Helm相当于linux环境下的yum包管理工具。helm是k8s中的…...

编程日记 2024/11/27 19:45:49

wordpress中文别名分类目录/seow

根据于渊老师的《Orange’s 一个操作系统的实现》我开始了操作系统的制作 首先进行了helloworld的编写&#xff0c;大体过程是&#xff1a; 1.了解什么语言编写操作系统 书中给出&#xff1a;汇编与c&#xff0c;但是helloworld编写仅仅是汇编&#xff0c;我也看不懂 直接复…...

编程日记 2024/11/27 18:43:11

国内免费发布产品的平台/太原seo排名公司

【小程序开发】常见的内置组件 文章目录【小程序开发】常见的内置组件写在前面一、Text文本组件二、Button按钮组件2.1 type属性2.2 open-type属性三、View视图组件三、Image图片组件3.1 mode属性3.2 wx.chooseMedia四、ScrollView滚动组件五、组件的共同属性写在前面 &#x1…...

编程日记 2024/11/27 9:47:48