Ajax异步请求，获取本地json数据

时间：2025-03-23 17:14:43

Ajax的核心是XMLHttpRequest对象

1、原生

/*
let xhr=new XMLHttpRequest();
(1)XMLHttpRequest 对象方法
方法 描述
newXMLHttpRequest() 创建新的XMLHttpRequest对象
abort() 取消当前请求
getAllResponseHeaders() 返回头部信息
getResponseHeader() 返回特定的头部信息
open(method,url,async,user,psw) 规定请求 method:请求类型;GET或POSTurl:文件位置;async:true(异步)或false(同步);user:可选的用户名称;psw:可选的密码
send() 将请求发送到服务器,用于GET请求
send(string) 将请求发送到服务器,用于POST请求
setRequestHeader() 向要发送的报头添加标签/值对
(2)XMLHttpRequest对象属性
属性 描述
onreadystatechange 定义当readyState属性发生变化时被调用的函数
readyState 保存XMLHttpRequest的状态。0:请求未初始化;1:服务器连接已建立;2:请求已收到;3:正在处理请求;4:请求已完成且响应已就绪
responseText 以字符串返回响应数据
responseXML 以XML数据返回响应数据
status 返回请求的状态号 200:"OK";403:"Forbidden";404:"NotFound"
statusText 返回状态文本(比如"OK"或"NotFound")
*/

//创建xhr对象
let xhr = new XMLHttpRequest();
// 准备发送，语法:('请求方式get/post','url地址',boolean); 默认boolean:true:异步请求
xhr = open('get', '路径.php', 'true')
//发送 send（）get请求send()
();
// 监听函数，函数的功能：监听当前Ajax请求进行到哪一步，只有响应数据才能渲染数据
 = function () {
    if ( === 4) {//响应数据
        if ( === 200) {//http协议状态 200成功 404资源不存在
            ();//返回的数据字符串格式
        }
    }
}

2、jQuery的Ajax请求

$.ajax({
	type:"get/post",//请求的方式
	url:"xxxx",//请求接口(请求的地址)
	data:{//发送给后台(接口)的数据,没有参数的时候可以省略
					后台接受的变量:前端传递值,....
	},
	dataType:"json/xml/text/html/js",//返回的数据类型格式  ()
	async:"true",//是否是异步的。不加默认是异步
	success:function(res){
        //请求成功的函数 res形参--后台返回的数据
	},
	error:function(error){
        //请求失败  error形参失败类型 
	},
	beforeSend:function(){
        //请求成功之前执行的函数
	},
	complete:function(){
        //请求完毕 不管成功还是失败都执行
	},
})

3、axios请求

1.安装
npm install axios
2.引入axios
	1.可以直接使用组件内使用
	import axios from 'axios'
	2.挂载全局使用
	核心入口文件
	import axios from 'axios'
	//所有组件都可以使用
	.$axios = axios;
	所有组件实例都可以访问
	this.$()/post()
	3.二次封装axios
	//二次封装的
	import axios from './utils/request'
	.$axios = axios;//二次封装的
3.使用axios
    axios({
	method: 'post',
	maxBodyLength: Infinity,
	url: XXXXXX,
	headers: {},
	data: {
	    data1,
	    data2
	},
    }).then(res=>{
        // 成功
    }).catch(err=>{
        // 失败
    })

请求本地json文件数据地址需要改为本地路径

// 注意路径在框架中放到public文件目录下
("./").then(res =>{
    ();
})

相关文章