AJAX. day01

小居客

已于 2022-09-20 19:33:17 修改

阅读量105

点赞数

分类专栏： 7AJAX 文章标签： ajax

于 2022-09-19 20:20:51 首次发布

本文链接：https://blog.csdn.net/weixin_45866270/article/details/126940563

版权

7AJAX 专栏收录该内容

2 篇文章 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协议相关信息

// 1引入express模块
const express=require('express')
//2创建web服务器
const app=express()
//3设置端口
app.listen(3000,()=>{
	console.log('服务器启动成功!')
})
//4添加路由
app.get('/index',(req,res)=>{
	res.send({
		code:'200',
		msg:'新闻分类',
		data:[
			{cid:30,title:'业界资讯'},
			{cid:20,title:'产品资讯'},
			{cid:10,title:'公司动态'}
		]
	})	
})

练习：托管静态资源到public目录，包含以下文件login.html，点击提交(post /mylogin)，获取传递的参数，响应‘登录成功’

<!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="name">
			密码<input type="password" name="psw">
			<button type="submit">提交</button>
		</form>
	</body>
</html>

// 托管静态资源到public目录
// 客户端要请求静态资源，会自动到public目录下寻找
app.use(express.static('public'))
// 将post传参转为对象
// 将请求内容类型application/x-www-form-urlencoded转为对象
app.use(express.urlencoded({
	extended:true
}))
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>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据渲染</title>
	</head>
	<body>
		<ul id="cont">
			<li>
			    <a href="#">独家对话马化腾：微信是社交应用与电信业务无关</a>
			    <span> 2022-9-19</span>
			</li>
		</ul>
		<script>
			var news=[
			    {title:'独家对话马化腾',ctime:'2022-9-19'},
			    {title:'独家对话新哥',ctime:'2022-10-1'},
			    {title:'微信已经从精神上把运营商干掉了',ctime:'2022-9-19'}
			   ]
			for(var i=0,str='';i<news.length;i++){
				str+=`<li><a>${news[i].title}</a>    <span>${news[i].ctime}</span></li>`
				console.log(str)
			}
			//整体渲染
			cont.innerHTML=str
		</script>
	</body>
</html>

四.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() 发送的请求消息，没有请求主体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AJAX</title>
	</head>
	<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/index',true)
				// 3.添加事件，一旦服务器端有响应，会自动触发函数
				xhr.onload=function(){
					// 获取响应
					console.log(xhr.responseText)
					// 把响应的内容渲染到cont之间
					cont.innerHTML=xhr.responseText
				}
				// 4.向服务器端发送请求
				xhr.send()
			}
		</script>
	</body>
</html>

五.express跨域的问题

两个服务器之间端口不同会产生跨域，不允许别的服务器请求

跨域错误

1.引入cors模块，属于第三方中间件

const cors=require('cors')

2.使用cor中间件

app.use( cors() )

课后练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="btn">点击</button>
		<p id="cont"></p>
		<script>
			btn.onclick=function(){
				// alert('点击了')
				//1.创建http请求对象
				var xhr=new XMLHttpRequest()
				//2.打开服务器连接
				xhr.open('GET','http://127.0.0.1:3000/num')
				//3.添加事件
				xhr.onload=function(){
				var	a=xhr.responseText
					cont.innerHTML=a		
				}
				//4向服务器端发送
				xhr.send()
			}	
		</script>
	</body>
</html>

app.get('/num',(req,res)=>{
	//响应一个随机数
	var number=Math.random()
	if(number>=0.5){
		res.send('数字:'+number+'在0.5以上')
	}
	res.send('数字:'+number+'在0.5以下')	
})