如何用内置函数的 JavaScript 替换这个 JQuery Ajax 调用？ [复制]答案

【问题标题】：How can I replace this JQuery Ajax call with JavaScript's builtin functions? [duplicate]如何用内置函数的 JavaScript 替换这个 JQuery Ajax 调用？ [复制]
【发布时间】：2026-02-09 03:30:01
【问题描述】：

可能重复：
javascript ajax request without framework

如何在不使用 JQuery 或任何其他库但仅使用 JavaScript 内置函数的情况下进行下面的 JQuery Ajax 调用？

var input = '{
    "age":100,
    "name":"foo",
    "messages":["msg 1","msg 2","msg 3"],
    "favoriteColor" : "blue",
    "petName" : "Godzilla",
    "IQ" : "QuiteLow"
}';
var endpointAddress = "http://your.server.com/app/service.svc";
var url = endpointAddress + "/FindPerson";
$.ajax({
    type: 'POST',
    url: url,
    contentType: 'application/json',
    data: input,
    success: function(result) {
        alert(JSON.stringify(result));
    }
});

【问题讨论】：

我真的要问...为什么？
MDN 在AJAX 上有一篇精彩的文章，以及 jQuery 和其他库在后台为您做了什么。
你试过什么？甚至 Google 也能找到答案，而无需其他人为您复制/粘贴。

标签： javascript jquery ajax http-post

【解决方案1】：

jQuery 很好地规范了 ajax 调用浏览器之间的所有小怪癖和细微差别。

我建议找到一个独立的 ajax 库，它可以做同样的事情，但没有 jQuery 带来的所有额外开销。以下是一些：

Reqwest
Fermata
Ajax（灵感来自 jquery/zepto）
Micro Ajax

【讨论】：

axios 现在似乎也很有前途

【解决方案2】：

试试这个Example

首先您必须创建window.XMLHttpRequest 或ActiveXObject（用于IE）的对象

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

那么你就可以发送请求了

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

终于可以得到回应了

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

【讨论】：

【解决方案3】：

下面的代码完成了你的 jQuery 版本所做的一切：

使用 JSON 作为 postdata 的 POST 请求
设置 JSON 内容类型标头
提醒字符串化响应

代码：

  var httpRequest;

  function makeRequest(url, input) {
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
      httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } 
      catch (e) {
        try {
          httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch (e) {}
      }
    }

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = function(){
        if (httpRequest.readyState === 4) {
          if (httpRequest.status === 200) {
            alert(JSON.stringify(httpRequest.responseText));
          }
        }
    };

    httpRequest.open('POST', url);
    httpRequest.setRequestHeader('Content-Type', 'application/json');
    httpRequest.send(input);
  }

var input = '{
    "age":100,
    "name":"foo",
    "messages":["msg 1","msg 2","msg 3"],
    "favoriteColor" : "blue",
    "petName" : "Godzilla",
    "IQ" : "QuiteLow"
}';
var endpointAddress = "http://your.server.com/app/service.svc";
var url = endpointAddress + "/FindPerson";
makeRequest(url, input);

部分来自MDN。

【讨论】：

【解决方案4】：

看看Google的第一个答案over here。

【讨论】：