AJAX

1.AJAX原生代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" name="" id="" value="点击测试" v-on:click="getData" />
            <ul>
                <li v-for="item in newlist">
                    <h3>{{item.title}}</h3>
                    <p>{{item.ctime}}</p>
                    <p><a v-bind:href="item.url">新闻明细</a></p>
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            let z=new Vue({
                el:'#app',
                data:{
                    newlist:[]
                },
                methods:{
                    getData(){
                    // 提前定义变量that储存Vue对象
                        let that=this
                        // 定义远程服务的请求对象
                        let xhr=new XMLHttpRequest();
                        // 指定请求的网址
                        xhr.open('get',"http://api.tianapi.com/keji/index?key=7391e344a41d246b437f4d76660c7f85&num=10")
                        // 发送请求的信息
                        xhr.send(null)
                        // 当争取获取到相应数据时
                        xhr.onreadystatechange=function(){
                            if(xhr.readyState==4&&xhr.status==200){
                                // 获取服务端相应JSON
                                let res=xhr.responseText
                                console.log(res)
                                // 对JSON进行解析
                                let data=JSON.parse(res)
                                console.log(data)
                                let ns=data.newslist
                                console.log(ns)
                                that.newlist=ns
                            }
                        }
                    }
                }
            })
        </script>
    </body>
</html>

axios