使用AJAX
需要JS提供的一个叫做XMLHttpRequest异步交互对象与服务器通信,使用这个对象的功能完成"交"和"拿"的过程
-
第1步:创建一个能够发起HTTP请求消息的对象
let xhr = new XMLHttpRequest()
创建的xhr变量用来保存创建好的对象,之后想使用该对象的任何属性与方法,都可以通过xhr变量来使用
注意:括号必须加!new关键字必须加! -
第2步: xhr对象打开到服务器的连接
xhr.open(method,url)–推荐使用!
xhr.open(method,url,async)
参数1:method–要使用的HTTP方法,如GET/POST 与接口的方法一样且大写
参数2:url–发送请求到哪个url(处理业务逻辑的接口地址)
参数3:async–[可选,布尔类型],表示是否执行异步操作,默认true异步
可选方法:设置一个请求头
xhr.setRequestHeader(name,value) name被修改的请求头名称 value修改后的值
xhr.setRequestHeader(‘Content-type’,‘application/x-www-form-urlencoded;charset=utf-8’) -
第3步:提前声明好,如果得到了服务器端的响应消息,该如何处理
xhr.onload = function(){
let result = xhr.responseText //获取响应消息中的主体文本内容,存到 result
} -
第4步:向服务器端发送请求消息
xhr.send() //发送了一个没有请求主体的请求消息,比如GET请求没有请求主体
xhr.send(null) //发送了一个没有请求主体的请求消息
xhr.send(‘key1=value1&key2=value2’) //发送了一个有请求主体的请求消息
比如:xhr.send(‘uname=tom&pwd=123456’)
测试接口用到的路径:(协议+IP+端口号+路由前缀+接口名+参数【可选】)
http://127.0.0.1:8080/v2/pro/list
测试页面用到的路径:(协议+IP+端口号+HTML页面名【文件名+后缀名】)
http://127.0.0.1:8080/01_list.html
使用Node.js+Express搭建WEB服务器
步骤:
- 准备数据 用到库:xz 用到表xz_user用户表 xz_laptop商品表
注意:需要在xampp中导入xz.sql数据,并且要启动数据库(看到3306端口) - 创建xz_v2文件夹–作为WEB服务器根目录
- 要放置必须的第三方模块文件夹node_modules
- 创建server.js–作为WEB服务器的启动文件
//1.引入必须的express模块文件
const express = require('express')
//2.创建WEB服务器
const app = express()
//3.定义指定的端口,并监听此端口
const port = 8080
app.listen(port,()=>{
console.log('已成功监听端口:'+port)
})
//6.添加中间件
app.use(express.urlencoded({
extended:false
}))
//7.静态托管
app.use(express.static('./public'))
//4.引入自定义的用户路由器模块
const userRouter = require('./router/user.js')
//5.使用路由app.use(路径,路由器名字)
app.use('/v2/user',userRouter)
- 创建数据库连接池配置文件pool.js
//引入必须的第三方模块文件
const mysql = require('mysql')
//创建数据库连接池
const pool = mysql.createPool({
//host:'127.0.0.1',
//port:'3306',
user:'root', //必须写
//password:'',
database:'xz', //必须写
//connectionLimit:15
})
//暴露创建好的数据库连接池
module.exports = pool
- 创建router文件夹–所有的路由器文件都放在此文件夹下
注意: 新创建的路由器模块暴露后需要在server.js中引入并配置路由前缀
接口的测试地址: 协议+IP地址+端口号+路由前缀+接口名+参数【可选】
比如:http://127.0.0.1:8080/v2/user/login?uname=yaya&upwd=123 - 创建public文件夹–所有的HTML页面都放在此文件夹下
注意:public目录需要在server.js中静态托管
页面的测试地址:协议+IP地址+端口号+页面完整的名字【带后缀】
比如:http://127.0.0.1:8080/login.html
AJAX响应消息类型
在AJAX请求过程中,服务器负责返回响应消息,可能会有如下几种类型:
- 响应消息是简单的文本字符串
比如:验证用户名是否存在的接口,可返回exists或non-exists
HTTP/1.1 200 OK
Content-type:text/plain;charset=UTF-8
空行
non-exists
我们的处理方式:
if(xhr.responseText == 'exists'){
msg.innerHTML='用户名已被占用'
}else{
msg.innerHTML='用户名可以使用'
}
- 响应消息是一段HTML片段
HTTP/1.1 200 OK
Content-type:text/html;charset=UTF-8
空行
<td>1</td><td>Apple MacBook</td><td>¥3500</td>
我们的处理方式:
tr.innerHTML = xhr.responseText
这种写法比较少用,因为响应消息已经把数据的格式给定死了,比如上面的响应结果就必须放在tr里,因为只有tr里才能放td
服务器端应该只返回一些数据,不应该定死格式 - 响应消息是一段XML数据(eXtensible Markup Language可扩展的标记语言)
一种描述数据的语言,可以描述批量数据
XML语法就是一种标记语言,但是标签都是随意起的,与HTML不同
HTTP/1.1 200 OK
Content-type:application/xml;charset=UTF-8
空行
<list> <product lid="101"> <title>联想小新</title> <price>¥4500</price> </product> <product lid="102"> <title>戴尔游匣</title> <price>¥3800</price> </product> </list>
我们的处理方式:
客户端网页收到上述的XML响应消息,必须使用XML解释器程序,把上述数据转为JS对象
[{lid:101,title:‘联想小新’,price:‘¥4500’},{ lid:102,title:'戴尔游匣 ',price:‘¥3800’}]
这样写虽然能够接收到批量数据,但是非常麻烦,所以出现了新的响应消息格式:JSON - 响应数据是一段JSON数据
一种用于描述数据的语言,可以描述批量数据,语法比XML要严谨、简洁
HTTP/1.1 200 OK
Content-type:application/json;charset=UTF-8
空行
[ { "lid":101, "title":"联想小新", "price":"¥4500" }, { "lid":102, "title":"戴尔游匣", "price":"¥3800" } ]
我们的处理方式:
JSON格式的数据在客户端非常容易处理!
学习JSON
-
JSON的定义
JSON(JavaScript Object Notation JS对象表示法)是一种语言,在语法上借鉴了JS对象语法的一部分,用于描述数据,把数据转为字符串格式,在不同的系统间交换
目前,所有的编程语言都可以把自己的数据转换为JSON字符串,也可以把JSON格式的字符串转换为自己的内部数据。 -
JSON的语法规则
重点记忆:
1.一段JSON格式的数据本质是一个字符串
2.一段JSON字符串中只能有一个根——这个根要么是对象{} 要么是数组[]
3.一段JSON字符串中的对象,可以包含多对键值对,格式:“键名”:键值
4.JSON的键值可以是如下类型:字符串、数字、true/false、对象、数组、null
5.JSON找那个的键名与字符串键值必须用引号包裹,并且是双引号
6.JSON中两个数据间使用逗号分隔,但注意,最后一个数据后面不能加逗号
7.JSON片段中没有"注释"一说 -
JSON的序列化与反序列化
- Node.js服务器从数据库中查到了结果result,这个结果是JS对象
- 但想要通过HTTP协议发送给客户端响应消息,HTTP协议只能传输字符串,不能传输对象
- 所以需要把JS对象转换为JSON格式的数据(JSON序列化),方便传输
- HTTP响应消息主体中的数据就是JSON格式的字符串数据
- 客户端浏览器拿到JSON字符串后,再转回JS对象使用(JSON的反序列化)
-
序列化与反序列化代码:
序列化: JS对象->JSON字符串
反序列化:JSON字符串->JS对象
let obj = {…}
let jsonString = JSON.stringify(obj) //JSON的序列化方法,把对象转为字符串
let objData = JSON.parse(jsonString) // JSON的反序列化方法,把字符串恢复成对象
提示:咱们的项目中Express+Node.js服务器提供的res.send()方法自带"JSON序列化"功能
所以,JSON.stringify()就不需要我们自己来写了
但是!!!客户端XHR对象没有自动的"JSON反序列化"功能,所以JSON.parse()需要我们自己写
是否要进行反序列化要根据业务决定,如果后端接口仅仅返回一个exists单词,可以直接使用
只有我们需要使用JS对象的时候,才需要把JSON恢复成JS对象,也就是反序列化
拓展
项目结构
我们现在的静态网页与动态接口都在同一个服务器下
不管是访问页面,还是访问接口都要使用8080端口
像这样的结构,叫做:
前后端一体的项目架构
使用这种架构,小项目是没有问题的,但是如果访问量比较大,所有资源都由同一台服务器提供,风险非常大,一旦服务宕机,所有服务都提供不了了
稍稍拓展一下,解决这个问题的办法就是进行架构优化:
前后端分离的项目架构
客户端浏览器想要一个网页,可以访问静态WEB服务器,这个服务器上托管着HTML/CSS/JS
甚至如果音视频比较多,还会把静态WEB服务器分成好几个,有的提供图片,有的提供视频…
如果用户想要访问动态WEB资源,可以访问专门的动态WEB服务器