欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ajax、axios、fetch的异同点

程序员文章站 2022-06-17 23:46:30
今天就来说说我对这些网络请求方式的一些简单认识。原生ajax:它是一种创建交互式网页应用的网页开发技术。通过异步模式,提升用户体验,优化浏览器和服务器直接的传输,减少不必要的数据往返,减少带宽占用。ajax引擎在客户端运行,承担部分服务器承担的工作。优点:局部更新;原生支持缺点:可能破坏浏览器后退功能;嵌套回调//创建ajax对象 (兼容性写法)if(window.XMLHttpRequest) {var xhr = new XMLHttpRequest(); //现代浏览器} el...

今天就来说说我对这些网络请求方式的一些简单认识。

原生ajax:

它是一种创建交互式网页应用的网页开发技术。通过异步模式,提升用户体验,优化浏览器和服务器直接的传输,减少不必要的数据往返,减少带宽占用。ajax引擎在客户端运行,承担部分服务器承担的工作。
优点:局部更新;原生支持
缺点:可能破坏浏览器后退功能;嵌套回调

//创建ajax对象 (兼容性写法)
	if(window.XMLHttpRequest) {
		var xhr = new XMLHttpRequest(); //现代浏览器
	} else {
		var xhr = new ActiveXObject("Microsoft.XMLHTTP");  //IE5 、IE6
	}

//做请求前的准备工作,明确后台的接口地址和请求方式
	GET的准备工作
	不附加任何数据:
	xhr.open("GET", "url地址", true);
	附加数据:
	xhr.open("GET", "url地址?name=aaa&password=111", true);
	POST的准备工作
	不附加任何数据:
	xhr.open("GET", "url地址", true);
	附加数据:
	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xhr.open('POST', 'test.php', true );

//发送请求
	GET发送请求
	xhr.send()
	POST发送请求
	不附加数据时
	xhr.send();
	附加数据时
	xhr.send('name=Lan&age=18');

//接受数据:接受请求,处理数据,返回数据,浏览器接受并处理
	xhr.onreadystatechange = function () {  //事件监听
	  if (xhr.readyState == 4) {  //响应就绪
	  	if(xhr.status == 200) {  //请求成功
			var data = xhr.responseText;
		} else {
			alert("请求失败,请重试!")
		}
	  } 
	};

jqueryajax:

在原生的ajax的基础上进行了封装;支持jsonp

var Btn =  document.getElementById("button");
Btn.onclick = function(){
    ajax({
        type:"post",
        url:"test.php",
        data:"name=aaa&pwd=111",
        success:function(data){
           console.log(data);
        }
    });
}

fetch:

fetch是用来取代传统的XMLHttpRequest的。 它的优点很多,包括链式调用的语法、返回promise等。
api是可以结合 async 和 await 来使用的。
解决回调地狱
API 偏底层,需要封装;默认不带Cookie,需要手动添加; 浏览器支持情况不是很友好,需要第三方的ployfill

fetch('url地址', {
    method: 'post',
    headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams([
        ["username", "Lan"],["password", "123456"]
    ]).toString()
})
.then(res => {
    console.log(res);
    res.json()
    .then(data => {
    	console.log(data);  //真正的数据
	})
})
.catch(err => {
	console.log(err)
})

fetch的一些详细参数说明

axios:

支持浏览器和node.js
支持promise
能拦截请求和响应
能转换请求和响应数据
能取消请求
自动转换JSON数据
浏览器端支持防止CSRF(跨站请求伪造)

axios({
    method: 'post',
    url: '/login',
    data: {
        userName: 'aaa',
        password: '111'
    }
})
.then(response => {
    console.log(response);
})
.catch(error => {
    console.log(error);
});

本文地址:https://blog.csdn.net/sunlulu66/article/details/107896147

相关标签: axios js ajax