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

第 1 章:原生 AJAX

原生AJAX

1. AJAX 简介

  • AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML。
  • 通过 AJAX 可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。
  • AJAX 不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。

2. XML 简介

  • XML (Extensible Markup Language)可扩展标记语言。

  • XML 被设计用来传输和存储数据。

  • XML 和 HTML 类似,不同的是 HTML 中都是预定义标签,而 XML 中没有预定义标签,全都是自定义标签,用来表示一些数据。

  • 比如说我有一个学生数据:name = “孙悟空” ; age = 18 ; gender = “男” ;
    用 XML 表示:

<student><name>孙悟空</name><age>18</age><gender></gender>
</student>
  • 现在已经被 JSON 取代了。
    用 JSON 表示:
    {"name":"孙悟空","age":18,"gender":"男"}

3. AJAX 的特点

3.1 AJAX 的优点

  1. 可以无需刷新页面而与服务器端进行通信。
  2. 允许你根据用户事件来更新部分页面内容。

3.2 AJAX 的缺点

  1. 没有浏览历史,不能回退
  2. 存在跨域问题(同源)
  3. SEO 不友好

4. HTTP

HTTP(hypertext transport protocol)协议【超文本传输协议】,协议详细规定了浏览器和万维网服务器之间互相通信的规则。

4.1 请求报文

在这里插入图片描述

4.2 响应报文

在这里插入图片描述

4.3 Chrome网络控制台产看通信报文

网页F12打开控制台 -> Network -> Headers
在这里插入图片描述

5. NodeJS的安装与介绍

Node.js基础

6. express框架介绍与基本使用

因为ajax要向服务端发送请求,所以我们这里用express模拟一下服务端

6.1 express的安装

  1. 初始化npm包管理工具:npm init --yes
  2. 安装express:npm i express

6.2 使用express

// 1. 引入express
const express = require('express');// 2. 创建应用对象
const app = express();// 3. 创建路由规则
app.get('/', (request, response) => {response.send('hello express');
}// 4. 监听端口启动服务
app.listen(8000, () => {console.log("服务已经启动,8000端口监听中……);
}

6.3 启动服务

右键js文件打开终端输入:node 文件名.js
在这里插入图片描述

相关文章:

第 1 章:原生 AJAX

原生AJAX 1. AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML&#xff0c;就是异步的 JS 和 XML。通过 AJAX 可以在浏览器中向服务器发送异步请求&#xff0c;最大的优势&#xff1a;无刷新获取数据。AJAX 不是新的编程语言&#xff0c;而是一种将现有的标准组合在一…...

【代码随想录|贪心part04以后——重叠区间】

代代码随想录|贪心part04以后——重叠区间 一、part041、452.用最少数量的箭引爆气球2、435. 无重叠区间2、763.划分字母区间3、56. 合并区间4、738.单调递增的数字总结python 一、part04 1、452.用最少数量的箭引爆气球 452. 用最少数量的箭引爆气球 class Solution:def f…...

Denodo 连续 4 年获评 Gartner® 数据集成工具魔力象限™ 领导者

Gartner 在其 2023 年数据集成工具魔力象限中连续第四年将 Denodo 评为“领导者”。 Gartner 表示&#xff1a;“由于对数据编织架构、数据产品交付以及支持生成式 AI 的集成数据的需求即将到来&#xff0c;数据集成工具市场正在蓬勃发展。数据和分析领导者应该利用这项研究来…...

WHAT - React 函数与 useMemo vs useCallback

目录 一、介绍useMemo 与 useCallback 的区别示例代码useMemo 示例useCallback 示例 总结 二、当一个函数被作为依赖项useMemo 和 useCallback 的适用情况选择使用 useCallback 或 useMemo总结实际例子 一、介绍 在 React 中&#xff0c;useMemo 和 useCallback 是两个用于性能…...

系统分析师7:数学与经济管理

文章目录 1 图论应用1.1 最小生成树1.2 最短路径1.3 网络与最大流量 2 运筹方法2.1 线性规划2.2 动态规划2.2.1 供需平衡问题2.2.2 任务指派问题 3 预测与决策3.1 不确定型决策分析3.2 风险型决策3.2.1 决策树3.2.2 决策表 4 随机函数5 数学建模 1 图论应用 ①最小生成树 连接…...

一套简约的qt 蓝色qss方案

一套简约的qt 蓝色qss方案 直接使用qss代码 QMenu {background: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 rgba(255, 255, 255, 240),stop:0.2 rgba(255, 255, 255, 200),stop:0.6 rgba(255, 255, 255, 160),stop:1 rgba(255, 255, 255, 120));qproperty-effect: blur…...

OCSP原理及实践

1.OCSP介绍 在PKI体系中&#xff0c;CA机构颁发合法的证书。使用者可以使用CA根证书验证该证书是否被篡改过&#xff0c;但无法从证书文件验证出证书是否被吊销。因此CA机构会通过发布CRL&#xff08;Certificate Revocation List&#xff09;来告知所有人&#xff0c;哪些证书…...

前端流程图框架

1、Mermaid&#xff1a; Mermaid 是一个用于绘制流程图、时序图、甘特图等的纯 JavaScript 库。它使用简单的文本语法来定义图表结构&#xff0c;支持多种类型的流程图&#xff0c;易于集成到网页中。 2、Draw.io&#xff1a; Draw.io 是一个在线的流程图绘制工具&#xff0…...

13.6 编写go代码接收webhook的告警发送钉钉

本节重点介绍 : 使用钉钉机器人发送到钉钉群通过alertmanager webhook发送我们自定义的go程序中解析alert对象并拼接钉钉信息发送 需求分析 使用钉钉机器人发送到钉钉群 钉钉机器人发送群消息 文档地址 通过webhook发送我们自定义的go程序中 然后解析发过来的alert&#x…...

codetest

1、寻找身高相近的小朋友 #include <iostream> #include <bits/stdc.h>using namespace std;//寻找身高相近的小朋友//输入&#xff0c;第一行两个整数&#xff0c;分别是小明身高&#xff0c;其他小伙伴个数&#xff0c;第二行是其他小伙伴的身高 //100 10 //95 …...

MyBatis-Plus拦截器接口InnerInterceptor失效?因MyBatis缓存机制而踩的一个深坑

InnerInterceptor 接口是 MyBatis-Plus 提供的一个拦截器接口&#xff0c;用于实现一些常用的 SQL 处理逻辑。例如某个组件运作在多系统的平台上&#xff0c;不同系统需要隔离&#xff0c;于是可以通过这个拦截器接口&#xff0c;给每一条要执行的sql末尾拼接一个AND systemId …...

jmeter之计数器

计数器作用&#xff1a; 对于自增长的数字&#xff0c;可以使用计数器实现 一、添加计数器及参数说明 添加计数器 计数器参数说明 Starting value&#xff1a;给定计数器的起始值、初始值&#xff0c;第一次迭代时&#xff0c;会把该值赋给计数器 递增&#xff1a;每次迭代…...

协议集合(学习笔记)

按照数据的传送方式&#xff0c;通信协议可分为以下2种。 串行通信&#xff1a;串行&#xff08;Serial&#xff09;指的是逐个传输数据位&#xff0c;一次只传输一个位。 并行通信&#xff1a;并行&#xff08;Parallel&#xff09;指的是同时传输多个数据位&#xff0c;一次…...

进程

进程 进程进程的含义PCB块内存空间进程分类&#xff1a;进程的作用进程的状态进程已经准备好执行&#xff0c;所有的资源都已分配&#xff0c;只等待CPU时间进程的调度 进程相关命6.查询进程相关命令1.ps aux2.top3.kill和killall发送一个信号 函数1.fork();2.getpid3.getppid示…...

10款好用的电脑监控软件推荐丨2024年干货整理,赶紧码住!

选择合适的电脑监控软件可以帮助企业和个人更好地管理和保护其计算机资源。以下是10款较为好用的电脑监控软件推荐。 1. 安企神 7天试用体验https://work.weixin.qq.com/ca/cawcde06a33907e60a 简介&#xff1a;安企神是一款专为企业设计的信息安全管理软件&#xff0c;提供…...

【MySQL-24】万字全面解析<索引>——【介绍&语法&性能分析&使用规则】

前言 大家好吖&#xff0c;欢迎来到 YY 滴MySQL系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的《Lin…...

刷题记录(2)

1. HWOD机试 - 模拟消息队列(100) package com.yue.test;import org.junit.Test;import java.util.ArrayList; import java.util.Arrays; import java.util.LinkedList; import java.util.List;/*** Author: 夜雨* Date: 2021-12-08-10:31* Description:* Version 1.0*/ public…...

JVM中的GC过程

堆内存结构&#xff1a;在详细讨论GC过程之前&#xff0c;需要了解JVM堆内存的结构。JVM堆内存通常被分为新生代&#xff08;Young Generation&#xff09;和老年代&#xff08;Old Generation&#xff09;&#xff0c;其中新生代又进一步细分为Eden区&#xff08;Eden Space&a…...

Python实战项目:天气数据爬取+数据可视化(完整代码)_python爬虫实战

一、选题的背景 随着人们对天气的关注逐渐增加&#xff0c;天气预报数据的获取与可视化成为了当今的热门话题&#xff0c;天气预报我们每天都会关注&#xff0c;天气情况会影响到我们日常的增减衣物、出行安排等。每天的气温、相对湿度、降水量以及风向风速是关注的焦点。通过…...

FFmpeg源码:compute_frame_duration函数分析

一、compute_frame_duration函数的定义 compute_frame_duration函数定义在FFmpeg源码&#xff08;本文演示用的FFmpeg源码版本为7.0.1&#xff09;的源文件libavformat/demux.c中&#xff1a; /*** Return the frame duration in seconds. Return 0 if not available.*/ stat…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

高频面试之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…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...