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

AJAX--Express速成

一、基本概念

1、AJAX(Asynchronous JavaScript And XML),即为异步的JavaScript 和 XML。

2、异步的JavaScript

它可以异步地向服务器发送请求,在等待响应的过程中,不会阻塞当前页面。浏览器可以做自己的事情。直到成功获取响应后,浏览器才开始处理响应数据。

3、XML

是前后端数据通信时传输数据的一种格式。现在比较常用的是 JSON

总 : Ajax就是在浏览器不重新加载网页的情况下,对页面的某部分进行更新。

4、优势:通过AJAX从浏览器向服务器发送异步请求,无刷新获取数据

   缺点:

 

二、Ajax请求基本步骤

引入express框架创建服务端 server.js

// 1、引入express框架
const express = require('express');// 2、创建应用对象
const app = express();// 3、创建路由规则
// Request是对请求报文的封装
// Response是对响应报文的封装
app.get('/server',(request,response) =>{// 设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');// 设置响应response.send('这是服务端发送的响应报文')
})// 4、监听端口、启动服务
app.listen(8000,() =>{console.log("服务已经启动.......")
})

Ajax请求五步骤:

1.创建一个xhr对象

2.xhr.open()准备发送请求

3.xhr.send()发送请求

4.使用xhr的readystatechange属性,判断Ajax的状态码

5.判断HTTP的状态码

 GET请求实例:点击发送请求按键后,响应报文呈现在div“result”内

    <button>点击发送请求</button><div id="result"></div><script>// 获取button元素const btn = document.getElementsByTagName('button')[0];// 获取dom节点const result = document.getElementById('result');// 绑定事件 进行 《四步》 AJAX操作btn.onclick = function(){// 1、创建对象const xhr = new XMLHttpRequest();// 2、初始化 设置请求方法 & URLxhr.open('GET','http://127.0.0.1:8000/server');// 3、发送xhr.send();// 4、事件绑定 处理服务端返回的结果/*on表示当 、、时候;readystate 是xhr对象中的属性,表示状态0 1 2 3 4 ;*/xhr.onreadystatechange = function(){//判断服务端是否返回所有结果if(xhr.readyState === 4){//判断是否是正常的 2XX 即为正常if(xhr.status >= 200 && xhr.status < 300){//处理结果 行 头 体 // console.log(xhr.status);//响应行 -- 状态码// console.log(xhr.statusText);//响应行 -- 状态字符串// console.log(xhr.getAllResponseHeaders());//所有响应头// console.log(xhr.response);//响应体// 将响应信息放在result块内result.innerHTML = xhr.response;}else{alert('出错了');}}}}</script>

POST请求实例:鼠标进入div内就会自动发送请求

服务端添加post方法

app.post('/server',(request,response) =>{// 设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');// 设置响应response.send('这是服务端POST发送的响应报文')
});

浏览器端

<div id="result"></div><script>// 获取元素对象const result = document.getElementById("result");// 绑定事件  鼠标进入div内就会触发事件result.addEventListener("mouseover",function(){// 1、创建对象const xhr = new XMLHttpRequest();// 2、初始化 设置请求类型与urlxhr.open('POST','http://127.0.0.1:8000/server');// 3、发送xhr.send();// 4、事件绑定xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status < 300){result.innerHTML = xhr.response;}}}})</script>

三、同源策略

1、同源策略:浏览器的安全策略,要求协议、域名、端口号完全相同。

2、跨域问题

https(协议)://a.xxx.com(域名):8080(端口号)/flie/list(路径)

只要协议、域名、端口号,只要有任何一个不一样,都是不同域

Ajax引擎默认遵守同源策略。

3、解决跨域常用方法---使用中间代理

客户端浏览器通过Ajax引擎发送Ajax请求,默认遵守同源策略。

对于跨域请求,可发送,但是不可接收响应数据。

使用代理服务器,无Ajax引擎,所以左边的通信满足同源策略,右边的通信也正常。

React框架中代理配置:在发送请求时,一旦涉及到跨域,会自动检测,并将url改变,在收到响应后,自动改回来url。

了解止步。后续的知识我这个java后端就现学现用了。

相关文章:

AJAX--Express速成

一、基本概念 1、AJAX(Asynchronous JavaScript And XML)&#xff0c;即为异步的JavaScript 和 XML。 2、异步的JavaScript 它可以异步地向服务器发送请求&#xff0c;在等待响应的过程中&#xff0c;不会阻塞当前页面。浏览器可以做自己的事情。直到成功获取响应后&#xf…...

开题报告 PPT 应该怎么做

开题报告 PPT 应该怎么做 1、报告时首先汇报自己的姓名、单位、专业和导师。 2、研究背景&#xff08;2-3张幻灯片&#xff09; 简要阐明所选题目的研究目的及意义。 研究的目的&#xff0c;即研究应达到的目标&#xff0c;通过研究的背景加以说明&#xff08;即你为什么要…...

JavaScript系列从入门到精通系列第十四篇:JavaScript中函数的简介以及函数的声明方式以及函数的调用

文章目录 一&#xff1a;函数的简介 1&#xff1a;概念和简介 2&#xff1a;创建一个函数对象 3&#xff1a;调用函数对象 4&#xff1a;函数对象的普通功能 5&#xff1a;使用函数声明来创建一个函数对象 6&#xff1a;使用函数声明创建一个匿名函数 一&#xff1a;函…...

当我们做后仿时我们究竟在仿些什么(三)

异步电路之间必须消除毛刺 之前提到过&#xff0c;数字电路后仿的一个主要目的就是动态验证异步电路时序。异步电路的时序是目前STA工具无法覆盖的。 例如异步复位的release是同步事件&#xff0c;其时序是可以靠STA保证的&#xff1b;但是reset是异步事件&#xff0c;它的时序…...

如何将超大文件压缩到最小

1、一个文件目录&#xff0c;查看属性发现这个文件达到了2.50GB&#xff1b; 2、右键此目录选择添加到压缩文件&#xff1b; 3、在弹出的窗口中将压缩文件格式选择为RAR4&#xff0c;压缩方式选择为最好&#xff0c;选择字典大小最大&#xff0c;勾选压缩选项中的创建固实压缩&…...

[C#]C#最简单方法获取GPU显存真实大小

你是否用下面代码获取GPU显存容量&#xff1f; using System.Management; private void getGpuMem() {ManagementClass c new ManagementClass("Win32_VideoController");foreach (ManagementObject o in c.GetInstances()){string gpuTotalMem String.For…...

【数据结构】红黑树(C++实现)

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;数据结构 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 上一篇博客&#xff1a;【数据…...

day-64 代码随想录算法训练营(19)图论 part 03

827.最大人工岛 思路一&#xff1a;深度优先遍历 1.深度优先遍历&#xff0c;求出所有岛屿的面积&#xff0c;并且把每个岛屿记上不同标记2.使用 unordered_map 使用键值对&#xff0c;标记&#xff1a;面积&#xff0c;记录岛屿面积3.遍历所有海面&#xff0c;然后进行一次广…...

xss测试步骤总结

文章目录 测试流程1.开启burp2.测试常规xss语句3.观察回显4.测试闭合与绕过Level2Level3Level4Level5Level6Level7 5.xss绕过方法1)测试需观察点2)无过滤法3)">闭合4)单引号闭合事件函数5)双引号闭合事件函数6)引号闭合链接7)大小写绕过8)多写绕过9)unicode编码10)unic…...

2023最新简易ChatGPT3.5小程序全开源源码+全新UI首发+实测可用可二开(带部署教程)

源码简介&#xff1a; 2023最新简易ChatGPT3.5小程序全开源源码全新UI首发&#xff0c;实测可以用&#xff0c;而且可以二次开发。这个是最新ChatGPT智能AI机器人微信小程序源码&#xff0c;同时也带部署教程。 这个全新版本的小界面设计相当漂亮&#xff0c;简单大方&#x…...

【Redis】数据过期策略和数据淘汰策略

数据过期策略和淘汰策略 过期策略 Redis所有的数据结构都可以设置过期时间&#xff0c;时间一到&#xff0c;就会自动删除。 问题&#xff1a;大家都知道&#xff0c;Redis是单线程的&#xff0c;如果同一时间太多key过期&#xff0c;Redis删除的时间也会占用线程的处理时间…...

RPA的优势和劣势是什么,RPA能力边界在哪里?

RPA&#xff0c;即Robotic Process Automation&#xff08;机器人流程自动化&#xff09;&#xff0c;是一种新型的自动化技术&#xff0c;它可以通过软件机器人模拟人类在计算机上执行的操作&#xff0c;从而实现业务流程的自动化。RPA技术的出现&#xff0c;为企业提高效率、…...

Kubernetes 学习总结(38)—— Kubernetes 与云原生的联系

一、什么是云原生&#xff1f; 伴随着云计算的浪潮&#xff0c;云原生概念也应运而生&#xff0c;而且火得一塌糊涂&#xff0c;大家经常说云原生&#xff0c;却很少有人告诉你到底什么是云原生&#xff0c;云原生可以理解为“云”“原生”&#xff0c;Cloud 可以理解为应用程…...

号卡推广管理系统源码/手机流量卡推广网站源码/PHP源码+带后台版本+分销系统

源码简介&#xff1a; 号卡推广管理系统源码/手机流量卡推广网站源码&#xff0c;基于PHP源码&#xff0c;而且它是带后台版本&#xff0c;分销系统。运用全新UI流量卡官网系统源码有后台带文章。 这个流量卡销售网站源码&#xff0c;PHP流量卡分销系统&#xff0c;它可以支持…...

【C语言】汉诺塔 —— 详解

一、介绍 汉诺塔&#xff08;Tower of Hanoi&#xff09;&#xff0c;又称河内塔&#xff0c;是一个源于印度古老传说的益智玩具。大焚天创造世界的时候做了三根金刚石柱子&#xff0c;在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘。 大焚天命令婆罗门把圆盘从下面开始按…...

【云备份】

文章目录 [toc] 1 :peach:云备份的认识:peach:1.1 :apple:功能了解:apple:1.2 :apple:实现目标:apple:1.3 :apple:服务端程序负责功能:apple:1.4 :apple:服务端功能模块划分:apple:1.5 :apple:客户端程序负责功能:apple:1.6 :apple:客户端功能模块划分:apple: 2 :peach:环境搭建…...

第四十六章 命名空间和数据库 - 系统提供的数据库

文章目录 第四十六章 命名空间和数据库 - 系统提供的数据库系统提供的数据库ENSLIBIRISAUDITIRISLIBIRISLOCALDATAIRISSYS (the system manager’s database 系统管理器的数据库)IRISTEMP 第四十六章 命名空间和数据库 - 系统提供的数据库 系统提供的数据库 IRIS 提供以下数据…...

【贪心的商人】python实现-附ChatGPT解析

1.题目 贪心的商人 知识点:贪心 时间限制:1s 空间限制: 256MB 限定语言:不限 题目描述: 商人经营一家店铺,有number种商品,由于仓库限制 每件商品的最大持有数量是item[index], 每种商品的价格在每天是item_price[item_index][day], 通过对商品的买进和卖出获取利润,请给…...

解决nvm切换node版本失败的终极办法-秒杀网上99%的水文

nvm是一款强大的node多版本管理器&#xff0c;可以轻易选择你需要的node版本&#xff0c;这对win7平台简直就是超好的福音&#xff1a;可以突破node 14.15以上的安装限制。 但是nvm安装有一个巨大的坑点&#xff1a;nvm use 版本号以后&#xff0c;并没有生效&#xff0c;nvm …...

2023蓝帽杯半决赛电子取证+CTF部分题解

文章目录 电子取证123456789101112131415 CTFWeb | MyLinuxBotWeb | AirticleShareCrypto | ezrsaPwn | AdminPwn | uafmisc|排排坐吃吃果果 电子取证 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 CTF Web | MyLinuxBot Web | AirticleShare import requests import times reques…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...

Oracle11g安装包

Oracle 11g安装包 适用于windows系统&#xff0c;64位 下载路径 oracle 11g 安装包...