相同点:都是用于发送网络请求
不同点:
Ajax:全称为Asynchronous javaScript And XML,翻译过来就是“异步的javaScript 和 XML”,Ajax其实是一个技术统称,是一个概念模型,它概括了很多技术,并不是指某一技术,它的特征就是让网页实现局部刷新
。简单来说,Ajax是一种思想,XMLHttpRequest只是实现Ajax的一种方式,其中XMLHttpRequest模块就是实现Ajax的一种很好的方式。
利用XMLHttpRequest模块实现Ajax
function ajax(url){
const xhr = new XMLHttpRequest();
xhr.open("get",url,false);
xhr.onreadystatechange = function(){
//异步回调函数
if(xhr.readyState === 4){
if(xhr.status === 200){
console.info("响应结果",xhr.response)
}
}
}
xhr.send(null);
}
ajax('http://www.baidu.com')
特点:局部刷新页面,无需重载整个页面
Fetch:在ES6中出现的,它使用了ES6提出的 promise 对象,它是XMLHttpRequest的替代品。Fetch是一个api,是真实存在的,它是基于promise的。
特点:
- 使用promise,不需要回调函数。
- 采用模块化设计,将rep,res等对象分散开来,比较友好。
- 通过数据流对象处理数据,可以提高网站性能。
function ajaxFetch(url){
fetch(url).then(res=>res.json()).then(data =>{ //特点就是使用promise的.then的语法进行链式调用
console.log(data);
})
}
ajaxFetch('http://www.baidu.com')
Axios:随着vue兴起广泛使用,它是一个封装库,是一个基于promise封装的网络请求库,它是基于XHR二次封装。
特点:
- 从浏览器中创建XMLHttpRequest
- 从node.js创建http请求
- 支持promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF
//发送post请求
axios({
method:'post',
url:'htt://www.baidu.com',
data:{
firstName:'ff',
lastName:'dd'
}
})