前端异步请求之——从XML到axios的转变

前后端交互之——从XML到axios的转变一、xml方法发送请求：二、jQuery的ajax方法发送请求：三、axios发送请求：四、fetch方法请求（独立于axios.js与jquery）：参考文献：引言：其实很久之前，我就想了解一下 xml 语法，看了很多文章，发现有的大佬说，这个其实已经被json代替了，xml的优点确实很难说清楚，感觉现在封装的封装，替代的替代，都前端组件化时代了。还来和

凌空暗羽

628人浏览 · 2021-10-14 17:04:29

凌空暗羽 · 2021-10-14 17:04:29 发布

前后端交互之——从XML到axios的转变

引言：其实很久之前，我就想了解一下 xml 语法，看了很多文章，发现有的大佬说，这个其实已经被json代替了，xml的优点确实很难说清楚，感觉现在封装的封装，替代的替代，都前端组件化时代了。还来和这个几乎要退出代码舞台的工具死磕不划算。但是学了还是记录一下，方便之后再来翻阅，主要是有些吗，面试经常会涉及到ajax。

一、xml方法发送请求：

至于定义是什么先不管，说说我的理解吧，xml是一种比较原始的，用于向服务端发送请求获取返回数据局部刷新网页的一种可行性方法。因为，在最开始的后端，都是通过刷新整个页面来实现视图刷新的，优点浪费资源。如今的网页几乎都存在局部刷新机制，这与xml的诞生分不开的。xml其实就是一个http请求，基本用法如下：
首先利用thinkPHP框架简单配一个后端接口：
在这里插入图片描述
接下来，构建xml请求：

let xml=new XMLHttpRequest();
		xml.open('GET','localhost/index.php/test');
		xml.send();
		xml.onreadystatechange=()=>{
			if(xml.readyState==4){
				if(xml.status==200){
					console.log("原始的xml发送请求",xml.responseText);
				}
			}
		}

经典，遇到了跨域问题。简单说一下，跨域其实跨域指的是一种安全机制，域（即协议+ip+端口）。如果请求方与接收方的ip或者端口不一致，则会收到跨域限制，中断请求，对于跨域有两种鸡肋的处理方式：jsonp，我觉得其本质就是在传递函数名；浏览器关闭跨域检测（对浏览器加上特殊的参数）。说两种方法鸡肋，是因为前者只能处理get请求，后者就不算解决方法，顶多算是测试请求发送。
在这里插入图片描述
真正的处理方法还是关闭请求跨域（官方称为：设置跨域资源共享），你可能会说为什么要这个跨域限制呢？制造了机制又给关闭了。说明一点，跨域关闭是关闭我们希望客户端能够访问的接口，而有些跨域请求确实能够影响我们的服务器安全，不然怎么会有那么多网络安全问题呢。好，下面给出后端配置跨域中间件的方法：
（1）直接在thinkPHP的middleware.php的return数组中增加：

\think\middleware\AllowCrossDomain::class

（2）手动配置允许跨域的响应头：

Route::get('test',"Test/index")->middleware(
   function ($request, \Closure $next)
    {
        header('Access-Control-Allow-Origin:*'); 
        header('Access-Control-Allow-Origin:http://localhost/index.php/test'); 
        header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE');
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Allow-Headers: Content-Type,Content-Length,Accept-Encoding,X-Requested-with, Origin');
        if (strtoupper($request->method()) == "OPTIONS") {
            return response();
        }
        return $next($request);
    }
);

得到如下结果：
在这里插入图片描述

二、jQuery的ajax方法发送请求：

使用方法就很贴切现代用法了（开个玩笑），其本质是对xml的封装，兼容ie浏览器：

$.ajax({
		methods:'GET',
		url:'http://localhost/index.php/test',
		success:(res)=>{
			console.log("输出返回结果",res);
		},
		fail:(err)=>{
			console.log("请求失败:",err.errMsg);
		}
	})

返回结果如下：
在这里插入图片描述

三、axios发送请求：

请求代码如下：

axios({
		methods: 'GET',
			url: 'http://localhost/index.php/test/'
		}).then((res) => {
			console.log("输出axios请求返回数据：", res);
	})

返回结果如下：
在这里插入图片描述

四、fetch方法请求（独立于axios.js与jquery）：

请求方法：

fetch("http://localhost/index.php/test/").then(res => {
	console.log("输出返回结果：", res);
});

返回结果结果如下：
在这里插入图片描述
可以看到fetch的内容还是挺多的，emm…，我们想要的数据都找不到，原来是写法有问题：

fetch("http://localhost/index.php/test/")
	.then(response => response.json())
	//先用.json转一下得到promise对象，然后进一步处理promise对象
		.then(data => {
			console.log("输出想要的数据：", data)
		});

分析这四种方法的优缺点：
ajax和xml可以归为一类，axois是一类，然后fetch算一类。ajax整体上比较完善了，但是嵌套请求存在回调地狱，通常无法脱离jquery，也就意味着使用ajax要先引入jquery，不太划算。fetch和axois刚好能够解决这一点。fetch有可能会代替ajax，但是需要注意的是fetch不携带跨域的cookie信息，在兼容性方面还有待改进。axois算是比较完善的框架了，在目前流行的uniapp框架中就能看到axois的影子。