Ajax Simple formulaire à l'aide de javascript, pas de jQuery

La suite est beaucoup plus élégant à la solution de l'autre réponse, plus en forme pour les navigateurs modernes.

Mon raisonnement est que si vous avez besoin d'un soutien pour les anciens navigateur vous avez déjà probablement utiliser une librairie comme jQuery, et donc de faire de cette question inutile.

/**
* Takes a form node and sends it over AJAX.
* @param {HTMLFormElement} form - Form node to send
* @param {function} callback - Function to handle onload. 
*                              this variable will be bound correctly.
*/
function ajaxPost (form, callback) {
var url = form.action,
xhr = new XMLHttpRequest();
//This is a bit tricky, [].fn.call(form.elements, ...) allows us to call .fn
//on the form's elements, even though it's not an array. Effectively
//Filtering all of the fields on the form
var params = [].filter.call(form.elements, function(el) {
//Allow only elements that don't have the 'checked' property
//Or those who have it, and it's checked for them.
return typeof(el.checked) === 'undefined' || el.checked;
//Practically, filter out checkboxes/radios which aren't checekd.
})
.filter(function(el) { return !!el.name; }) //Nameless elements die.
.filter(function(el) { return el.disabled; }) //Disabled elements die.
.map(function(el) {
//Map each field into a name=value string, make sure to properly escape!
return encodeURIComponent(el.name) + '=' + encodeURIComponent(el.value);
}).join('&'); //Then join all the strings by &
xhr.open("POST", url);
//Changed from application/x-form-urlencoded to application/x-form-urlencoded
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//.bind ensures that this inside of the function is the XHR object.
xhr.onload = callback.bind(xhr); 
//All preperations are clear, send the request!
xhr.send(params);
}

Ci-dessus est pris en charge dans tous les principaux navigateurs, et IE9 et au-dessus.

Expansion sur Madara réponse: j'ai dû faire quelques modifications pour le faire fonctionner sur Chrome 47.0.2526.80 (pas testé sur autre chose). Espérons que cela peut sauver quelqu'un certain temps.

Cet extrait est une modification de la réponse, avec les modifications suivantes:

• filtre !el.disabled,
• vérifier le type de l'entrée avant d'exclure !checked
• Type de demande à x-www-form-urlencoded

Avec le résultat suivant:

function ajaxSubmit(form, callback) {
var xhr = new XMLHttpRequest();
var params = [].filter.call(form.elements, function (el) {return !(el.type in ['checkbox', 'radio']) || el.checked;})
.filter(function(el) { return !!el.name; }) //Nameless elements die.
.filter(function(el) { return !el.disabled; }) //Disabled elements die.
.map(function(el) {
return encodeURIComponent(el.name) + '=' + encodeURIComponent(el.value);
}).join('&'); //Then join all the strings by &
xhr.open("POST", form.action);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onload = callback.bind(xhr);
xhr.send(params);
};

La stratégie est de serialise le formulaire et envoyer les données à l'aide XHR, puis faire ce que vous voulez avec la réponse. Il y a une bonne série de services publics et de l'aide à Matt Krus de Ajax Boîte À Outils et liées Outils Javascript.

Si vous êtes juste serialising le formulaire posté, puis le suivant fera l'affaire. Il peut facilement être étendu pour inclure d'autres forment des types de contrôle:

var serialiseForm = (function() {
//Checkboxes that have already been dealt with
var cbNames;
//Return the value of a checkbox group if any are checked
//Otherwise return empty string
function getCheckboxValue(cb) {
var buttons = cb.form[cb.name];
if (buttons.length) {
for (var i=0, iLen=buttons.length; i<iLen; i++) {
if (buttons[i].checked) {
return buttons[i].value;
}
}
} else {
if (buttons.checked) {
return buttons.value;
}
}
return '';
}
return function (form) {
var element, elements = form.elements;
var result = [];
var type;
var value = '';
cbNames = {};
for (var i=0, iLen=elements.length; i<iLen; i++) {
element = elements[i];
type = element.type;
//Only named, enabled controls are successful
//Only get radio buttons once
if (element.name && !element.disabled && !(element.name in cbNames)) {
if (type == 'text' || type == 'hidden') {
value = element.value;
} else if (type == 'radio') {
cbNames[element.name] = element.name;
value = getCheckboxValue(element);
}
}
if (value) {
result.push(element.name + '=' + encodeURIComponent(value));
}
value = '';
}
return '?' + result.join('&');
}
}());

J'ai juste pris Coomie la réponse ci-dessus et de le faire fonctionner pour la Radio et des Cases à cocher. Je ne peux pas croire à quel point il est simple et clair que c'est. À quelques exceptions près, je me suis fait à l'aide de cadres.

    var params = "";
var form_elements = form.elements;
for (var i = 0; i < form_elements.length; i++) 
{
switch(form_elements[i].type)
{
case "select-one":
{
value = form_elements[i].options[form_elements[i].selectedIndex].value;
}break;
case "checkbox":
case "radio": 
{
if (!form_elements[i].checked)
{
continue; //we don't want unchecked data
}
value = form_elements[i].value;
}break;
case "text" :
{
value = form_elements[i].value;                
}break;
}
params += encodeURIComponent(form_elements[i].name) + "=" + encodeURIComponent(value) + "&";
}
var xhr = new XMLHttpRequest();    
xhr.open('POST', "/api/some_url");
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200)
{
console.log("xhr.responseText");
}
else
{
console.log("Error! Status: ", xhr.status, "Text:", xhr.responseText);
} 
}
};
console.log(params);
xhr.send(params);