AJAX_day01

hello_funnychou

已于 2022-09-19 19:52:06 修改

阅读量63

点赞数 1

分类专栏： AJAX 文章标签： servlet 服务器前端 ajax javascript

于 2022-09-19 19:44:10 首次发布

本文链接：https://blog.csdn.net/Funny_Chou/article/details/126940106

版权

AJAX 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

2.通过xhr打开服务器连接（要请求的接口）

3.添加事件，监听是否有服务器端响应，一旦响应会自动会调用函数

4.向服务器端发送

五.express跨域的问题

一.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>

</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以下`)
	}
})