web学习笔记16-AJAX

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仓库，点击可以查看