1 效果

2 代码

let p_showping = document.querySelector(".showing");
    let form_god = document.querySelector(".god");
    const xhr = new XMLHttpRequest(); //1.公用请求对象
    xhr.addEventListener("readystatechange", show, false); //2.公用请求对象监听 readystatechange
    xhr.open("post", "php/ajax_post.php", true); //3.请求方式和地址设置， 打开异步请求
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); //4.设置请求头
    showing = (ev) => {
      p_showping.innerHTML = ev.target.innerHTML;
      switch (ev.target.className.substr(ev.target.className.lastIndexOf("-") + 1)) {
        case "post":
          //请求数据对象
          let my_god = {
            name: "i",
            power: "0123456789",
          };
          //请求数据转json
          let data = JSON.stringify(my_god);
          xhr.open("POST", "php/ajax_post.php", true); //3.请求方式和地址设置， 打开异步请求,发送一次就关了？
          xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); //4.设置请求头
          xhr.send(data); //5.发送请求数据
          break;
        case "json":
          let your_god = {
            name: "you",
            power: "9876543210",
          };
          let you_json = JSON.stringify(your_god);
          xhr.open("POST", "php/ajax_post_json.php", true); //3.请求方式、地址、异步请求
          xhr.setRequestHeader("content-type", "application/json;charset=utf-8"); //4.请求头设置json数据类型
          xhr.send(you_json); //5.发送请求数据
          break;
        case "formdata":
          xhr.open("POST", "php/ajax_post_formdata.php", true);
          xhr.send(new FormData(form_god));
          break;
        case "jsonp":
          let url = "http://jsonp.io/index.php?id=3&jsonp=show_jsonp";
          let jsonp_script = document.createElement("script"); //脚本元素
          jsonp_script.src = url; //指定url
          document.head.appendChild(jsonp_script); //添加元素到页头
          break;
        default:
          console.log("default");
          break;
      }
    };
    function show(ev) {
      if (xhr.readyState === 4) {
        // console.log("show");
        console.log(xhr.responseText);
        p_showping.innerHTML += xhr.responseText; //2.1请求返回数据显示
      }
    }
    function show_jsonp(user) {
      // 返回的数据已经自动解析成了js对象了
      document.querySelector("#god_name").value = user.name;
      document.querySelector("#god_power").value = user.email;
    }
    let btn_post = document.querySelector(".btn-post").addEventListener("click", (ev) => showing(ev), false);
    let btn_post_json = document.querySelector(".btn-post-json").addEventListener("click", (ev) => showing(ev), false);
    let btn_post_formdata = document
      .querySelector(".btn-post-formdata")
      .addEventListener("click", (ev) => showing(ev), false);
    let btn_jsonp = document.querySelector(".btn-jsonp").addEventListener("click", (ev) => showing(ev), false);