AJAX的使用,搭建web服务器，AJAX响应消息类型，JSON

最新推荐文章于 2024-07-26 03:29:01 发布

luanma3p

最新推荐文章于 2024-07-26 03:29:01 发布

阅读量472

点赞数 14

文章标签：服务器 ajax JSON

本文链接：https://blog.csdn.net/m0_46170663/article/details/126865834

版权

使用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的序列化与反序列化
1. Node.js服务器从数据库中查到了结果result,这个结果是JS对象
2. 但想要通过HTTP协议发送给客户端响应消息，HTTP协议只能传输字符串，不能传输对象
3. 所以需要把JS对象转换为JSON格式的数据(JSON序列化)，方便传输
4. HTTP响应消息主体中的数据就是JSON格式的字符串数据
5. 客户端浏览器拿到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服务器

luanma3p

关注

14
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
2
评论
AJAX的使用,搭建web服务器，AJAX响应消息类型，JSON

JSON(JavaScript Object Notation JS对象表示法)是一种语言，在语法上借鉴了JS对象语法的一部分，用于描述数据，把数据转为字符串格式，在不同的系统间交换。使用这种架构，小项目是没有问题的，但是如果访问量比较大，所有资源都由同一台服务器提供，风险非常大，一旦服务宕机，所有服务都提供不了了。比如：http://127.0.0.1:8080/v2/user/login?目前，所有的编程语言都可以把自己的数据转换为JSON字符串，也可以把JSON格式的字符串转换为自己的内部数据。
复制链接

扫一扫