如何用JavaScript的內置函數替換此JQuery Ajax調用？

可能重複：
javascript ajax request without framework 如何用JavaScript的內置函數替換此JQuery Ajax調用？

我怎樣才能讓JQuery的Ajax調用下面沒有使用JQuery或任何其他庫，但一個只使用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)); 
    } 
});

來源

2012-12-18 pencilCake

我真的要問爲什麼？ – webnoob

MDN在[AJAX]（https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started）上有精彩的文章，以及jQuery和其他庫在後臺爲您做了些什麼。 –

你有什麼嘗試過？即使** Google **也找不到任何人爲你複製/粘貼它的答案。 –

試試這個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; 
    } 
    }

來源

2012-12-18 13:36:49 Champ

看看谷歌的第一個答案over here。

來源

2012-12-18 13:40:37

下面的代碼所做的一切，你的jQuery版本則：

使用JSON POST請求作爲POSTDATA
設置JSON Content-type頭
警報將字符串響應

代碼：

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。

來源

2012-12-18 13:40:45 MrCode

jQuery做了很好的工作，以正常化所有瀏覽器之間的所有小怪癖和嘮叨，以實現ajax調用。

我建議找一個獨立的ajax庫，可以做同樣的事情，但沒有jQuery帶來的所有額外開銷。這裏有幾個：

Reqwest
Fermata
Ajax（的jQuery /仄啓發）
Micro Ajax

來源

2012-12-18 13:51:17 Johnny

如何用JavaScript的內置函數替換此JQuery Ajax調用？

回答

相關問題