AJAX
Asynchronous Javascript And XML (异步的Javascript 和 XML)
特点:不用整个刷新网页,而是局部刷新;不是通过页面条件发送请求,通过后台向服务器发送请求,用户体验好
跨域
浏览器的同源策略,规定要请求的URL的协议、域名/IP、端口不同都会产生跨域现象,跨域以后不允许获取外部响应的资源
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bnDkDctD-1681903669313)(file://C:\Users\zz\AppData\Roaming\marktext\images\2023-04-19-11-44-26-image.png?msec=1681883547498)]
—解决办法—
使用第三方中间件,允许跨域-cors模块js
在app.js中添加如下代码便可以解决
//引入模块
const cors = require('cors')
//使用中间件
app.use(cors())
AJAX-请求步骤
1,创建HTTP请求
2,打开服务器连接,设置要请求的接口
3,发送请求
4,绑定事件,监听端口响应
get请求
//发送AJAX 请求
//1,创建HTTP请求
var xhr = new XMLHttpRequest()
//打开服务器连接,设置要请求的接口
// xhr.open(请求方式,接口地址,是否异步请求,)
xhr.open('GET',`http://127.0.0.1:3000/mylogin?user=${a}&pwd=${b}`,true)
//发送请求
xhr.send()
//绑定事件,监听端口响应
xhr.onload = function(){
//获取响应文本
console.log(xhr.responseText)
alert(xhr.responseText)
}
post传参
将参数放入到请求体,
Content-Type | 请求体参数格式 | 用途 |
---|---|---|
application/x-www-from-urlencoded | a=1&b=2 | 用于传递多个值 |
application/json | {“a”:1,“b”:2} | 传递多个值 |
application/json | 文件上传 | |
text/xml | 传递xml格式参数 |
//post传参需要在请求头中指定参数格式
xhr.setRequestHeader('Content-Type','application/x-www-form-unlencoded')
//将指定的参数放入请求体
xhr.send('a=1&b=2')
//post传参需要在请求头中指定参数格式
xhr.setRequestHeader('Content-Type','application/json')
//将指定的参数放入请求体
xhr.send('{"a":1,"b":2}')
express中获取post传参格式为JSON的参数
//使用内置中间件将格式为JSON的参数转为JSON
app.use.(express.json()
//获取
服务器端返回数据
服务器端返回数据是json格式,前端需要解析这种数据并进行页面渲染
JSON:js对象表示法,将数据以js对象方式来表示,是一种数据交换格式
js中属性名必须是双引号,值可以是字符串(必须加双引号)、数字、布尔型、数组、对象、null
demo
{
"a":1,
"b":"hello"
"c":true
}
JSON对象,提供一组API,可以让js和JSON之间相互转换
JSON.parse():将json数据转为js对象(反序列化)
JSON.stringify():将js对象转为json数据(序列化)
回调函数封装Ajax请求
日常的开发工作中,许多地方都要向后端获取数据,就要反复的写Ajax请求,重复造轮子的工作是毫无意义的,因此将Ajax的请求封装成函数,向其中传入参数就能发送请求所需请求是很有必要的。
封装GET
封装get需要注意的是传入的参数是要拼接到url当中的,并且有多个参数传入时,要先将参数进行整理,组装成’a=1&b=2’这样的格式才能进行拼接。
function get(type,url,obj,cb){
var arr = []
for(var key in obj){
arr.push(key+'='+obj[key])
}
var str = arr.join('&')
var xhr = new XMLHttpRequest()
xhr.open(type,url+str)
xhr.send()
xhr.onload = function(){
cb(JSON.parse(xhr.responseText))
}
}
封装POST
post请求与get请求不一样,它参数是要放到请求体当中,同样要先对参数进行处理
function post(type,url,obj,cb){
//将接口所需参数转换成查询字符串格式
var arr = []
for(var key in obj){
arr.push(`${key}=${obj[key]}`)
}
var str = arr.join('&')
console.log(str)
//发送ajax请求
var xhr = new XMLHttpRequest()
xhr.open(type,url)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(str)
xhr.onload = function (){
//通过回调函数将响应文本传递到外部
cb(JSON.parse(xhr.responseText))
}
}
本人练习代码已经全部上传到gitee仓库,点击可以查看