XMLHttpRequest ()

您可以使用XMLHttpRequest()构造函数创建一个新的XMLHttpRequest(XHR)对象，该对象将允许您使用标准的HTTP请求方法(如GET和POST)与服务器交互:

const data = JSON.stringify({
  example_1: 123,
  example_2: 'Hello, world!',
});

const request = new XMLHttpRequest();

request.addEventListener('load', function () {
  if (this.readyState === 4 && this.status === 200) {
    console.log(this.responseText);
  }
});

request.open('POST', 'example.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

fetch ()

你也可以使用fetch()方法获取一个Promise，它解析为响应对象，表示对请求的响应:

const data = JSON.stringify({
  example_1: 123,
  example_2: 'Hello, world!',
});

fetch('example.php', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
  },
  body: data,
}).then(response => {
  if (response.ok) {
    response.text().then(response => {
      console.log(response);
    });
  }
});

领航员sendBeacon()。

另一方面，如果你只是试图POST数据，不需要服务器的响应，最短的解决方案是使用navigator.sendBeacon():

const data = JSON.stringify({
  example_1: 123,
  example_2: 'Hello, world!',
});

navigator.sendBeacon('example.php', data);

如果您不想包含JQuery，我建议您尝试一些轻量级AJAX库。

我最喜欢的是reqwest。它只有3.4kb，构建得非常好:https://github.com/ded/Reqwest

下面是一个带有reqwest的GET请求示例:

reqwest({
    url: url,
    method: 'GET',
    type: 'json',
    success: onSuccess
});

现在，如果您想要更轻量级的东西，我将尝试仅需0.4kb的microAjax: https://code.google.com/p/microajax/

这是所有的代码:

function microAjax(B,A){this.bindFunction=function(E,D){return function(){return E.apply(D,[D])}};this.stateChange=function(D){if(this.request.readyState==4){this.callbackFunction(this.request.responseText)}};this.getRequest=function(){if(window.ActiveXObject){return new ActiveXObject("Microsoft.XMLHTTP")}else{if(window.XMLHttpRequest){return new XMLHttpRequest()}}return false};this.postBody=(arguments[2]||"");this.callbackFunction=A;this.url=B;this.request=this.getRequest();if(this.request){var C=this.request;C.onreadystatechange=this.bindFunction(this.stateChange,this);if(this.postBody!==""){C.open("POST",B,true);C.setRequestHeader("X-Requested-With","XMLHttpRequest");C.setRequestHeader("Content-type","application/x-www-form-urlencoded");C.setRequestHeader("Connection","close")}else{C.open("GET",B,true)}C.send(this.postBody)}};

下面是一个示例调用:

microAjax(url, onSuccess);

你可以根据浏览器获得正确的对象

function getXmlDoc() {
  var xmlDoc;

  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlDoc = new XMLHttpRequest();
  }
  else {
    // code for IE6, IE5
    xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
  }

  return xmlDoc;
}

有了正确的对象，GET可以被抽象为:

function myGet(url, callback) {
  var xmlDoc = getXmlDoc();

  xmlDoc.open('GET', url, true);

  xmlDoc.onreadystatechange = function() {
    if (xmlDoc.readyState === 4 && xmlDoc.status === 200) {
      callback(xmlDoc);
    }
  }

  xmlDoc.send();
}

并将邮件发送到:

function myPost(url, data, callback) {
  var xmlDoc = getXmlDoc();

  xmlDoc.open('POST', url, true);
  xmlDoc.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  xmlDoc.onreadystatechange = function() {
    if (xmlDoc.readyState === 4 && xmlDoc.status === 200) {
      callback(xmlDoc);
    }
  }

  xmlDoc.send(data);
}

From youMightNotNeedJquery.com + JSON.stringify

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(JSON.stringify(data));

var load_process = false;
function ajaxCall(param, response) {

 if (load_process == true) {
     return;
 }
 else
 { 
  if (param.async == undefined) {
     param.async = true;
 }
 if (param.async == false) {
         load_process = true;
     }
 var xhr;

 xhr = new XMLHttpRequest();

 if (param.type != "GET") {
     xhr.open(param.type, param.url, true);

     if (param.processData != undefined && param.processData == false && param.contentType != undefined && param.contentType == false) {
     }
     else if (param.contentType != undefined || param.contentType == true) {
         xhr.setRequestHeader('Content-Type', param.contentType);
     }
     else {
         xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
     }


 }
 else {
     xhr.open(param.type, param.url + "?" + obj_param(param.data));
 }

 xhr.onprogress = function (loadTime) {
     if (param.progress != undefined) {
         param.progress({ loaded: loadTime.loaded }, "success");
     }
 }
 xhr.ontimeout = function () {
     this.abort();
     param.success("timeout", "timeout");
     load_process = false;
 };

 xhr.onerror = function () {
     param.error(xhr.responseText, "error");
     load_process = false;
 };

 xhr.onload = function () {
    if (xhr.status === 200) {
         if (param.dataType != undefined && param.dataType == "json") {

             param.success(JSON.parse(xhr.responseText), "success");
         }
         else {
             param.success(JSON.stringify(xhr.responseText), "success");
         }
     }
     else if (xhr.status !== 200) {
         param.error(xhr.responseText, "error");

     }
     load_process = false;
 };
 if (param.data != null || param.data != undefined) {
     if (param.processData != undefined && param.processData == false && param.contentType != undefined && param.contentType == false) {
             xhr.send(param.data);

     }
     else {
             xhr.send(obj_param(param.data));

     }
 }
 else {
         xhr.send();

 }
 if (param.timeout != undefined) {
     xhr.timeout = param.timeout;
 }
 else
{
 xhr.timeout = 20000;
}
 this.abort = function (response) {

     if (XMLHttpRequest != null) {
         xhr.abort();
         load_process = false;
         if (response != undefined) {
             response({ status: "success" });
         }
     }

 }
 }
 }

function obj_param(obj) {
var parts = [];
for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
    }
}
return parts.join('&');
}

我的ajax调用

  var my_ajax_call=ajaxCall({
    url: url,
    type: method,
    data: {data:value},
    dataType: 'json',
    async:false,//synchronous request. Default value is true 
    timeout:10000,//default timeout 20000
    progress:function(loadTime,status)
    {
    console.log(loadTime);
     },
    success: function (result, status) {
      console.log(result);
    },
      error :function(result,status)
    {
    console.log(result);
     }
      });

对于中止先前的请求

      my_ajax_call.abort(function(result){
       console.log(result);
       });

xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        alert(this.responseText);
    }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();