Ajax get和post 的二次封装

encodeURI

在使用GET请求的时候通常将数据携带到URL上面，这样会造成数据格式的不规范，URL中尽量不要有中文汉字，但是在表单提交或者查询中难免会遇到数据（中文）的一个查询，或者提交，这个时候我们可以用encodeURI进行一个转换

encodeURI的转换规则是有着自己一套规则，转换的内容：非英文、汉字、部分符号都会按照自己的规则转换

封装完成的Ajax.js

(function(){
  // 唯一暴露的参数变量
  window.ajax = ajax = {};
  
  function common(xhr,JSON,callback) { 
      // 如果用户只传了两个参数，第二个参数如果不是JSON就是函数
      // 如果第二个参数的类型是函数了，说明第二个参数就是回调函数
      if(typeof JSON == "function") {
        // 如果第二个参数是回调函数了，让callback参数就等于这个函数
        callback = JSON;
        JSON = {};
      }
      xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
          if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
            callback(xhr.responseText)
          }
        }
      }
      // 拼接JSON数据，比如我们的参数{"id":10001,"name":"小明","age":18}
      // 转换为id=10001&name=小明&age=18
      var temp = [];
      for(var k in JSON) {
        temp.push(k+"="+encodeURI(JSON[k]));
      }
      // 将temp的数据转换为字符串格式的，共最后提交请求使用
      return temp.join("&");
  }
  ajax.get = function(url,JSON,callback) {
    var xhr = new XMLHttpRequest();
    // 调用公共方法
    var str = common(xhr,JSON,callback)
    // 防止没有参数
    if(str) {
      url+="?"+str
    }
    xhr.open("get",url,true);
    xhr.send(null);
  }
  ajax.post = function(url,JSON,callback) {
    var xhr = new XMLHttpRequest();
    // 调用公共方法
    var str = common(xhr,JSON,callback)
    xhr.open("post",url,true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.send(str)
  }
})()

页面调用

ajax.post("info.php",{"id":10001},function(value){
   console.log(value)
});

  ajax.get("info.php",{"id":10001,"name":"小明","age":18},function(value){
      console.log(value)
    });

info.php

<meta charset='utf-8'>
<?php
    $arr = array(
        "10001" => array("name"=>"小明","age"=>18,"sex"=>"男","height"=>"165","weight"=>62),
        "10002" => array("name"=>"小白","age"=>19,"sex"=>"女","height"=>"175","weight"=>70),
        "10003" => array("name"=>"小虎","age"=>20,"sex"=>"男","height"=>"180","weight"=>75),
        "10004" => array("name"=>"小黑","age"=>21,"sex"=>"女","height"=>"160","weight"=>55),
        "10005" => array("name"=>"小刘","age"=>22,"sex"=>"男","height"=>"168","weight"=>65),
    );
    //获取用户输入的学号ID
    $id = $_GET["id"];
?>
<h1>
    <?php echo $id ?>
</h1>
<ul>
    <li><?php echo $id ?></li>
    <li><?php echo $arr[$id]['name'] ?></li>
    <li><?php echo $arr[$id]['age'] ?></li>
    <li><?php echo $arr[$id]['sex'] ?></li>
    <li><?php echo $arr[$id]['height'] ?></li>
    <li><?php echo $arr[$id]['weight'] ?></li>
</ul>