_ _ upgrade package ajax_ transfer function parameters and pass a plurality of parameters

HTML：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
  <h2>测试工具函数</h2>
  <input class='get' type="button" value='测试get'>
  <input class='post' type="button" value='测试post'>
  <input class='ajax_test' type="button" value='测试ajax_test'>
  <input class='ajax' type="button" value='测试ajax'>
  <input class='json' type="button" value='获取json'>
  <input class='xml' type="button" value='获取xml'>
</ Introduced js   <-!>HTML</>Body

-->
<script  src="./ajax.js"></script>
<!-- 自己的js  -->
<script>
  // get请求
  document.querySelector('.get').onclick = function(){
    // 直接调用 get方法
    //function get(url, data, success)
    get('../00.backData/01.backSendData.php','name=jack&friend=rose',function(data){
      console.log(data);
    })
  }

  //post request 
  document.querySelector ( ' .post ' ) .onclick =  function () {
     // called directly get method 
    // function post (URL, Data, Success) 
    post ( ' ../00.backData/01.backSendData.php ' , ' name = & Rose = peppers Friend ' , function (Data) { 
      Alert (Data); 
    }) 
  } 

  // Ajax managed POST GET 
  document.querySelector ( ' .ajax_test ' ) .onclick =  function () {
     //ajax_test ( '../ 00.backData / 01.backSendData.php' , 'get', 'name = & food = gourd carrot', function (Data) { 
    //    Alert ( 'gourd'); 
    //    Alert ( Data); 
    // }) 
    ajax_test ( ' ../00.backData/01.backSendData.php ' , ' POST ' , ' name = & food = snake grandfather ' , function (Data) { 
      Alert ( ' snake ' ) ; 
      Alert (Data); 
    }) 
  } 

  // Ajax pass only one parameter 
  document.querySelector ( ' .ajax ' ).onclick = function(){
    Ajax ({ 
      type: ' GET ' , 
      Data: ' skill = eat broccoli and celery bounce rabbit cute & name = ' , 
      Success: function (Data) { 
        document.body.innerHTML = Data; 
      }, 
      URL: ' ../00.backData/01.backSendData.php ' 
    }); 
  } 

  // Get JSON 
  document.querySelector ( ' .json ' ) .onclick =  function () { 
    Ajax ({ 
      type: ' GET ' , 
      URL:'../00.backData/backJSON.php',
      success:function(data){
        console.log(data);
      }
    })
  }

  // 获取 xml
    document.querySelector('.xml').onclick = function(){
    ajax({
      type:'post',
      url:'../00.backData/backXML.php',
      success:function(data){
        console.log(data);
      }
    })
  }
</script>

Package JS:

/**
 * ajax工具函数-get
 * @param {*} url 
 * @param {*} data(key1=value1&key2=value2) 
 * @param {*} success 
 */
function get(url, data, success) {
  var xhr = new XMLHttpRequest();
  if (data) {
    url += '?';
    url += data;
  }
  xhr.open('get', url);
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      success(xhr.responseText);
    }
  }
  xhr.send(null);
}

/**
 * ajax工具函数-post
 * @param {*} url 
 * @param {*} data (key1=value1&key2=value2) 
 * @param {*} success 
 */
function post(url, data, success) {
  var xhr = new XMLHttpRequest();
  xhr.open('post', url);
  if (data) {
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  }
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      the console.log (xhr.responseText); 
      Success (xhr.responseText); 
    } 
  } 
  xhr.send (Data); 
} 

/ * * 
 * after more parameter arguments to be passed if the user must follow 
 * @param {*} url 
 * @param {type} * 
 * @param {} Data * 
 * @param {} * Success 
 * / 
function ajax_test (URL, type, Data, Success) {
   var XHR = new new the XMLHttpRequest ();
   // if there and get data 
  IF (type == 'GET' && data) { 
    URL + = '?' ; 
    URL + = data; 
    data = null ;// so that the last to send data directly 
   }
  xhr.open (type, URL); 
  // POST requests and data 
  IF (type == 'POST' && Data) { 
    xhr.setRequestHeader ( 'the Content-type', 'file application / -WWW-form-X urlencoded ' ); 
  } 
  xhr.onreadystatechange = function () {
     IF (xhr.readyState == == 200 is xhr.status &&. 4 ) { 
      Success (xhr.responseText); 
    } 
  } 
  xhr.send (Data ); 
} 

// pass only one parameter 
// user is passed the object 
/ * 
  keys 
    URL 
    type 
    Data 
    Success 
  sequence the user does not need to remember only the property name parameter memory parameters to 
  most of the frameworks are doing 
* /
function Ajax (Option) {
   var XHR = new new the XMLHttpRequest ();
   // if and get data 
  IF (option.type == 'get' && option.data) { 
    option.url + = '?' ; 
    option.url = + option.data; 
    option.data = null ; // this last to send data directly 
  } 
  xhr.open (option.type, option.url); 
  // POST requests and data 
  IF (option.type == ' POST '&& option.data) { 
    xhr.setRequestHeader ( ' the Content-type ',' file application / X-WWW-form-urlencoded ' ); 
  }
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      // option.success(xhr.responseText);
      // console.log(xhr.getResponseHeader('Content-Type'));
      var type = xhr.getResponseHeader('Content-Type');
      // 是否为json
      if (type.indexOf('json') != -1) {
        option.success(JSON.parse(xhr.responseText));
      }
      // 是否为xml
      else if (type.indexOf('xml') != -1) {
        option.success (xhr.responseXML); 
      } 
      // normal string 
      the else{ 
        Option.success (xhr.responseText); 
      } 
    } 
  } 
  xhr.send (option.data); 
} 


/ * 
  summary 
    package purpose 
      let us focus on the logical 
      interaction effect page 
      section based do not always come again 
    Package the step of 
      fixing the part extraction 
      are not fixed parameters as part of 
      many parameters ==> 
        using the object to optimize the 
    quality of the package 
      functions can normally perform 
      simple degree code (readability) 
      issues to consider whether sufficient compatibility issues, Exception handling 
* /

_ _ upgrade package ajax_ transfer function parameters and pass a plurality of parameters

Guess you like