AJAX 高级使用 HTTP协议 express跨域 JSON

目录

HTTP协议 超文本传输协议

HTTP请求过程

请求的消息（头信息，报文）

请求头部

请求的内容类型

响应体

post传参，内容的编码方式

AJAX

解决express跨域问题

跨域错误提示

Ajax发送POST请求

JSON

---

 

HTTP协议 超文本传输协议

HTTP请求过程

(1)在浏览器中输入网址(URL)：服务器(IP地址/域名)、端口

(2)浏览器端和服务器端建立连接：三次握手

(3)建立连接后，浏览器端向服务器端发送请求消息

(4)服务器端接收到请求以后，处理请求，将消息响应给浏览器

(5)浏览器和服务器断开连接：四次挥手

(6)浏览器解析响应的消息，将数据渲染成网页呈现给用户

请求的消息（头信息，报文）

请求行：请求的方式、请求的地址、协议版本号

请求头部

 请求头部名：请求头部值

 

请求体：只有post/put传参有请求体，get/delete没有请求体 

请求的内容类型

   Content-Type: application/x-www-form-urlencoded

   设置传递的参数编码格式

    a=1&b=2&c=3

响应消息

协议版本号   状态码   原因短句

响应的头部

响应体

post传参，内容的编码方式

application/x-www-form-urlencoded   默认的编码形式，  a=1&b=2；

multipart/form-data    用于文件上传；

text/plain   纯文本形式；

AJAX

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）XML技术已经被JSON完全替代，JSON是当前前后端数据交换的一种格式。使用AJAX可以实现局部刷新，增加用户体验。

编写文件04_api.js，使用express创建WEB服务器，设置端口；编写检测用户名是否存在的接口(get  /checkuser)，get方式传递用户名，如果用户名为xin123，响应'用户名已经被占用'，否则响应用户名可用，http://127.0.0.1:3000/checkuser?user=xin123

 04_api.js

// 引入express模块
const express = require('express')
// 引入cors中间件模块
const cors = require('cors')
// 创建WEB服务器
const app = express()
// 设置端口
app.listen(3000)
// 允许任何服务器的请求
app.use( cors() )


// 添加路由
// 检测用户是否存在(get /checkuser)
// 接口地址：http://127.0.0.1:3000/checkuser
// 请求方式：get
app.get('/checkuser',(req,res)=>{
	// 获取get传递的参数
	var obj = req.query
	console.log(obj)
	// 判断
	if(obj.user==='xin123'){
		res.send('用户名已经被占用')
	}else{
		res.send('用户名可用')
	}
})

解决express跨域问题

两个服务器之间端口不同、域名不同、协议不同有一项不同都会产生跨域问题

01_api.js

// 引入express模块
const express = require('express')
// 创建WEB服务器
const app = express()
// 设置端口
app.listen(3000)
// 托管静态资源到public目录
app.use(express.static('public'))

// 添加路由(get  /index)
app.get('/index',(req,res)=>{
	// 假设已经从后后端查询到了一组数据
	var arr = [
		{cid:10,cname:'业界资讯'},
		{cid:20,cname:'产品资讯'},
		{cid:30,cname:'公司动态'}
	]
	// 响应给客户端
	res.send({code: 200, msg: '新闻分类---', data: arr})
})
// 添加中间件，将post传递的参数转为对象
// 将编码格式为 application/x-www-form-urlencoded
app.use( express.urlencoded({
	extended: true
}) )
// 添加路由(post /mylogin)，监听按钮提交的请求
app.post('/mylogin',(req,res)=>{
	// 获取post传递的参数
	var obj = req.body
	console.log(obj)
	// 判断
	if(obj.user==='admin' && obj.pwd==='123456'){
		res.send({code: 200,msg:'登录成功'})
	}else{
		res.send({code: 400,msg:'登录失败'})
	}
})

跨域错误提示

 

Ajax发送POST请求

相比GET请求，POST请求需要在请求头中设置编码的类型，POST传参的方式是放入到请求体中

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')     设置传参类型 a=1&b=2
xhr.send('a=1&b=2')    参数通过请求体传递

JSON

叫做JS对象表示法，使用JS对象形式来描述一组数据，是前后端数据交换的一种形式，属性名必须使用双引号，属性值是字符串的话必须用双引号。

JSON.parse()   将JSON转为JS

JSON.stringify()   将JS转为JSON