如何在Vanilla JS中發送AJAX發布請求並接收回JSON數據？

Question

我已使用JQuery示例發送表單數據並接收回JSON數據。 現在，我想在普通/原始Javascript中做同樣的事情。 這是我的JQuery代碼的示例：

$('.frmSubmitData').on('submit', function(e){
    e.preventDefault();
    var formData = $('#myForm').serialize();
    console.log(formData);

    $.ajax({
        type: 'POST',
        encoding:"UTF-8",
        url: 'Components/myTest.cfc?method=testForm',
        data: formData,
        dataType: 'json'
    }).done(function(obj){
        if(obj.STATUS === 200){
            console.log(obj.FORMDATA);
        }else{
            alert('Error');
        }
    }).fail(function(jqXHR, textStatus, errorThrown){
        alert("Error: "+errorThrown);
    });
});

這是到目前為止我在普通JS中的功能：

function sendForm(){
   var formData = new FormData(document.getElementById('myForm')),
       xhr = new XMLHttpRequest();

    xhr.open('POST', 'Components/myTest.cfc?method=testForm');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
        }else if (xhr.status !== 200) {
            alert('Request failed.  Returned status of ' + xhr.status);
        }
    };
    xhr.send(formData); 
}

我認為我處理JSON數據響應的方式出了問題。 如果有人可以幫助我解決問題，請告訴我。 謝謝。

Answer 1

最好，對於Firefox / Chrome / IE和舊版IE支持，首先確定請求類型：

function ajaxReq() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        alert("Browser does not support XMLHTTP.");
        return false;
    }
}

然后，發送請求：

var xmlhttp = ajaxReq();
var url = "http://random.url.com";
var params = "your post body parameters";
xmlhttp.open("POST", url, true); // set true for async, false for sync request
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(params); // or null, if no parameters are passed

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
       try {
           var obj = JSON.parse(xmlhttp.responseText);

           // do your work here

       } catch (error) {
           throw Error;
       }
    }
}