如何用JavaScript的内置函数替换这个JQuery Ajax调用?

时间:2012-12-18 13:28:04

标签: javascript jquery ajax http-post

  

可能重复:
  javascript ajax request without framework

如何在不使用JQuery或任何其他库的情况下进行下面的JQuery Ajax调用,而只使用JavaScript内置函数?

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));
    }
});

4 个答案:

答案 0 :(得分:3)

jQuery很好地规范了浏览器之间针对ajax调用的所有小怪癖和数字。

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

答案 1 :(得分: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;
    }
  }

答案 2 :(得分:2)

下面的代码执行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

答案 3 :(得分:0)

查看 Google 的第一个回答over here