封装多种方式的ajax异步方法

       // 准备一个 对象

      // 如果参数使用逗号分隔 写多个

      // 那么用户 需要去记忆参数的 顺序,以及每一个参数的作用

     var my$_pro = {

      get: function (url,data, success) {

         //1.创建异步对象

           var xhr = newXMLHttpRequest();

         // 由于是 get请求

         // 数据 需要拼接在 url中

    url += '?';

    url += data;

    //2.设置属性(请求头,请求行)

    xhr.open('get', url);

    //4.注册状态改变事件

    xhr.onreadystatechange = function () {

    //5.判断状态&请求是否成功并使用数据

       if (xhr.readyState == 4 && xhr.status == 200) {

    success(xhr.responseText);
}

     }

        //3.发送请求 请求主体

         xhr.send(null);

 },

     post: function (url,data, success) {

//1.创建异步对象 

var xhr = newXMLHttpRequest();

  //2.设置属性(请求头,请求行)

xhr.open('post', url);

// 设置 请求头

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

//4.注册状态改变事件

xhr.onreadystatechange = function () {

//5.判断状态&请求是否成功并使用数据

if (xhr.readyState == 4 && xhr.status == 200) {

     success(xhr.responseText);
  }

       }

  //3.发送请求 请求主体

xhr.send(data);

  },

ajax: function (option) {

   //1.创建异步对象

var xhr = newXMLHttpRequest();

// 如果是get方式，url 可能需要拼接

if (option.type == 'get') {

  option.url += '?';

  option.url += option.data;

// 如果 这里 使用了 data 那么 send 这个方法中 null

  option.data = null;
}

//2.设置属性(请求头,请求行)

xhr.open(option.type, option.url);

// 设置 请求头

if (option.type == 'post') {
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
}

//4.注册状态改变事件

xhr.onreadystatechange = function () {

//5.判断状态&请求是否成功并使用数据

if (xhr.readyState == 4 && xhr.status == 200) {

// xhr 判断数据是json格式还是xml格式

var value = xhr.getResponseHeader('Content-Type');

// 如果有 xml

if (value.indexOf('xml') != -1) {

option.success(xhr.responseXML);

} else if (value.indexOf('json') != -1) {

// 如果是json数字据 那么 帮忙 把转换的操作也做了

option.success(JSON.parse(xhr.responseText));

} else {

option.success(xhr.responseText);
}
  }
    }

//3.发送请求 请求主体

xhr.send(option.data);

      }

  }