Node.js-express

1.了解Ajax

1.1 什么是ajax

Ajax的全称是Asynchronous Javascript And XML(异步Js和XML).

通俗的理解:在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式,就是Ajax

1.2 为什么要学习Ajax

之前所学的技术,只能把网页做的更美观漂亮,或添加一些动画效果,但是,Ajax能让我们轻松实现网页与服务器之间的数据交互。

1.3 Ajax的典型应用场景

2.JQ中的Ajax

2.1 了解JQ中的Ajax

浏览器中提供的XMLHttpRequest用法比较复杂,所以JQ对XMLHttpRequest进行了封装,提供了一系列Ajax相关的函数,极大地降低了Ajax的使用难度

JQ中发起Ajax请求最常用的三种方法如下:

A. $.get();

B. $.post()

C. $.ajax()

2.2 $.get()函数语法

JQ中$.get()函数的功能单一,专门用来发起get请求,从而将服务器上的资源请求到客户端来进行使用。$.get()函数的语法如下:

$.get(url,[data],[callback]);

其中,三个参数各自代表的含义如下:

参数名参数类型是否必选说明
urlstring要请求的资源地址
dataobject请求资源期间要携带的参数
callbackfunction请求成功时的回调函数
<body><button onclick="getInfo()">请求</button>
</body>
<script>function getInfo() {$.get('http://localhost:9000/ajaxText', function (res) {console.log(res)});}
</script>

2.3 $.post()函数的语法

JQ中$.post()函数的功能单一,专门用来发起post请求,从而向服务器提交数据。

$.post()函数的语法如下:

$.post(‘地址’,function (res){

console.log(res);//这里的res是服务器返回的数据

})

其中,三个参数各自代表的含义如下:

参数名参数类型是否必选说明
urlstring要请求的资源地址
dataobject请求资源期间要携带的参数
callbackfunction请求成功时的回调函数

2.4 $.ajax()函数的语法

相对于$.get()和$.post()函数,JQ中提供的$.ajax()函数,是一个功能比较综合的函数,它允许我们对Ajax请求进行更详细的配置。

$.ajax()函数的基本语法如下:

$.ajax({

type:’’,//请求的方式,例如get或post

url:’’,//请求的url地址

data:{},//这次请求要携带的数据

success:function (res){}//请求成功之后的回调函数

});

<body><button onclick="getInfo()">请求get</button><button onclick="getInfo2()">请求post</button><button onclick="getInfo3()">请求ajax</button>
</body>
<script>function getInfo() {$.get('http://localhost:1234/data', function (res) {console.log(res)});}function getInfo2() {$.post('http://localhost:1234/data1', function (res) {console.log(res);});}function getInfo3() {$.ajax({type: 'get',url: "http://localhost:1234/data",success: function (res) {console.log(res);}});}
</script>

3.接口

3.1 接口的概念

使用Ajax请求数据时,被请求的URL地址,就叫做数据接口(简称接口),同时,每个接口必须有请求方式。

3.2 分析接口的请求过程

3.2.1 通过get方式请求接口的过程

3.2.2 通过post方式请求接口的过程

和get方式请求的逻辑差不多

3.3 接口文档

3.3.1 什么是接口文档

接口文档,顾名思义就是接口的说明文档,它是我们调用接口的依据,好的接口文档包含了对接口URL,参数以及输出内容的说明,我们参照接口文档就能方便的知道接口的作用,以及接口如何进行调用。

3.3.2 接口文档的组成部分

接口文档可以包含很多信息,也可以按需进行精简,不过,一个合格的接口文档,应该包含以下6项内容,从而为接口的调用提供依据:

A. 接口名称:用来标识各个接口的简单说明,如登录接口,获取图书列表接口等

B. 接口URL:接口的调用地址

C. 调用方式:接口的调用方式,如get或post

D. 参数格式:接口需要传递的参数,每个参数必须包含参数名称、参数类型、是否必须、参数说明这4项内容

E. 响应格式:接口的返回值详细描述,一般包括数据名称、数据类型、说明三项内容

F. 返回示例(可选):通过对象的形式,列举

4.Ajax加强

4.1 XMLHttpRequest的基本使用

4.1.1 什么是XMLHttpRequest

XMLHttpRequest(简称xhr)是浏览器提供的JS对象,通过它,可以请求服务器上的数据资源。之前所学的JQ中的Ajax函数,就是基于xhr封装出来的。

4.1.2 使用xhr发起GET请求

步骤:

A. 创建xhr对象

B. 调用xhr.open()函数

C. 调用xhr.send()函数

D. 监听xhr.onreadystatechange事件

<body><button onclick="getData()">xhr-get</button>
</body>
<script>//get请求function getData() {// A.创建xhr对象var xhr = new XMLHttpRequest();// B.调用xhr.open()函数xhr.open("get", "http://localhost:1234/data");// C.调用xhr.send()函数xhr.send();// D.监听xhr.onreadystatechange事件xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status == 200) {console.log(xhr.responseText);}}}
</script>
4.1.3 了解xhr对象的readyState属性

XMLHttpRequest对象的readyState属性,用来表示当前Ajax请求所处的状态。每个Ajax请求必须处于以下状态中的一个:

状态描述
0UNSENTXMLHttpRequest对象已被创建,但尚未调用open方法
1OPENEDOpen()方法已经被调用
2HEADRES_RECEIVEDSend()方法已经被调用,响应头也已经被接受
3LOADING数据接受中,此时response属性中已经包含部分数据
4DONEAjax请求完成,这意味着数传输已经彻底完成或失败
4.1.4 使用xhr发送带参数的GET请求

使用xhr对象发起带参数的GET请求时,只需在调用xhr.open期间,为URL地址指定参数即可:

xhr.open("get", "http://localhost:1234/books?id=999");

这种在URL地址后面拼接的参数,叫做查询字符串

4.1.5 查找字符串

1.什么是查找字符串

定义:查询字符串(URL参数)是指在URL的末尾加上用于向服务器发送信息的字符串(变量)。格式:将英文?放在URL的末尾,然后再加上参数=值,想加上多个参数的话,使用&符号进行分隔。以这个形式,可以将想要发送给服务器的数据添加到URL中。

1.什么是URL编码

URL地址中,只允许出现英文相关的字母、标点符号、数字,因此,在URL地址中不允许出现中文字符。如果URL中出现包含中文这样的字符,则必须对中文字符进行编码(转义).

URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的字符。URL编码原则的通俗理解:使用英文字符去表示非英文字符

// 不带参数
// xhr.open("get", "http://localhost:1234/data");
// 带一个参数的
// xhr.open("get", "http://localhost:1234/books?id=999");
// 带两个参数的
xhr.open("get", "http://localhost:1234/books?id=999&name=张三");

2.get请求携带参数的本质

无论使用$.ajax(),还是使用$.get(),又或者直接使用xhr对象发起GET请求,当需要携带参数的时候,本质上,都是直接将参数以查询字符串的形式,追加到URL地址的后面,发送到服务器的。

4.1.6 编码与解码

1.什么是URL编码

URL地址中,只允许出现英文相关的字母、标点符号、数字,因此,在URL地址中不允许出现中文字符。如果URL中出现包含中文这样的字符,则必须对中文字符进行编码(转义).

URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的字符。URL编码原则的通俗理解:使用英文字符去表示非英文字符

http://localhost:1234/books?id=999&name=张三
//经过URL编码之后,URL地址变成如下格式:
http://localhost:1234/books?id=999&name=%E5%BC%A0%E4%B8%89

2.如何对URL进行编码与解码

浏览器提供了URL编码与解码的API,分别是:

A. encodeURI()编码的函数

B. decodeURI()解码的函数

var temp = '程序员';
console.log(encodeURI(temp));//%E7%A8%8B%E5%BA%8F%E5%91%98
console.log(decodeURI('%E7%A8%8B%E5%BA%8F%E5%91%98')); //程序员

3.URL编码的注意事项

由于浏览器会自动对URL地址进行比编码操作,因此,大多数情况下,程序员不需要关心URL地址的编码与解码操作

4.1.7 使用xhr发送post请求

步骤:

A. 创建xhr对象

B. 调用xhr.open()函数

C. 设置Content-Type属性(固定写法)

D. 调用xhr.send()函数,同时指定要发送的数据

E. 监听xhr.onreadystatechange事件

// A.创建xhr对象
var xhr = new XMLHttpRequest();
// B.调用xhr.open()函数
xhr.open("post", "http://localhost:1234/data1");// C.设置Content - Type属性(固定写法)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');// D.调用xhr.send()函数,同时指定要发送的数据
xhr.send();// E.监听xhr.onreadystatechange事件
xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status == 200) {console.log(xhr.responseText);}
}

5.跨域和Jsonp

5.1 了解同源策略和跨域

5.1.1 同源策略
5.1.1.1 什么是同源

如果两个页面的协议,域名和端口都相同,则两个页面具有相同的源

例如:下表给出了相对于http://www.test.com/index.html页面的同源检测。

5.1.1.2 什么是同源策略

同源策略是浏览器提供的一个安全功能。

MDN官方给定的概念:同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

通俗的理解:浏览器规定A网站的JS,不允许和非同源的网站C之间,进行资源的交互,例如:

A. 无法读取非同源网页的Cookie、LocalStorage和IndexedDB

B. 无法接触非同源网页的DOM

C. 无法向非同源地址发送Ajax请求

5.1.2 跨域
5.1.2.1 什么是跨域

同源指的是两个URL的协议、域名、端口一致,反之,则是跨域

出现跨域的根本原因:浏览器的同源策略不允许非同源的URL之间进行资源的交互

网页:http://www.test.com/index.html

接口:http://www.api.com/userlist

5.1.2.2 浏览器对跨域请求的拦截

5.1.2.3 如何实现跨域数据请求

现如今,实现跨域数据请求,最主要的两种解决方案,分别是JSONPCORS

JSONP:出现的早,兼容性好(兼容低版本IE),是前端程序员为了解决跨域问题,被迫想出来的一种临时解决方案。确定是只支持GET请求,不支持POST请求

CORS:出现的较晚,它是W3C标准,属于跨域Ajax请求的根本解决 方案。支持GET和POST请求。缺点是不兼容某些低版本的浏览器。

5.2 JSONP

5.2.1 什么是JSONP

JSONP是JSON的一种”使用模式”,可用于解决主流浏览器的跨域数据访问的问题。

5.2.2 jsonp实现原理

由于浏览器同源策略的限制,网页中无法通过Ajax请求非同源的接口数据。但是<script>标签不受浏览器同源策略的影响,可以通过src属性,请求非同源的JS脚本。

因此,JSONP的实现原理,就是通过<script>标签的src属性,请求跨域的数据接口,并通过函数调用的形式,接受跨域接口响应回来的数据

5.3 综合运用

npm init

npm --registry https://registry.npmmirror.com install mysql bootatrap express

api/http.js

const express = require("express");
const app = express();
const cors = require("cors");
const db = require("./02db");// 解决跨域
app.use(cors()); // 关联express 和 cors之间的关系/*** req:请求变量* res:响应变量* next:回调函数*/
app.all("*", function (req, res, next) {res.setHeader("Access-Control-Allow-Origin", "*");next();
});app.get("/student/selectByLoginNameAndPwd", function (req, res) {db.selectByLoginNameAndPwd(req.query.loginName,req.query.loginPwd,function (data) {res.json(data);});
});// 设置端口
app.listen(2121, function () {console.log("端口2121已启动,正在加载......");
});

api/db.js

const mysql = require("mysql"); // 引入第三方模块内// 创建要连接的数据库对象
const connection = mysql.createConnection({host: "localhost",user: "root",password: "123456",database: "school2",
});// 打开数据库连接的桥梁
connection.connect();module.exports.selectByLoginNameAndPwd = function (name, pwd, callback) {let sql = `select * from student where LoginName='${name}' and LoginPwd = '${pwd}'`;connection.query(sql, function (err, data) {if (err) {callback(err);} else {callback(data);}});
};

html/login.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>登录</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><style>html,body {height: 100%;}.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;}</style></head><body><div class="container"><h1>登录</h1><div class="loginWrapper" style="width: 400px"><div class="username"><span>登录名</span><input type="text" id="name" class="form-control" /></div><div class="password"><span>密码</span><input type="text" id="pwd" class="form-control" /></div></div><buttonclass="btn btn-info"style="width: 200px; margin-top: 15px"onclick="login()">登录</button></div></body><script>function login() {$.ajax({url: "http://localhost:2121/student/selectLoginNameAndPwd",data: {loginName: $("#name").val(),loginPwd: $("#pwd").val(),},success: (res) => {console.log(res);},});}</script>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/655091.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【git】git update-index --assume-unchanged(不改动.gitignore实现忽略文件)

文章目录 原因分析&#xff1a;添加忽略文件(取消跟踪)的命令&#xff1a;取消忽略文件(恢复跟踪)的命令&#xff1a;查看已经添加了忽略文件(取消跟踪)的命令&#xff1a; 原因分析&#xff1a; 已经维护的项目&#xff0c;文件已经被追踪&#xff0c;gitignore文件不方便修…

用可视化案例讲Rust编程3. 函数分解与参数传递

上一节我们在绘制面要素的时候&#xff0c;发现了函数功能体是三个不同步骤组成的&#xff1a; 读取文件获得geometry把geometry转变为绘图元素trace把绘图元素绘制到地图上 像我们上一节那样&#xff0c;把所有的功能都写在一个函数里面&#xff0c;这样的函数灵活性太差&am…

代理IP购买:选择按流量还是端口收费的代理?

​ 代理通常按以下两种标准之一收费&#xff1a;GB 或端口。但您应该选择哪一个&#xff1f;它们与其他产品有何不同&#xff1f;主要取决于您的需求&#xff0c;每种类型都有自己的优缺点&#xff0c;适合不同的情况。 在本文中&#xff0c;我们将详细分析每种类型&#xff0…

【VSCode】增加或减少一Tab的间隔

文章目录 示例 1&#xff1a;给 console 打印添加一 Tab 的间隔&#xff08;按下tab键即可&#xff09; // 原有的格式 if(a b){ console.log(true) }else{ console.log(false) }// 改变后的格式 if(a b){console.log(true) }else{console.log(false) }示例 2&#xff1a;给…

专有钉钉开发记录,及问题总结

先放几个专有钉钉开发文档 专有钉钉官网的开发指南 服务端(后端)api文档 前端api文档 前端开发工具下载地址 小程序配置文件下载地址 后端SDK包下载地址 专有钉钉域名是openplatform.dg-work.cn 开发记录 开发专有钉钉时有时会遇到要使用钉钉的api&#xff1b;通过 my 的方…

微信小程序canvs画布修改元素线条粗细、颜色、填充状态

目录 一、获取画布信息 二、修改元素线条粗细 三、修改元素颜色

JavaWeb学习|Cookie

学习材料声明 所有知识点都来自互联网&#xff0c;进行总结和梳理&#xff0c;侵权必删。 引用来源&#xff1a;尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版 在此之前&#xff0c;复习一下如何创建项目 首先创建正常的Java项目&#xff0c;之后选择add framework…

C#学习笔记-反射

前言 反射是.NET中的重要机制&#xff0c;通过反射可以得到*.exe或*.dll等程序集内部的接口、类、方法、字段、属性、特性等信息&#xff0c;还可以动态创建出类型实例并执行其中的方法。 反射的功能很强大&#xff0c;任何复杂抽象的分层架构或者复杂的设计模式均是建立在这些…

任务修复实例(1)

实例1 任务名&#xff1a;增强防御&#xff08;quest_template.id 8490&#xff09; 涉及的两个数据表分别为 smart_script 和 creature_summon_groups smart_script Reactstate 取值参考源码 UnitDefines.h 的 ReactStates 定义&#xff0c;其中&#xff1a;0为被动&#…

低导通电阻、汽车级STD20NF06LAG,STO47N60M6、STO33N60M6、STO36N60M6 600V MDmesh™ M6 功率MOSFET

1、STD20NF06LAG 汽车级N沟道60V、32 mOhm典型值、24 A STripFET II功率MOSFET STripFET VI™功率MOSFET是采用ST专有STripFET™技术和新型栅极结构的增强模式MOSFET。该款受益于STripFET™技术的功率MOSFET采用沟槽技术&#xff0c;可实现高效率和低RDS(on) &#xff0c;满足…

SparkSql---用户自定义函数UDFUDAF

文章目录 1.UDF2.UDAF2.1 UDF函数实现原理2.2需求:计算用户平均年龄2.2.1 使用RDD实现2.2.2 使用UDAF弱类型实现2.2.3 使用UDAF强类型实现 1.UDF 用户可以通过 spark.udf 功能添加自定义函数&#xff0c;实现自定义功能。 如&#xff1a;实现需求在用户name前加上"Name:…

P8655 [蓝桥杯 2017 国 B] 发现环

好水啊&#xff0c;那我来水一篇题解。 题目就是要你在树上找环。那么我们想&#xff0c;怎么知道出现了环&#xff1f; 首先明确一点&#xff0c;在一棵树上&#xff0c;任意两点有且只有一条路径使它们相连。所以当我们发现原本就相连的点又要再连一次就知道出现了环。 是…

83、评估权值预加载带来的性能提升

上两节介绍的权值预加载技术&#xff0c;在很多业务中是真实存在的。 只不过限于本小册内容以及大部分同学硬件设备的局限&#xff0c;这里无法通过真正的推理框架(比如 tvm, pytorch) GPU 来实现底层细节&#xff0c;这些推理框架中一般会将类似的优化技术封装起来。 作为 …

APPium简介及安装

1 APPium简介 1. 什么是APPium&#xff1f; APPium是一个开源测试自动化框架&#xff0c;适用于原生、混合或移动Web应用程序的自动化测试工具。 APPium使用WebDriver协议驱动iOS、Android等应用程序。 2. APPium的特点 支持多平台&#xff08;Android、iOS等&#xff09; …

Spring Cache简明教程

Spring Cache简明教程 引言什么是Spring Cache&#xff1f;核心特性应用场景如何工作 如何使用1. 添加依赖2. 启用缓存3. 配置缓存4. 使用缓存注解 使用缓存的注意事项缓存的数据序列化缓存键的生成缓存内容的一致性缓存的并发问题缓存穿透缓存雪崩缓存的存储容量方法的可见性和…

uniapp组件库Card 卡片 的使用方法

目录 #平台差异说明 #基本使用 #配置卡片间距 #配置卡片左上角的缩略图 #配置卡片边框 #设置内边距 #API #Props #Slot #Event 卡片组件一般用于多个列表条目&#xff0c;且风格统一的场景。 #平台差异说明 AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程…

基于STM32的以太网通信协议选择与实现

在基于STM32的以太网通信中&#xff0c;主要涉及到选择合适的通信协议和实现对应的功能代码。常见的通信协议包括TCP/IP、UDP、HTTP等&#xff0c;选择合适的协议取决于具体应用需求。以下将介绍在STM32上进行以太网通信时&#xff0c;常用的通信协议选择以及对应功能代码的实现…

CSDN·COC城市开发者组织2023年度聚会上海站纪实

目录 前言活动宣传活动议程活动总结结束语 前言 2023年是CSDNCOC成立之年&#xff0c;经过一年的不断发展和壮大&#xff0c;COC上海城市开发者社区的队伍不断壮大&#xff0c;本着每个月都有线下活动的原则&#xff0c;先后举办大大小小的线下沙龙活动20余场。与此同时&…

洛谷p1157组合的输出

组合的输出 题目描述 排列与组合是常用的数学方法&#xff0c;其中组合就是从 n n n 个元素中抽出 r r r 个元素&#xff08;不分顺序且 r ≤ n r \le n r≤n&#xff09;&#xff0c;我们可以简单地将 n n n 个元素理解为自然数 1 , 2 , … , n 1,2,\dots,n 1,2,…,n&a…

NRZ Modulation

NRZ Modulation 正文简介NRZ 的优势 正文 简介 全称不归零 non-return to zero(NRZ) 调制。代表了使用两个信号等级的一种逻辑信号。一个等级为 1&#xff0c;一个等级为 0。负电压对应逻辑电路中的 0&#xff0c;正电压对应逻辑电路中的 1。对于 NRZ 传输&#xff0c;波特率…