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

来源:互联网 发布:淘宝中国质造加入条件 编辑:程序博客网 时间:2024/06/06 08:30


       // 准备一个 对象
      // 如果参数使用逗号分隔 写多个
      // 那么用户 需要去记忆参数的 顺序,以及每一个参数的作用
     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);
      }
  }
0 0