ajax 入门小结 代码解释剖析

2024年5月12日 112次阅读 来源: 风吹一个大耳东 
<!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://segmentfault.com/a/1190000006824064
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞