Post a Form to a PHP File using XMLHTTPRequest/AJAX - php

Question

I am a bit forgetful of PHP, is there a simpler way to post a form using JavaScript AJAX, don't want to add jQuery simply to post an ajax request, without having to pass the parameters?
I want to post the form via Ajax and not have to get the parameters and send them in the call, is this possible? Is there an alternative to the following code...
var mypostrequest=new ajaxRequest()
mypostrequest.onreadystatechange=function(){
if (mypostrequest.readyState==4){
if (mypostrequest.status==200 || window.location.href.indexOf("http")==-1){
document.getElementById("result").innerHTML=mypostrequest.responseText
}
else{
alert("An error has occured making the request")
}
}
}
var namevalue=encodeURIComponent(document.getElementById("name").value)
var agevalue=encodeURIComponent(document.getElementById("age").value)
var parameters="name="+namevalue+"&age="+agevalue
mypostrequest.open("POST", "basicform.php", true)
mypostrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
**mypostrequest.send(parameters)**
It is my intent to use POST instead of GET to hide what is being sent on the URL, this feels strange and it's the same as using a GET. Or am I reading this wrong?

Answer 1

Just don't use jQuery if you only want some plain simple Ajax.
This will do the job just fine:
// Vanilla
var httpRequest = new XMLHttpRequest()
httpRequest.onreadystatechange = function (data) {
// code
}
httpRequest.open('GET', url)
httpRequest.send()
All kudos go to: https://gist.github.com/liamcurry/2597326
Now we could also add some more browser support (IE6 and older: http://caniuse.com/#search=XMLHttpRequest) # all those jQuery heads: jQuery 2 dropped support for IE8 and older so no 'extra support' there.
// creates an XMLHttpRequest instance
function createXMLHttpRequestObject()
{
// xmlHttp will store the reference to the XMLHttpRequest object
var xmlHttp;
// try to instantiate the native XMLHttpRequest object
try
{
// create an XMLHttpRequest object
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
// assume IE6 or older
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
}
catch(e) { }
}
// return the created object or display an error message
if (!xmlHttp)
alert("Error creating the XMLHttpRequest object.");
else
return xmlHttp;
}
All kudos go to: http://www.cristiandarie.ro/asp-ajax/Async.html
This post was sponsored by Google (a really powerfull tool, you type in stuff and it gives more stuff with answers)