目录
3.添加事件,监听是否有服务器端响应,一旦响应会自动会调用函数
一.HTTP协议
超文本传输协议
1.HTTP请求过程
(1)在浏览器中输入网址:服务器(域名/IP地址),端口 (2)浏览器与服务器建立连接:三次握手 (3)连接建立后,浏览器开发向服务器发送请求消息 (4)服务器端接收到消息,处理请求,将消息响应给浏览器 (5)浏览器与服务器断开连接:四次挥手 (6)浏览器解析响应的消息,将数据渲染成网页呈现给用户 |
(面试题:当在浏览器中输入一个网址到显示一个网页中间的过程)
2.请求的消息
(1)消息的格式
请求行:请求的方法、请求的地址 、协议版本号 |
请求头部: 请求头部名:请求头部值 |
请求主体:有的有请求主体(post、put),有的没有请求主体(get、delete) |
(2)请求行解析
请求方法: get post delete put
请求的地址:要请求的服务器端的资源
协议版本号:HTTP/1.1
(3)请求头部解析
host: 要请求的服务器
Content-Type: 请求的内容类型,post请求必须设置为
application/x-www-form-urlencoded
User-Agent:告诉服务器,当前浏览器版本和系统的一些参数
(4)请求主体解析
GET请求是没有请求主体,因为把请求的参数放在了URL中
POST请求才会将参数放入到请求主体,格式为
参数名=参数值&参数名=参数值
3.响应消息
(1)状态行
协议版本 状态码 原因短句
(2)响应的头部
Location 要跳转的地址
Content-Type 设置响应的内容类型
(3)响应主体
服务器端响应给客户端 的结果;可能是html,js,css,json....
练习:使用express创建WEB服务器,设置端口,添加路由(get /index),响应以下格式 —— 01_api.js 写完后,查看HTTP协议相关信息
// 引入express模块
const express=require('express')
// 创建WEB服务器
const app=express()
// 设置端口
app.listen(3000,()=>{
console.log('服务器启动成功')
})
// 添加路由(get /index)
app.get('/index',(req,res)=>{
res.send({
code:200,
msg:'新闻分类',
data:[
{cid:30,cname:'业界资讯'},
{cid:20,cname:'产品资讯'},
{cid:10,cname:'公司动态'}
]
})
})
练习:托管静态资源到public目录,包含以下文件login.html,点击提交(post /mylogin),获取传递的参数,响应‘登录成功’
<body>
<form action="/mylogin" method="post" enctype="application/x-www-form-urlencoded">
用户:<input type="text" name="user"><br>
密码:<input type="password" name="pwd" ><br>
<button type="submit">提交</button>
</form>
</body>
// 引入express模块
const express=require('express')
// 创建WEB服务器
const app=express()
app.listen(3000,()=>{
console.log('服务器启动成功')
})
// 托管静态资源到public目录
app.use(express.static('public'))
//将post传参转对象
// 将请求内容类型为application/x-www-form-urlencoded转为对象
app.use(express.urlencoded({
extended:true
}))
// 添加路由(post /mylogin)
app.post('/mylogin',(req,res)=>{
console.log(req.body)
res.send('登录成功')
})
二.post请求,内容的编码类型
在传递参数的过程中,对数据进行的编码
application/x-www-form-urlencoded 允许任意的字符,编码格式
user=admin&pwd=123456
multipart/form-data 上传文件设置的编码格式
text/plain 纯文本格式
三.数据渲染
1.获取要渲染的HTML标签位置,给标签设置id值
2.修改标签的值,将指定的内容渲染 id值.innerHTML= 新的值
练习:创建一个数组,包含一组姓名,姓名这组姓名渲染到ul列表
遍历数组,获取每个姓名
<ul>
<li>新哥</li>
<li>铭哥</li>
<li>楠姐</li>
</ul>
<body>
<ul id="cname"></ul>
<script>
var arr=['韩信','李白','孙悟空','澜','镜','暃','宫本武藏','露娜','橘右京','娜可露露','裴擒虎','赵云','百里玄策']
for(var i=0,n='';i<arr.length;i++){
console.log(arr[i])
n+=`<li>${arr[i]}</li>`
}
cname.innerHTML=n
</script>
</body>
四.AJAX
异步的JS和XML
使用AJAX可以实现局部渲染,增加用户体验
XML技术已经被JSON取代,成为全后端数据交换的一种格式。
JSON: 字符串对象,通常只放数组或者对象,对象的属性名必须用双引号,值是字符串也必须用双引号。 —— 也称为对象的序列化
1.创建一个能够发起HTTP请求的对象
var xhr=new XMLHttpRequest() |
2.通过xhr打开服务器连接(要请求的接口)
xhr.open(参数1, 参数2, 参数3) 参数1:对应接口的请求的方法,例如:GET/POST 必须用大写 参数2:对应接口的地址 参数3:是否为异步请求,true->是 false->否 默认为true |
3.添加事件,监听是否有服务器端响应,一旦响应会自动会调用函数
xhr.onload = function(){ xhr.reponseText 接口响应的文本内容 } |
4.向服务器端发送
xhr.send() 发送的请求消息,没有请求主体 |
五.express跨域的问题
两个服务器之间端口不同会产生跨域,不允许别的服务器请求
1.引入cors模块,属于第三方中间件 const cors=require('cors') 2.使用cor中间件 app.use( cors() ) |
课后练习:
<body>
<button id="btn">获取数据</button>
<p id="cont"></p>
<script>
// 给按钮绑定点击事件
btn.onclick=function(){
// alert('点击了')
// 1.创建一个http的请求对象
var xhr=new XMLHttpRequest()
// 2.打开服务器的连接,写请求的接口
// 参数1:接口的请求方法,必须大写
// 参数2:接口的地址
// 参数3(可选):是否为异步请求,true->是 false->不是,默认是异步true
xhr.open('GET','http://127.0.0.1:3000/num',true)
// 3.添加事件,一旦服务器端有响应,会自动触发函数
xhr.onload=function(){
// 获取响应
console.log(xhr.responseText)
// 把响应的的内容响应到cont之间
cont.innerHTML=xhr.responseText
}
// 4.向服务器端发送请求
xhr.send()
}
</script>
</body>
// 引入express模块
const express=require('express')
// 引入cors模块,解决跨域
const cors=require('cors')
// 创建WEB服务器
const app=express()
// 使用模块解决跨域
app.use(cors())
// 设置端口
app.listen(3000,()=>{
console.log('服务器启动成功')
})
// 添加路由(get /num)
// 接口地址:http://127.0.0.1:3000/num
// 请求方法:get
app.get('/num',(req,res)=>{
// 响应一个随机数
var n=Math.random()+''
if(n>0.5){
res.send(`数字:${n},在0.5以上`)
}else{
res.send(`数字:${n},在0.5以下`)
}
})