ajax注解,ajax 入门小结 代码注释解析

Document

#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;

}

最新的Vue 提交

{{ branch }}

Vuejs/vue@{{currentBranch}}

• {{ record.sha.slice(0,7) }}

  -{{record.commit.message}}

  by{{record.commit.author.name}}

  at{{record.commit.author.date | formatDate}}

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'

}

})