几种前端请求数据方式

经常用ajax进行请求操作，那么除了ajax，还有什么请求方式呢，今天我们来学一下几种前端请求数据方式吧~

学习参考:
https://blog.csdn.net/weixin_43992119/article/details/100514686
https://www.cnblogs.com/cc123nice/p/12593857.html

1. XMLHttpRequest

ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。

所以我用一句话来总结两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求

<script>
    var xhr = new XMLHttpRequest();
    xhr.open("get", "http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js", true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
        }
    };
    xhr.send(null);
</script>

2. jquery的$.ajax方法

场景1. 用Ajax进行数据验证
场景2.按需取数据
场景3.自动更新页面

异步请求方式，jQuery都封装好了，具体的业务可以通过设置不同的属性去实现

<script src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
$.ajax({
    async: false,
    type: "GET",
    dataType: 'jsonp',
    jsonp: 'callback',
    jsonpCallback: 'callbackfunction',
    url: "http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js",
    data: "",
    timeout: 3000,
    contentType: "application/json;utf-8",
    success: function(msg) {
    console.log(msg);
    }
});
})
</script>

3. axios

axios 是一个基于 Promise 的 http请求库，可以用在浏览器和 node.js 中，本质上也是对原生XHR的封装，只不过它是Promise 的实现版本，符合最新的ES规则。

axios与ajax区别

相同点：
都是执行异步请求操作

不同点：
1. 大小

axios体积小只需在要使用的目录下 npm install axios –save
ajax 需要导入jQuery【体积较大只是为了ajax去引入是不值得的】

2. 针对方向

axios 符合前端MVVM的浪潮
ajax 本身是针对MVC的编程

3. 实现方法与返回值

axios 用promise技术实现对ajax技术的封装返回值是 promise
ajax 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案

4. 对并发请求的封装api

5. 用法相同，但个别参数不同

<script>
    axios({
    url:'服务器url',
    method:'请求方式' ,
    params:{
        name:'cc',
        age:'18'
    }
    }).then(function (response) {
        console.log(response);
        console.log(response.data);
    }).catch(function (error) {
        console.log(error);
    }）

</script>

4. postMessage+iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testa</title>
</head>
<script>
    window.onload = function() {
    document.getElementById('ifr').contentWindow.postMessage('我是一条测试数据', 'https://mp.csdn.net/mdeditor/100514686');
    };
</script>
<body>
    <iframe id="ifr" src="https://mp.csdn.net/mdeditor/100514686.html"></iframe>
</body>
</html>

请求的页面则可以通过添加监听来获得请求数据

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>testb</title>
</head>
<script>
//可以调用window中的时间监听对跨域访问的postmessage经行监听
window.addEventListener('message', function(event) {
// 通过origin属性判断消息来源地址
if (event.origin === 'http://127.0.0.1:8080') {
    alert(event.data); 
}
}, false);
</script>
<body>
</body>
</html>