Vue-resoure 实现get post jsonp请求

1.之前学习中，如何发起数据请求？

2.常见的数据请求类型？get post jsonp

3.常见的URL请求资源地址

　　get请求地址：  http://vue.studyit.io/api/getlunbo

　　post请求地址：http://Vuestudyit.io/api/post

　　jsonp请求地址：http://Vuestudyit.io/api/jsonp

4.JSONP的实现原理

　　由于浏览器的安全性限制，不允许AJAX访问  协议不同，域名不同，端口不同 数据接口不同，浏览器认为这种访问不安全

　　可以通过动态创建script标签的形式，把script标签的src属性指向数据接口的地址，因为script标签不存在跨域限制，这个数据获取方式，称作为JSONP  （

　　注意：根据JSONP的实现原理，知晓JSONP只支持GET请求）

　　具体的实现过程：

  • 　　　　先在客户端定义一个回调方法，预定义对数据的操作
  • 　　　　再把这个回调方法的名称，通过URL传参的形式 提交到服务器的数据接口
  • 　　　　服务器数据接口组织好要发送给客户端的数据，在拿着客户端传递过来的回调函数方法名称，拼接出一个调用这个函数的字符串，发送给客户端去解析执行
  • 　　　　客户端拿到服务器返回字符串之后，当作script脚本去解析执行，这样就能够拿到JSONP的数据了。

　除了使用v-resouce之外，还可以使用axios的第三方包实现数据的请求 主流现在是axios 

　　

<!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>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <!-- 引入第三方的axios cdn包 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>   

</head>
<body>
    <div class="app">
        <input id="aa" type="button" value="点击我" @click="getinfo">
        <input type="button" value="VueGET" @click="getinfo">
    </div>
    

<script>

// 使用js GET请求
window.onload=function(){
            //1.获取a节点，并为其添加onclick点击函数
            document.getElementById("aa").onclick=function(){
                //创建一个XMLHttpRequest对象
                var request=new XMLHttpRequest();
                //5.调用XMLHttpRequest对象的open方法 建立与服务器之间的联系
                request.open("GET",'http://www.phonegap100.com/appapi.php?a=getportalList&catid=20&page=1');
                //6.调用XMLHttpRequest对象的send方法
                request.send(null);
                //7.为XMLHttpRequest 对象添加onreadystatechange响应函数
                request.onreadystatechange=function(){
                    //8.判断响应是否完成：XMLHttpRequest 对象的readystate属性为4的时候
                    if(request.readyState==4){
                        //9.在判断响应是否可用，XMLHttpRequest 对象status属性值为200
                        if(request.status==200||request.status==304){
                            //10.输出结果  responseText
                            console.log(request);
                        }
                    }
                }
                //2.取消点击事件的默认行为
                return false;
            }
}

        // 使用Vue axios get请求
    var vm=new Vue({

        el:'.app',
        data:{},
        methods: {
            getinfo(){   //发起get请求
            var api='http://www.phonegap100.com/appapi.php?a=getportalList&catid=20&page=1';
               axios.get(api).then(function(result){
                    console.log(result);          //请求成功
               });
            }
        },
    });

</script>
</body>
</html>

 

posted @ 2019-09-30 11:02  WhiteSpace  阅读(871)  评论(0)  编辑  收藏  举报