Web前端105天-day37-AJAX

ajax01

目录

前言

一、HTTP协议

1.1HTTP请求过程

1.2请求的消息(头信息、报文)

1.3响应消息

1.4练习

二、post传参,内容的编码方式

四、Ajax使用步骤

五、解决express跨域问题

总结


前言

Ajax01学习开始


一、HTTP协议

  • HTTP协议:超文本传输协议

1.1HTTP请求过程

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

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

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

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

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

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

面试题:当在浏览器中输入一个网址到显示一个网页中间经历哪些过程

 

1.2请求的消息(头信息、报文)

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

请求头部

         请求头部名:请求头部值

请求体:只有post/put传参有请求体,get/delete没有请求体

  • 请求的内容类型
    • Content-Type: application/x-www-form-urlencoded

  • 设置传递的参数编码格式
    • a=1&b=2&c=3

1.3响应消息

状态行

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

响应的头部

响应体

 

1.4练习

  • 练习1:编写文件01_api.js,使用express创建WEB服务器,设置端口,添加路由(get  /index),响应以下格式,写完后查看HTTP协议
// 引入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:'登录失败'})
	}
})

  • 练习2:托管静态资源到public目录,目录下包含登录的网页login.html,点击提交向服务器发请求(post  /mylogin),获取传递的参数,如果用户名是admin并且密码是123456,响应{code: 200,msg:'登录成功'}  否则响应{code:400,msg:'登录失败'}     查看HTTP协议,请求体,请求消息..

 

<!-- login.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户登录</title>
	</head>
	<body>
		<form action="/mylogin" method="post" enctype="application/x-www-form-urlencoded">
			用户<input type="text" name="user"><br>
			密码<input type="text" name="pwd"><br>
			<button>登录</button>
		</form>
	</body>
</html>

// 引入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:'登录失败'})
	}
})

二、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,响应'用户名已经被占用',否则响应用户名可用

// 引入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('用户名可用')
	}
})

四、Ajax使用步骤

1.创建HTTP请求对象

var xhr = new  XMLHttpRequest()

2.打开服务器的连接,请求接口

xhr.open( 参数1, 参数2, 参数3 )

参数1:请求方式,对应接口的请求方式,通常为大写,例如:GET/POST...

参数2:接口地址,如果GET传参,直接拼接

参数3:是否为异步,默认是异步    true->异步    false->同步

3.发送请求

xhr.send()     参数为请求体

4.添加事件,监听服务器端响应

xhr.onload = function(){

  xhr.responseText    接口响应体的内容

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ajax</title>
	</head>
	<body>
		用户<input type="text" id="user">
		<span id="txt"></span>
		<script>
			// 给文本框绑定失去焦点事件
			user.onblur = function(){
				// txt.innerHTML='XXXX'
				// 获取用户输入的值,请求接口检测用户名是否可用
				var str = user.value
				console.log(str)
				// 发送Ajax请求
				// 1.创建HTTP请求对象
				var xhr = new XMLHttpRequest()
				// 2.打开服务器的连接(请求接口)
				// 参数1:接口的请求方式
				// 参数2:接口地址,GET请求还需要拼接参数
				// 参数3:是否为异步,默认是异步
				xhr.open('GET','http://127.0.0.1:3000/checkuser?user='+str,true)
				// 3.发送请求
				xhr.send()
				// 4.添加事件,监听响应
				xhr.onload = function(){
					// 获取响应体
					console.log( xhr.responseText )
					// 渲染响应的结果
					txt.innerHTML = xhr.responseText
				}
			}
		</script>
	</body>
</html>

五、解决express跨域问题

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

1.引入cors中间件模块(需要安装 npm i cors)

const  cors=require('cors')

2.使用中间件 (位置上,必须写在路由的前边)

app.use( cors() )


总结

Ajax01学习结束

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值