vue 使用自己封装的原生 ajax

Ajax 即“ A synchronous  J avascript And  X ML”（异步 JavaScript 和 XML），是指一种创建交互式 网页应用的网页开发技术。

Ajax = 异步  JavaScript 和  XML（ 标准通用标记语言的子集）。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1]  

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

1: 创建一个 http.js

import Vue from 'vue';
   
let http={}
// nginx 作为代理服务器，解决跨域问题
// let _baseURL="vpaas"


// 用 CorsFilter 解决前台跨域
let _baseURL = 'http://localhost:8080/';
let ContentType = "application/json";
// http.baseURL = _baseURL;


http.request = function(opt) {
    opt = opt || {};
    opt.method = opt.method.toUpperCase() || 'POST';
    opt.url = _baseURL + (opt.url || '');
    opt.async = opt.async || true;
    opt.data = opt.data || null;
    opt.success = opt.success || function () {};
    // 创建ajax 对象
    var xmlHttp = null;
    if (XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
    else {
        xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
    }
    // 将传入的参数转换成一个数组对象
    var params = [];
    for (var key in opt.data){
        params.push(key + '=' + opt.data[key]);
    }


    var postData = params.join('&');
    //post 方法
    if (opt.method.toUpperCase() === 'POST') {
        xmlHttp.open(opt.method, opt.url, opt.async);
        xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
        xmlHttp.send(postData);
    }
    // get 方法
    else if (opt.method.toUpperCase() === 'GET') {
        xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
        xmlHttp.send(null);
    } 
    // 读取请求相应的状态
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            //请求成功时，执行这个函数
            opt.success(xmlHttp.responseText);
        }
    };
}
// 态在AJAX中共有5种，分别是。
// 0 - (未初始化)还没有调用send()方法
// 1 - (载入)已调用send()方法，正在发送请求
// 2 - (载入完成)send()方法执行完成，
// 3 - (交互)正在解析响应内容
// 4 - (完成)响应内容解析完成，可以在客户端调用了


//export与export default均可用于导出常量、函数、文件、模块等，
//你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，
//以便能够对其进行使用，但在一个文件或模块中，export、import可以有多个，export default仅有一个。 
export default http;

2: 使用