ajax 入门小结代码注释解析

<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <title>Document</title>
  <style media="screen">
    #demo {
        font-family: 'Helvetica',Arial,sans-serif;
    }
    a {
        text-decoration: none;
        color: #f66;
    }
    li {
        line-height: 1.5em;
        margin-bottom: 20px;
    }
    .author,.date {
        font-weight: bold;
    }
  </style>
</head>
<body>
    <div id="demo">
        <h1>最新的Vue 提交</h1>
        <template v-for="branch in branches">
            <input type="radio" name="branch" :id="branch" :value="branch" v-model="currentBranch">
            <label :for="branch">{{ branch }}</label>
        </template>
        <p>Vuejs/vue@{{currentBranch}}</p>
        <ul>
            <li v-for="record in commits">
                <a :href="record.html_url" target="_blank" class="commit">{{ record.sha.slice(0,7) }}</a>
                -<span class="message">{{record.commit.message}}</span>
                by<span class="author">{{record.commit.author.name}}</span>
                at<span class="date">{{record.commit.author.date | formatDate}}</span>
            </li>
        </ul>
    </div>
<script src="http://cdn.bootcss.com/vue/1.0.25/vue.min.js"></script>
<script>
var apiURL = 'https://api.github.com/repos/vuejs/vue/commits?per_page=3&sha=';
var demo = new Vue({
    el:'#demo',data:{
        branches:['master','dev'],currentBranch:'master',commits:null
    },created:function() {
        this.fetchData()
    },methods:{
        fetchData:function() {
            //初始化ajax请求对象,它是浏览器具有主动请求数据的核心对象
            var xhr = new XMLHttpRequest();
            var self = this;
            //开始请求,get 是方法 url铭文请求方式
            //post 表单请求 加密方式
            //open 方法两个参数 请求方式，请示地址
            xhr.open('GET',apiURL + self.currentBranch);//打开通道  1
            //获取数据后的回调
            //onload 即请求完成后
            xhr.onload = function() {
                //xhr在请求完成后 返回的数据会在responseText 属性中  这个属性是个字符串对象
                //JSON.parse 将字符串，变成JSON 对象
                //stringify()
                self.commits = JSON.parse(xhr.responseText);
            }//3  异步执行的
            xhr.send();//发送请求 请求发送成功进行回调函数  2
        }
    },filters:{
        formatDate:function(v) {
            //replace 字符串替换方法
            //第一个参数可以是一个字符串 或者一个正则
            //T|Z 这两个字母，全局替换为空格
            return v.replace(/T|Z/g,' ');
        }
    },watch: {
        currentBranch:'fetchData'
    }
})
</script>
</body>
</html>
原文链接：https://www.f2er.com/ajax/161871.html
ajax 入门小结 代码注释解析

猜你在找的Ajax相关文章

ajax 入门小结代码注释解析
