2019.8.27更新:《Vue.js实战一书p231练习试做(1)
2019.8.27更新:
1 哈,之前的封闭得太简单,而且没有测试过,重新来过,已测试过,
2 又:暂未封闭为vue插件,稍后再改为插件。
3 此文档不做删除,算是学习路上的一个记录
练习: 学习XMLHttpRequest (即XHR )相关知识,开发一个简单的 ajax 插件,用于异步获
取服务端数据。
解答:
书作者提供了一段代码作为参考,实际上是要求我们把这段代码封装起来,此插件会提供 2 个接口:get 和 post,接受一个字符串参数:url
const install = function(Vue, options={}){
//辅助函数,用于创建 xhr对象,添加readystatechange事件处理函数 function createXhr(){ const xhr = new XMLHttpRequest(); xhr.onreadystatechange=function(){ if(xhr.response===4){ const status = xhr.status; if(status >= 200 && status < 300){ options.success && options.success(JSON.parse(xhr.responseText),xhr.responseXML); }else{ options.error && options.error(status); } } }; return xhr; } //辅助函数,用于·创建传送给服务器的数据data function createData(){ const data =[]; for(let i in options.data){ data.push(encodeURIComponent(i) + '=' + encodeURIComponent(options.data[i])); } data=data.join('&'); return data; } const ajax = new Vue({ methods:{
//接口1,接受url参数, get(url){ const xhr = createXhr(); const data = createData(); xhr.open('GET', url + '?' + data, true); xhr.send(null); },
//接口2,接受url参数 post(url){ const xhr = createXhr(); const data = createData(); xhr.post('POST', url, true); xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-rulencoded' ); xhr.send(data); } } }); Vue.prototype.$ajax = ajax; }; export default install;