前端之家收集整理的这篇文章主要介绍了
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>