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

阳光穿透心脏的1/2处 2022-06-17 05:13 145阅读 0赞

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