【前端框架学习】vue-resource实现get、post、jsonp请求

最新推荐文章于 2024-02-29 17:45:21 发布

悠玄烛远

最新推荐文章于 2024-02-29 17:45:21 发布

阅读量1.6k

点赞数

分类专栏：前端框架Vue学习文章标签：前端框架 vue.js ajax

本文链接：https://blog.csdn.net/qq_38594872/article/details/122758206

版权

前端框架Vue学习专栏收录该内容

29 篇文章 0 订阅

订阅专栏

一、发起Ajax请求的方式

1.原生js发起ajax请求

    <script>
        //步骤一:创建异步对象
        var ajax = new XMLHttpRequest();
        //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
        ajax.open('get', 'getStar.php?starName=' + name);
        //步骤三:发送请求
        ajax.send();
        //步骤四:注册事件 onreadystatechange 状态改变就会调用
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的　　　　
                //console.log(ajax.responseText);//输入相应的内容
            }
        }
    </script>

2.jQuery的方式发起Ajax请求

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $.ajax({
            type: 'POST', // 规定请求的类型（GET 或 POST）
            url: uploadV, // 请求的url地址
            dataType: 'json', //预期的服务器响应的数据类型 
            data: {},//规定要发送到服务器的数据
            beforeSend: function () { //发送请求前运行的函数（发送之前就会进入这个函数）
                
            },
            success: function (result) { // 当请求成功时运行的函数
                
            },
            error: function (result) { //失败的函数
                
            },
            complete: function () { //请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后，不管成功还是失败 都会进这个函数）
                
            }
        });
    </script>

二、常见的数据请求类型

1.GET请求

①GET请求一般用去请求获取数据；

②GET请求可以传参到后台，由于其参数在浏览器的地址栏的url中可见，所以隐私性安全性较差，且参数长度也是有限制的；

③GET请求刷新浏览器或回退时没有影响；

④GET 请求可被缓存;

⑤GET 请求保留在浏览器历史记录中；

⑥GET 请求可被收藏为书签；

⑦GET请求只能进行url编码；

⑧GET请求比较常见的方式是通过url地址栏请求。

2.POST请求

①POST一般作为发送数据到后台时使用；

② POST请求传递参数放在Request body中，不会在url中显示，比GET要安全，且参数长度无限制；

③ POST回退时会重新提交数据请求；

④POST 请求不会被缓存；

⑤POST 请求不会保留在浏览器历史记录中；

⑥POST 不能被收藏为书签；

⑦POST支持多种编码方式

⑧ POST最常见是通过form表单发送数据请求

3.JSONP

①JSONP不是一门语言，也并不是什么特别开发的技术，它更像是一个BUG，一个开发者找出来可以用来作为跨域传输数据的”漏洞”；

②目标页面回调本地页面的方法,并带入参数；

③jsonp将目标作为js形式加载过来。

参考文档：【原创】说说JSON和JSONP，也许你会豁然开朗--博客园

三、vue-resource的安装及使用

1.安装

github地址：GitHub - vue-resource: The HTTP client for Vue.js

在线cdn地址：https://cdn.jsdelivr.net/npm/vue-resource@1.5.3

注：要使用vue-resource的时候直接在代码中引用就可以了；一是可以去上面的github链接中下载并引用，二是直接通过cdn进行在线的引用。

2.使用

在vue-resource中，使用ajax请求一般用 this.$http.get ，通过 .then 来拿到返回的数据，包括一个成功的属性和一个失败的属性，这里需要注意的是后者是可选的。

具体config参数参考：vue-resource/http.md at develop · pagekit/vue-resource · GitHub

下面来看一个具体的实例，以get请求为例：

<body>
    <div id="app">
        <input type="button" value="get请求" @click="getInfo">
    </div>

    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--vue-resource依赖于vue，导包的时候要注意先后顺序-->
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.3"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {
                getInfo() {
                    // 当发起get请求之后，通过.then来设置成功的回调函数                                
                        this.$http.get('http://vue.studyit.io/api/getlunbo').then(function(result){
                        console.log(result);
                    });
                }
            }
        });
    </script>
</body>

下面来看一个post请求的实例：

                postInfo() {//发起post请求   application/x-www-form-urlencoded
                    //手动发起的post请求默认没有表单格式，所以有的服务器处理不了
                    //通过post方法的第三个参数，{ emulateJSON: true }设置提交的内容类型为普通表单数据格式
                    this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
                        console.log(result.body);
                    });
                }

最后来看一个jsonp的实例：

                jsonpInfo() {
                    this.$http.get('http://vue.studyit.io/api/jsonp').then(result => {
                        console.log(result.body);
                    });
                }