18 原生ajax、jquery ajax、axios与fetch调用后台api

最新推荐文章于 2020-09-27 20:04:20 发布

张力的程序园

最新推荐文章于 2020-09-27 20:04:20 发布

阅读量234

点赞数

分类专栏： 999 技术随笔

本文链接：https://blog.csdn.net/langli204910/article/details/104894278

版权

999 技术随笔专栏收录该内容

21 篇文章 0 订阅

订阅专栏

ajax隶属于原始js中，核心使用XMLHttpRequest对象，JQuery ajax 是对原生XHR的封装，除此以外还增添了对JSONP的支持。Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。本节将阐述它们三者的不同用法。

1、前提约束

提供一个api http://localhost:8082/getdata
api请求及响应结果

注意：这个api的端口、名称读者可以根据自己的实际去设置；该api允许跨域访问

2、操作步骤

创建一个web项目，假设名称为demo，端口为8080
在demo/webapp下引入axios.min.js、jquery-1.10.2.js、vue.min.js
在demo/webapp下创建indexaxios.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios demo</title>
    <script src="jquery-1.11.2.min.js"></script>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
</head>

<body>
<div id="axios">
    {{result}}
</div>
<script type="text/javascript">
    vm = new Vue({
        el: '#axios',
        data: {
            result: "wanho"
        },
        mounted() {
            //由于this在回调函数中指向不同并非是vue实例所以先赋值给_this
            var _this = this;
            axios.get("http://localhost:8082/getdata")
                .then(function (response) {
                    console.log(response.data.data);
                    _this.result = response.data.data;
                })
                .catch(function (reason) {
                    console.log(reason);
                })
        }
    });
</script>
</body>
</html>

在demo/webapp下创建indexfetch.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>fetch demo</title>
    <script src="jquery-1.11.2.min.js"></script>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
</head>

<body>
<div id="axios">
    {{result}}
</div>
<script type="text/javascript">
    vm = new Vue({
        el: '#axios',
        data: {
            result: "wanho"
        },
        mounted() {
            //由于this在回调函数中指向不同并非是vue实例所以先赋值给_this
            var _this = this;
            fetch("http://localhost:8082/getdata").then(function (response) {
                return response.json();
            }).then(function(json) {
                _this.result=json.data;
            }).catch(function (reason) {
                console.log(reason);
            })
        }
    });
</script>
</body>
</html>

在demo/webapp下创建indexajax.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajax democ</title>
    <script src="jquery-1.11.2.min.js"></script>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
</head>

<body>
<div id="axios">
    {{result}}
</div>
<script type="text/javascript">
    vm = new Vue({
        el: '#axios',
        data: {
            result: "wanho"
        },
        mounted() {
            //由于this在回调函数中指向不同并非是vue实例所以先赋值给_this
            var _this = this;
            $.get("http://localhost:8082/getdata",function (data) {
                _this.result = data.data;
            });
        }
    });
</script>
</body>
</html>

或者

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajax demo</title>
</head>
<body>
<div id="data">
</div>
<script>
    // 创建ajax对象
    var xhr = null;
    if (window.XMLHttpRequest) {//非IE浏览器
        xhr = new XMLHttpRequest();
    } else {//IE浏览器
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    xhr.open("GET", "http://localhost:8082/getdata", true);
    xhr.send();
    // 处理返回数据
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            /*
            ** Http状态码
            ** 1xx ：信息展示
            ** 2xx ：成功
            ** 3xx ：重定向
            ** 4xx : 客户端错误
            ** 5xx ：服务器端错误
            */
            if (xhr.status == 200) {
                var ret = JSON.parse(this.responseText);
                document.getElementById("data").innerText=ret.data;
            } else {
                if (failed) {
                    failed(xhr.status);
                }
            }
        }
    }
</script>
</body>
</html>

以上就是通过ajax, axios，fetch访问第三方api的过程。

张力的程序园

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
18 原生ajax、jquery ajax、axios与fetch调用后台api

ajax隶属于原始js中，核心使用XMLHttpRequest对象，JQuery ajax 是对原生XHR的封装，除此以外还增添了对JSONP的支持。Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。本节将阐述它们三者的不同用法。1、前提约束提...
复制链接

扫一扫