Javascript Ajax Call

I use one Ajax call over and over.

It's quite simple to implement, but its uses are endless.

I've become so dependent on it, that I now use it in nearly every script I write.

I broke this down into 3 sections (The Form, The Javascript, The PHP) .

It's less complicated than it looks, and you needn't understand exactly how it's working to use it. You can copy and paste or simply plug in the information you need.

Without further ado...


The Form:

<form name=oscar method=post>
<input type=text name=bow><br>
<textarea name=resultsz></textarea>
<input type=button value="Show Me What I Typed!" onClick="letsSubmit();return false">
</form>

The Javascript:

<script type="text/javascript">

//Make a function to call from your form "oscar"
function letsSubmit() {

var http = false;

//Check for Internet Explorer
if (navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
http = new XMLHttpRequest();
}

//Get whatever is in the textarea "bow" from the form "oscar"
//Store that in variable "nn" and encode it
var nn=document.oscar.bow.value;
nn = encodeURIComponent(nn);

//Get whatever is in the textfield "resultz" from the form "oscar"
//Store that in variable "mm" and encode it
var mm=document.oscar.resultsz.value;
mm = encodeURIComponent(mm);

//Put in the URL to your PHP file
var url = "YourPathToYourPHPfile.php";

//Contruct your Query String adding the variable "action"
//just for fun
var params = "action=save&vbow=" + nn + "&vresultz=" + mm;

//Using POST, because GET might be limited by Apache Web Server
http.open("POST", url, true);

//Set Headers
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

//Inline function to connect to the server
http.onreadystatechange = function() {
if (http.readyState == 4 && http.status == 200) {
var resp=http.responseText;

//Throw in an alert so you can see the output of your PHP
alert(resp);
}}

//Send it all
http.send(params);
return false;

}
</script>


The PHP (I usually use PERL, but since PHP will parse the form for you, it will make our code shorter.):

<?php
echo("This php file caught your variables... Here's what you typed in the textfield:");
echo($_POST["vbow"]);
echo(" ----- ");
echo("Here's what you typed in the textarea box:");
echo($_POST["vresultz"]);
?>


NOTE: The Javascript variable you created, "resp" will contain the output of your PHP (echo) or PERL (print) statements. You can then use the contents of "resp".

EXAMPLE: If you had passed a comma separated response, such as:

echo("happy, go, lucky");

You could then use Javascript to split that into an array and pass those values through more javascript on the same page.

I pass them quite frequently to Javascript's innerHTML and change the contents of my page.


Working example:

See Example (new window)



Related:
Mozilla.org - Ajax In Depth
Use innerHTML to Change Text on a Page

Previous Article: Javascript Change Background Colors

Next Article: Javascript and CSS Easy Pop Up Help Balloons