26_ajax
目录
了解
接口
前后端交互
一、安装服务器环境 nodejs
ajax发起请求
渲染响应结果
get方式传递参数
post方式传递参数
封装ajax_上
封装ajax下
了解
清楚前后端交互就可以写一些后端代码了。小项目
现在写项目开发的时候都是前后端分离
之前都没有前端这个东西，2014年后有了框架，划分越来越明显。
什么叫前后端分离？
我写前面的一个网页项目叫桂花香，如果我不把桂花香这个项目代码发给你，那么你就看不到我的页面。因为没有后端服务器。
把前端代码放后端京东.com服务器上，这样大家都能请求访问。
那后端就充当服务器一个角色？后端能做的事很多，主要对数据库增删改查
这些数据都是后端返回的，不是你硬写 写死上去的。（比如我刷新抖音对应热搜就变了，刷新的时候后端再查 返回过来，前端再渲染）
推荐的东西/页面会变，这些数据都是后端去查询数据库返回到前端，前端拿到数据渲染
咋渲染到页面上？后面讲
现在的项目都是前后端分离
Fetch/XHR代表接口
接口
如果能够对接口发起请求呢？如何拿到这些数据。就是用到前后端交互
前后端交互
后端可以返回前端所需要的数据
需求：是咱们前端如何获取到这些数据 并渲染到页面上
解决：前后端交互的重点 ajax
本章讲ajax如何发起请求，获取后端数据，做前后端交互
一、安装服务器环境 nodejs
要交互就要安装服务器环境。
前端要调后端的接口。发起ajax，但是要请求服务器得去先安装服务器的环境。
nodejs 是运行服务器程序的基础，推荐16比较稳定
-
环境安装
1、安装包 下载地址：Index of /download/release/latest-v16.x/
-
双击安装即可
-
正常下一步，可以选择你想要安装的盘符目录，如果你电脑上安全软件，推荐安装到C盘
直接一直下一步 不需要修改盘符。。。自动的配置环境变量
-
-
测试是否安装成功
win + R 打开 dos命令窗口 输入命令node -v
或者
node --version如果出现版本号 就代表安装成功
如果出现“node 不是内部外部命令，，，” 没安装成功 卸载重装//或者添加环境变量看看
二、ajax前后端交互
前后端是分离的！！！
交互通过谁：ajax
前端：前端完成自己的静态页面，，页面中有很多数据，数据是后端返回的，咱们需要做的事情就是请求到后端返回的数据，，如何请求后端数据，，用到ajax
ajax
ajax全名是 async(异步) javascript and xml
ajax是前后端交互的能力
也就是我们客户端给服务器发送数据的工具，也可以接收响应的数据
这是一个默认 异步的执行机制 （ajax发起网络请求 请求是需要时间 异步的）
01-异步说明
快速判断：需要时间去等就是异步的
<script>// 同步：排队执行 从前到后执行(比如先打哈哈哈等1s之后再打印嘿嘿嘿)// 异步：同步的先执行，异步的后执行setTimeout(()=>{//定时器就是一个异步操作console.log("哈哈哈");},1)console.log("嘿嘿嘿");//同步的先打印</script>ajax 优势
1、不需要第三方库 原生js直接使用
2、用户体验好（异步） 不需要刷新页面就可以更新数据，局部刷新(比如就刷新热搜排名那一块)
3、减轻服务器负担
缺点：
1、搜索引擎支排名持度不够（seo） 因为数据都不在页面上，数据都是从服务器上来的 搜索引擎搜索不到(底下来的)。
ajax发起请求
接口地址。用到服务器。
启动服务器
ajax发起请求
<script>let btn = document.querySelector("button");btn.onclick=function(){let xhr = new XMLHttpRequest();//请求对象xhr.open("get","http://localhost:8888/test/first"); //请求地址(接口）xhr.send(); }</script>
<body><button>发起请求</button><script>let btn = document.querySelector("button");//找到网页按钮btn.onclick=function(){// 第一步- 创建一个xml对象//XMLHttpRequest()是一个构造函数需要new对象let xhr = new XMLHttpRequest();// 第二步- 配置xhr对象//-请求方式get/post //-请求地址xhr.open("get","http://localhost:8888/test/first"); //http://localhost:8888/test/first 接口// 第三步- 发起网络请求xhr.send(); }</script>
</body>浏览器查看发起的请求
通过浏览器调试查看我们发起的请求
打开控制台 -->网络（network）--> fetch/xhr
改代码post/放弃请求，不成功? 因为接口文档用的get
不改代码/模拟一下
如何知道请求的地址 和 请求的方式呢？？
查看接口文档 （接口文档都是后端提供的）渲染响应结果
处理返回的数据渲染到页面上
<script>let btn = document.querySelector("button");//获取按钮let h1 = document.querySelector("h1");//渲染到h1btn.onclick = function () {let xhr = new XMLHttpRequest();//接口请求对象xhr.open("get", "http://localhost:8888/test/first"); //接口地址xhr.send();xhr.onload = function () {h1.innerHTML = xhr.responseText;//获取响应文本}}</script>
</body><body><button>发起请求</button><h1></h1><script>let btn = document.querySelector("button");let h1 = document.querySelector("h1");btn.onclick = function () {let xhr = new XMLHttpRequest();xhr.open("get", "http://localhost:8888/test/first"); xhr.send();// 4-处理响应数据(渲染到页面上)// 响应数据两种情况：纯字符串/json字符串xhr.onload = function () {h1.innerHTML = xhr.responseText;//console.log(xhr.responseText);//打印到控制台上看获取到没有}}</script>
</body>json
打印到控制台的是一堆json格式字符串，不是一个正常对象。
想把message渲染，得把json格式的字符串处理成对象。
<head></head>
<body><button>发起请求</button><h1></h1><script>let btn = document.querySelector("button");let h1 = document.querySelector("h1");btn.onclick =function(){let xhr = new XMLHttpRequest();xhr.open("get","http://localhost:8888/test/second");xhr.send();xhr.onload = function(){console.log(xhr.responseText);// 我们在进行前后端交互时 响应的数据发部分都是json格式的字符串// 获取到之后需要通过JSON.parse()方法 把json字符串转化为一个真正的对象h1.innerHTML = JSON.parse(xhr.responseText).message //把message渲染到页面中}}</script>
</body>
接口文档说
get方式传递参数
？是拼接参数，提交给后端查询参数。
get方式都是以？这种形式去拼接的。
<body><input type="text" placeholder="姓名"><input type="text" placeholder="年龄"><button>发起请求</button><h1></h1><script>//js获取标签let btn = document.querySelector("button");let h1 = document.querySelector("h1");let ipts = document.querySelectorAll("input");//伪数组btn.onclick = function () {// 1-创建xml对象let xhr = new XMLHttpRequest()// 2-设置xml对象// get请求方式携带数据 数据是放到路径上的// 格式：url?key1=value&key2=value&key3=value // (eg:http:http://localhost:8888/test/third?name='xx'&age='xx')// key 参数名（字段名）// value 参数值 （字段值）xhr.open("get",`http://localhost:8888/test/thirdname=${ipts[0].value}&age=${ipts[1].value}`);// 3-发起请求xhr.send();// 4- 处理响应结果xhr.onload = function(){console.log(xhr.responseText);}}</script>
</body>
payload里边就是你传的参数，写啥传啥。
post方式传递参数
工作的时候铺完页面调静态接口
后面学了框架之后用别的去调接口。
参数都是用的魔发字符串动态${}
post请求接口时，必须设置请求头，添加一条请求头信息，这条信息是发送的数据的格式
比如：application/x-www-form-urlencoded
怎样添加 给xhr 对象添加请求头
语法：xhr.setRequestHeader("请求字段名","请求的值")
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")// 注意:post 方式// 1-必须设置请求头(发送前设置请求头)// 2-携带的数据不能在url地址里 而是通过send（）携带数据<body><input type="text" placeholder="姓名"><input type="text" placeholder="年龄"><h1></h1><button>发起请求</button><script>let btn = document.querySelector("button");//获取let ipts = document.querySelectorAll("input");//获取let h1 = document.querySelector("h1");//获取btn.onclick=function(){// 1.xhr请求对象let xhr = new XMLHttpRequest()// 2-设xhr.open("post","http://localhost:8888/test/fourth")// 3-发let data = `name=${ipts[0].value}&age=${ipts[1].value}`;//参数xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//post设置请求头xhr.send(data); // post通过send传参给服务器!!!// 4.渲xhr.onload = function(){let data = JSON.parse(xhr.responseText);console.log(data);h1.innerHTML = `我的名字是${data.info.name}我的年龄是${data.info.age}`}}</script>
</body>封装ajax_上
写项目就不用一直写发送请求。一个项目接口上百个。怎么办？
在开发过程中在多次使用的东西都封装成一个函数。多次去使用调用。
调用xml.send()就行了
<body><input type="text" placeholder="姓名"><input type="text" placeholder="年龄"><button>发起请求</button><script>let btn = document.querySelector("button");let ipts = document.querySelectorAll("input");//postbtn.onclick = function () {let option = {//可变对象method:"post",url:"fourth",data:{name:"jack",age:18},header:"Content-type,application/x-www-form-urlencoded"}xhr(option);//调用}// 封装的网络请求函数// 可变:方式 地址 参数 请求头// 可变的 调用函数的时候传参！！！ 传谁我就用谁！！function xhr(options){//option对象传过来let method = options.method || "get";//传过来的url 没传默认getlet url = options.url;// getlet data = formatData(options.data || {}); if(method.toUpperCase()=="GET"&&data){url = url+data}// 1-创let xhr = new XMLHttpRequest();// 2-设xhr.open(method,`http://localhost:8888/test/${url}`)//方式可变 //地址可变// 3-发xhr.send();// 4-处理渲染xhr.onload = function(){}}// get希望传的是 ?name=jack&age=18 所以传来的参数进一步处理// 格式化data的函数function formatData(obj){let data = ""; // 保存保存处理好之后的数据for(let key in obj){data += `&${key}=${obj[key]}`}data = data.slice(1);//从下标为1开始截取到最后return data;}</script>
</body> // 封装的网络请求函数// 哪些是可变的 请求方式 请求地址 请求参数 请求头// 可变的 调用函数的时候传参！！！ 传谁我就用谁！！function ajax(options){let method = options.method || "get";//如果你传了请求方式就用你传的 没传默认是getlet url = options.url;let header = options.header || {"Content-Type":"application/x-www-form-urlencoded"}let type = options.dataType || "json"// ajax希望传的是 ?name=jack&age=18 所以传来的参数进一步处理let data = formatData(options.data || {}); // data参数 get和post请求方式不一样 分情况讨论// get 方式在地址后边拼接 post方式是通过send（data） 发送的if(method.toUpperCase()=="GET"&&data){// foruth?name=jack&age=18url = url+"?"+data}// 1-创建xhr对象let xhr = new XMLHttpRequest();// 2-设置xhr对象xhr.open(method,`http://localhost:8888${url}`)for(let key in header){xhr.setRequestHeader(key,header[key]);}// 3- 发起请求// 分成两种情况 post请求的话 参数是通过send取发送的if(method.toUpperCase()=="POST" && data){xhr.send(data);}else{xhr.send();}// 4- 处理响应结果xhr.onload = function(){// 有可能是纯字符串 有可能是json字符串 (最常用的json串)let result;if(type=='json'){result = JSON.parse(xhr.responseText)}else{result = xhr.responseText}options.success(result)}}// 格式化data的函数function formatData(obj){let data = ""; // 保存保存处理好之后的数据for(let key in obj){data += `&${key}=${obj[key]}`}data = data.slice(1);//从下标为1开始截取到最后return data;}封装ajax下
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./axios.js"></script>
</head><body><input type="text" placeholder="姓名"><input type="text" placeholder="年龄"><button>get发起请求first</button><button>get发起请求second</button><button>post发起请求third</button><script>let btn = document.querySelectorAll("button");let ipts = document.querySelectorAll("input");// 在哪调用 希望在哪拿到返回值的btn[0].onclick = function () {let option = {url:"first",dataType:"text",// 传一个回调函数success:(res)=>{console.log(res);}}ajax(option);}btn[1].onclick=function(){let option = {url:"third",dataType:"json",data:{name:"jack",age:18},// 回调函数 // 就是把函数A(success)当作参数传递到函数B中// 在函数B中以形参的方式去调用success:(res)=>{console.log(res);}}ajax(option)}btn[2].onclick=function(){let option = {url:"fourth",method:"post",data:{name:"jack",age:18},success:(res)=>{console.log(res);}}ajax(option)}</script>
</body></html>访问后端接口
ajax在实际项目中应用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;list-style: none;}ul{width: 1000px;border: 2px solid red;margin: 0 auto;background-color: #ccc;overflow: hidden;}li{float: left;width: 18%;margin-right: 2%;height: 300px;background-color: #fff;margin-bottom: 20px;border: 2px solid red;box-sizing: border-box;}img{width: 100%;}</style>
</head>
<body><ul></ul><script src="./axios.js"></script><script>let ul = document.querySelector("ul");let option = {url:"/goods/list",success:(res)=>{console.log(res.list);//数组// 数组里有多少对象 就希望有多少个lilet data="";res.list.forEach(item => {// console.log(item);data+= `<li><a href="#"><img src="${item.img_big_logo}"><h4>${item.title}</h4><p>${item.price}</p></a></li>` });ul.innerHTML = data;}}ajax(option)</script>
</body>
</html>相关文章：
26_ajax
目录 了解 接口 前后端交互 一、安装服务器环境 nodejs ajax发起请求 渲染响应结果 get方式传递参数 post方式传递参数 封装ajax_上 封装ajax下 了解 清楚前后端交互就可以写一些后端代码了。小项目 现在写项目开发的时候都是前后端分离 之前都没有前端这个东西&a…...
代理模式（Proxy Pattern）实现与对比
代理模式（Proxy Pattern）实现与对比 1. 虚拟代理（Virtual Proxy） 定义：延迟加载对象，避免资源浪费。 适用场景：大文件或资源的加载（如图片、数据库连接）。 代码示例 /…...
MySQL - 数据库基础操作
SQL语句 结构化查询语言(Structured Query Language)，在关系型数据库上执行数据操作、数据检索以及数据维护的标准语言。 分类 DDL 数据定义语言(Data Definition Language)，定义对数据库对象(库、表、列、索引)的操作。 DML 数据操作语言(Data Manip…...
Spring Boot热部署插件
在实际开发中，我们修改某些代码或页面都需要重启应用后才能生效，如果每次都手动重启，会降低了开发效率；热部署是指当我们修改代码后，服务能自动重启加载新修改的内容，这样大大提高了我们开发的效率…...
pip install cryptacular卡住，卡在downloading阶段
笔者安装pip install cryptacular卡在downloading阶段，但不知道为何 Collecting cryptacularCreated temporary directory: /tmp/pip-unpack-qfbl8f08http://10.170.22.41:8082 "GET http://repo.huaweicloud.com/repository/pypi/packages/42/69/34d478310d6…...
AI大模型从0到1记录学习 day09
第 8 章 面向对象之类和对象 8.1 面向过程和面向对象 面向过程编程（Procedural Programming）和面向对象编程（OOP）是两种不同的编程范式，它们在软件开发中都有广泛的应用。 Python是一种混合型的语言，既支持…...
【FW】ADB指令分类速查清单
1. 设备管理 指令核心作用adb devices列出已连接设备adb reboot重启设备adb reboot bootloader进入Bootloader模式adb reboot recovery进入Recovery模式adb root获取Root权限（需设备支持）adb remount挂载系统分区为可读写 2. 应用管理 指令核心作用adb…...
Kafka中的消息是如何存储的？
大家好，我是锋哥。今天分享关于【Kafka中的消息是如何存储的？】面试题。希望对大家有帮助； 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在 Kafka 中，消息是通过 日志（Log） 的方式进行存储的。…...
Altium Designer——同时更改多个元素的属性（名称、网络标签、字符串标识）
右键要更改的其中一个对象，选择查找相似… 进入到筛选界面，就是选择你要多选的对象的共同特点（名字、大小等等），我这里要更改的是网络标签，所以我选择Text设置为一样。 点击应用就是应用该筛选调节&#…...
当模板方法模式遇上工厂模式：一道优雅的烹饪架构设计
当模板方法模式遇上工厂模式：一道优雅的烹饪架构设计 模式交响曲的实现模板方法模式搭建烹饪骨架（抽象类）具体菜品（子类） 工厂模式 模式协作的优势呈现扩展性演示运行时流程控制 完整代码 如果在学习 设计模式的过程中…...
c++位运算总结
在C中，位运算是对二进制位进行操作的运算，主要有以下几种： 1. 按位与（ & ）：两个操作数对应位都为1时，结果位才为1，否则为0。例如 3 & 5 ， 3 二进制是 0000 0011…...
企业级知识库建设：自建与开源产品集成的全景解析 —— 产品经理、CTO 与 CDO 的深度对话
文章目录 一、引言二、主流产品与方案对比表三、自建方案 vs. 开源产品集成：技术路径对比3.1 自建方案3.2 开源产品集成方案 四、结论与个人观点 一、引言 在当今数据驱动的商业环境中，构建高质量的知识库已成为企业数字化转型的关键一环。本博客分别从…...
Python小练习系列 Vol.6：单词搜索（网格回溯）
🧠 Python小练习系列 Vol.6：单词搜索（网格回溯） 🔍 本期我们来挑战一道 LeetCode 上经典的网格型回溯题 —— 单词搜索，考察对 DFS 状态恢复的掌握！ 🧩 一、题目描述 给定一个 m x…...
shell脚本--MySQL简单调用
实现功能 增 数据库的创建，数据表的创建已经实现 创建用户 删 删除数据库， 删除库下的某个表， 删除某个用户 改 暂无 查 查看所有的数据库， 查看某个库下的所有数据表， 查看某个表的结构， 查…...
vue3项目配置别名
vue3项目配置别名 src别名的配置TypeScript 编译配置如果出现/别名引入报找不到的问题 src别名的配置 在开发项目的时候文件与文件关系可能很复杂，因此我们需要给src文件夹配置一个别名！！！ // vite.config.ts import {defineCon…...
Rust 面向对象
Rust 面向对象 引言 Rust 是一种系统编程语言，以其高性能、内存安全和并发支持而受到关注。Rust 的面向对象特性是其强大功能之一，它允许开发者以面向对象的方式构建复杂的应用程序。本文将深入探讨 Rust 的面向对象编程（OOP）特性，包括类的定义、继承、封装和多态等概念…...
[ C语言 ] | 从0到1？
目录 认识计算机语言 C语言 工欲善其事必先利其器 第一个C语言代码 这一些列 [ C语言 ] ，就来分享一下 C语言 相关的知识点~ 认识计算机语言 我们说到计算机语言，语言，就是用来沟通的工具，计算机语言呢？就是我们…...
[Mac]利用Hexo+Github Pages搭建个人博客
由于我这台Mac基本没啥环境，因此需要从零开始配置，供各位参考。 注意⚠️：MacBook (M4)使用/bin/zsh作为默认Shell，其对应的配置文件为~/.zshrc 参考文档： HEXO系列教程 | 使用GitHub部署静态博客HEXO | 小白向教程 文…...
pycharm与python版本
python 3.6-3.9 pycharm 2021版本搭配最好 python 3.8 pycharm 2019版本搭配最好 pycharm各版本下载...
Qt在IMX6ULL嵌入式系统中图片加载问题排查与解决
Qt在IMX6ULL嵌入式系统中图片加载问题排查与解决（保姆级教学！） 在使用Qt开发IMX6ULL嵌入式系统的过程中，我遇到了图片加载的常见问题。本文将分享问题排查的详细过程和解决方案，希望能帮助遇到类似困难的开发者。 问题…...
界面控件Telerik和Kendo UI 2025 Q1亮点——AI集成与数据可视化
Telerik DevCraft包含一个完整的产品栈来构建您下一个Web、移动和桌面应用程序。它使用HTML和每个.NET平台的UI库，加快开发速度。Telerik DevCraft提供完整的工具箱，用于构建现代和面向未来的业务应用程序，目前提供UI for ASP.NET MVC、Kendo…...
pycharm终端操作远程服务器
pycharm项目已经连接了远程服务器，但是打开终端，却依旧显示的是本地的那个环境，也就是说没有操作远程的那个环境。只能再使用Xshell去操作远程环境，很麻烦，找了下教程。 来源：https://blog.csdn.net/maolim…...
接口测试中数据库验证，怎么解决？
在接口测试中，通常需要在接口调用前后查询数据库，以验证接口操作是否正确影响了数据库状态。这可以通过数据库断言来实现，PyMySQL库常用于连接和操作MySQL数据库。通过该库，可以在测试中执行SQL语句，查询或修改数据…...
Playwright从入门到实战：比Selenium更快的数据爬取案例实战
摘要 Playwright 是微软开源的下一代浏览器自动化工具，凭借其高性能、跨浏览器支持和现代化设计，迅速成为 Web 自动化领域的热门选择。本文将从 安装配置 开始，通过 实战演练 展示其核心功能，并与 Selenium 深度对比，…...
defconfig配置宏的规则
defconfig配置宏的规则 CONFIG_INETnCONFIG_INETy defconfig里这样配置，CONFIG_INET宏有效吗 在 defconfig 文件中，如果出现了 相同的配置项被定义多次，最终生效的是最后一次出现的值。 🔹 你的配置 bash复制编辑CONFIG_INE…...
day1_Flink基础
文章目录 Flink基础今日课程内容目标为什么要学Flink技术更新迭代市场需求 流式计算批量计算概念特点 批量计算的优势和弊端流式计算生活中流场景流式计算的概念 Flink简介Flink历史Flink介绍 Flink架构体系已学过的框架技术Flink架构 Flink集群搭建Flink的集群模式Standalone模…...
ctf-web: 不统一的解析 + sql注入要求输入与输出相等 -- tpctf supersqli
# 从 django.shortcuts 模块导入 render 函数，用于渲染模板 from django.shortcuts import render # 从 django.db 模块导入 connection 对象，用于数据库连接 from django.db import connection# 此模块用于创建视图函数 # 从 django.http 模块导入 Http…...
基于Java与Go的下一代DDoS防御体系构建实战
引言：混合云时代的攻防对抗新格局 2024年某金融平台遭遇峰值2.3Tbps的IPv6混合攻击，传统WAF方案在新型AI驱动攻击面前全面失效。本文将以Java与Go为技术栈，揭示如何构建具备智能决策能力的防御系统。 一、攻击防御技术矩阵重构 1.1 混合攻击特征识别 攻击类型Java检测方案…...
使用FastExcel时的单个和批量插入的问题
在我们用excel表进行插入导出的时候，通常使用easyexcel或者FastExcel，而fastexcel是easy的升级版本，今天我们就对使用FastExcel时往数据库插入数据的业务场景做出一个详细的剖析 场景1 现在我们数据库有一张组织表，组织表的字段…...
交换技术综合实验
一、实验拓扑 二、实验要求 内网IP地址使用172.16.0.0/16分配。 SW1和SW2之间互为备份。 VRRP/STP/VLAN/Eth-trunk均使用。 所有PC通过DHCP获取IP地址。 ISP只能配置IP地址。 所有电脑可以正常访问ISP路由器。 三、实验步骤 基于172.16.0.0/16进行划分 172.16.2.0/24&…...