Passing data between client and server is pretty straight forward, we use HTML structured forms and AJAX calls to put data up, and echo/print methods to bring it down. The data types transmitted are usually strings and numbers. Unfortunately Javascript and Php don't have built in conventions for you to pass arrays or objects between one another. This article shows you how to pass an array from server to client, and then from client to server. Looking around Google there are a number of other developers who've found ways to do this, but the methods they use tend to limit the number of tiers in the array being passed from client to server, use up unwarranted resources for multiple form items and variables to hold each array item, and limit your overall control of the task. This method focuses on getting your data from an array to a string and back again using 1 hidden input, 1 variable, and allows you to have as many tiers to your array as you have characters to use as delimiters.

Passing an array from Php to Javascript is quite simple, because our array starts in Php, and Php is parsed first by the server. The whole process can be done in one block of code. Loop through the array in Php echoing it into Javascript code, which when parsed by the clients browser will generate a Javascript array.

Say we have a Php array:

 array("model" => "Prophecy Les Paul Ex", "neck" => "Mahogany"),
     "Fender" => array("model" => "Lite Ash Telecaster", "neck" => "Birdseye Maple" ),
     "Washburn" => array("model" => "Idol WI15", "neck" => "Rosewood")
     );
?>

On the page to be served add the following Php which will loop through the array generating the Javascript code to re-create the array on the client-side. You may also want to wrap the generated Javascript in a function if you don't want the array to be generated on page load, or want to be able to refresh/reset the array:

 
var Guitars = new Array();
 

That's it.

Now if you want to pass the array back from Javascript to Php it's a bit more complex. We'll use the Javascript array Guitars that we just created. First we'll need an HTML form:

 
<form method="post" action="/example.php">
</form>
 

Note the use of both id and name. Name will be assigned to the posted variables we'll need to pick up on the server, as for referring to the input in Javascript you could use the getElementByName(); but I find it to be less reliable and harder to keep track of which elements have a name and which have an id. Using id throughout your application is more uniform.

Anyway remember we still have the array Guitars from before, now we need to write the function called by the Submit button:

 
function fn_SubmitForm() {
     arr_Guitars = document.getElementById('arr_Guitars'); //get the element
     arr_Guitars.value = ""; //make sure the value is empty in case the user double clicked
     //loop through the array Guitars concatenating the values into a formatted string
     for(var i in Guitars) {
          arr_Guitars.value += Guitars[i]['model'] + ':' + Guitars[i]['neck'];
          /*
          //Nest this for(){} loop within itself for every tier of your array
          //for each nesting move the delimiters over, if you used a ; next, the
          //nested loop would look like the following:
          for(var ii in Guitars[i]['avail_colours']) {
          arr_Guitars.value += Guitars[i]['avail_colours'][ii]['colour'] + ';';
          }
 
          //to add more array items to this Guitar[i] replace the last delimiter of
          //the output of the last nested loop with that of the tier above it
          arr_Guitars.value = arr_Guitars.value.replace(/;$/,":");
          //or if you're finished with this Guitar[i] remove it
          arr_Guitars.value = arr_Guitars.value.repalce(/;$/,"");
          */
 
          arr_Guitars.value += ',';
          //the preceding line could be added to the end of the first line of the
          //loop if you're only passing a two tiered array
     }
     //remove the last , from the formatted string
     arr_Guitars.value = arr_Guitars.value.replace(/,$/,"");
 
     document.form_Decision.submit();  //submit the form
}
 

Note the formatted string uses the following structure model:neck,model:neck. Also for those new to regular expressions the expression used in the value.replace(); method in plain english means "the comma before the end of the string". Forward slashes mark the beginning and end of the expression, the comma represents a comma and the dollar sign represents the end of the string being analyzed.

Now on the server:

<?php
//get the formatted string
$Guitars = mysql_real_escape_string($_POST[&#039;arr_Guitars&#039;]);
//make sure the array being passed is not empty
if($Guitars != &#039;&#039;){
     //Php&#039;s explode function breaks apart the string into an array of strings based on the delimiter
     //Here we break apart the string into it&#039;s sub-strings <em>model:neck</em>
     $Guitars = explode(",", $Guitars);
 
     //for each exploded array item separate the model and neck values and elaborate the array
     foreach($Guitars as $key=>$row) {
          $row = explode(":",$row);
          $Guitars[$key] = array(
               "model" => $row[0],
               "neck" => $row[1]
               );
     }
}
?>

And that's it, you now have $Guitars again on the server. This method of passing arrays is extensible in that each level of the array can have unlimited values, and the array itself can have unlimited dimensions. For every dimension added to the array you need a new delimiter and you have to run a variation on the second foreach() statement above based on that delimiter.

Easily update any element's inner html with an ajax get request.

Simple get request

$('div_files').load('getfiles.php');

What it does is get the content of getfiles.php and uses it as the innerHtml for the div with id

'div_files'

Slightly more complex get request

var myHTMLRequest = new Request.HTML({url:'getfiles.php', update:'div_files'}).get({'user_id': 25});

In this get request, like the simple one you specify the location of the server side script, which happens to be in the same directory, and you specify the element who's innerHtml you want to update. After the

.get

you send a variable to the server, in this case

user_id

with the value 25.

Note: In the php file you'll need to use a

$_GET['user_id']

instead of

$_POST

Since this is my first post about computer programming I feel like I should start with the basics. There are many different combinations of servers, databases, languages and frameworks that can essentially accomplish the same thing, in sometimes different ways, usually with more or less features and benefits.

Let's start with html. Html is the skeleton, it's responsible for the structure of a web page. Most programmers these days use a form of html called xhtml, which adds the clean orderly feel of xml form, it's more standards compliant and eliminates a lot of errors associated with cross-browser development. You then have css, which styles the html. css is responsible for the layout visually; presentation. These two languages are all you need to create a static page. Now when you get into sites that deliver changing content like blogs, message boards, or online stores, information needs to be dynamically pulled from a database. One of the most versatile and open source databases out there is mysql. In order to communicate with the database a language called php is used. Php is really what makes dynamic sites dynamic. An extremely versatile language used on both small scale; communicating with databases, conditional statements, variables, and functions inter-spliced into web sites, to full scale object oriented programming used in heavy online applications. Finally there's Javascript, a seriously under used and overlooked language that's been around for a long time but only gained popularity in the last few years as the XMLHttpRequest began receiving attention. Javascript is the layer that brings a web page to life, it lets you interact with the html and css of a page without having to reload the page. Ajax, is the name given to the use of the XMLHttpRequest in javascript and it's surrounding functions and effects. It allows a user to interact with the server, like getting information from a database—usually done by communicating with external server-side php files that serve as a go between the javascript and the database, adding a refreshing level of interaction to web sites and applications.

A web site is really a set of instructions. All the languages and code don't actually do anything until someone opens their browser and points to a web page thus executing the code. First the web server(where the site is stored) interprets the php—if there is any, sending the resulting html, css, and javascript to your browser which is then responsible for reading through the code and generating the web site. There are many different browsers out there, most of which generate a web page slightly differently.

Due to the lack of internet language standards over the years and many items which can be interpreted in different ways, different browsers tend to implement those features in different ways. The most infamous case of this inconsistency is Internet Explorer which instead of following the standards in many cases has gone as far as to develop proprietary tags and hacks just to accommodate their blatantly incorrect interpretation of the various languages. I won't get into the shady ethics of exploiting their leading browser market share (due to being packaged and integrated with windows) to create a situation where appealing to the masses(as a programmer) means having to completely redesign a website to work with their ridiculous browser engine, but business is business. Cross platform is another issue that needs attention as operating systems come with different fonts, use different file types and plugins. These issues can break layout and make an RIA dysfunctional or not work at all.

A framework is simply a library of built in functions, classes, and structures that allow a programmer access to higher level functions with far less code as well as simplifying grammar and taking care of security and cross browser compatibility. I'll go into more detail in the future.