js 封装 ajax

一： 原生的JS封装 ajax

    ajax: function(opt) {
        opt = opt || {};
        opt.method = opt.method.toUpperCase() || 'POST';
        opt.url = 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);
            }else{
                // 请求失败时，执行次函数
                opt.faild(xmlHttp.responseText);
            }
        };
    },

调用原生的 ajax ：

getAllUser () {


      this.ajax({
        method: 'get',
        url: 'http://localhost:8080/user/getUser',
        data: {
        },
        async: true,
        success: function(text) {
          console.log("获取到的信息：",text);
        },
        faild: function(text) {
          console.log("失败时显示的函数: ",text);
        }
      });

二： JQuery 封装的 ajax

要引入jquery  哦，我的上一篇博客已经说明的方法，亲自测试过。

      $.ajax({
          type : "get",
          url : "http://localhost:8080/user/getUser",
          success : function(data) {
                console.log("返回的数据：",data);
          },
          error : function(){
              alert("错误");
          }
      });

两种方法的比较：

 两种方法各有千秋，用 JS 封装的原始 ajax ，比较灵活自己可以根据自己的业务需求来制定不同的方式，jQuery 封装的 ajax 使用起来自己封装的要好，但是不够灵活。

 前后端分离是当前web项目开发的主流，会经常遇到跨域问题，解决跨域问题时，就体现了两种方法的优缺点。

 1： 用 nginx 作为服务器代理，转换一下请求的地址，但是请求的时请求路径不需要写完整的路径，只需要在 url 前面加上

特定的前缀，当 nginx 收到请求时，会根据 url 的前缀，将请求转向特定的服务，在这种情况下，就显示了自己封装的ajax的

优点，当 url 的前缀发生改变时，只需要修改一个位置即可。

2：用 CorsFilter 作为解决跨域问题，也是只把请求路径的前缀修改一下即可。

例如：