Send An Http Request Without XHR In An Event Handler

How to send an http request with either post/get method using javascript as an eventhandler? Thanks! Paul

Solution 1:

Okay, you don't want to use Ajax. You can use an event handler to submit a form!

<a href='#' onclick='cow_submit("zoodle")'>send</a>
<form method='post' id='formie' action='find_some_action.php'>
  <input type='hidden' id='snoutvar' name='snoutvar' value='snout'>
</form>

<script>
function cow_submit(a_var_to_set){
  var plip=document.getElementById('formie');
  var snout=document.getElementById('snoutvar');
  snout.value=a_var_to_set;
  plip.submit();
  }

See https://developer.mozilla.org/en/DOM/form

Solution 2:

use XmlHttpRequest

sample code:

var client = new XMLHttpRequest();
client.onreadystatechange = handler;
client.open("GET", "test.xml");
client.send();

function handler()
{
   // your handler
}

Solution 3:

You can use XMLHttpRequest for sending request from javascript

Sending GET request

var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open("GET", url+"?"+params, true);
http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(null);

Sending POST request

var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open("POST", url, true);

//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(params);

And don't forget to encode parameters using encodeURIComponent for param value encoding in case of user input

e.g.

params="paramName="+encodeURIComponent(paramValue);

Solution 4:

The standard class for doing this is XmlHttpRequest, but it's not universally supported. On some browsers you have to use ActiveXObject("Microsoft.XMLHTTP") instead.

Look into the jQuery system which provides HTTP download (AJAX style) methods regardless of the underlying browser APIs (hence avoiding a lot of the code shown in Tzury's answer).

The jQuery AJAX documentation is at http://docs.jquery.com/Ajax

Solution 5:

You should try to add atring in a hidden field and then call the form.submit() to submit your form into the page define in action.

<script type="text/javascript">
  function doTestFormSubmit(yourString) {
    document.getElementById("myString").value=myString;
    document.getElementById("testForm").submit();
  }
</script>
<form name="testForm" id="testForm" action="yourDesiredPage.php" method="post">
   <input type="hidden" name="myString" id="myString" value=""/>
</form>