So youre a web developer doing some boring stuff with forms, lets put us in this scenario: You have a Typical Web Form generated with PHP. Also in the form you have some mighty select boxes called
State and
City, so every time you change the
State, the
City select box change. So What?, you will say,that stuff is ajax for sure. But what happens with the inital load of info, i mean how do you fill the select boxes the first time you access the page?
The Form in all his splendor Well there where three options... until now ;)
A) Old School Server Madness: Yeah the standard to choose... in 2001. In this scenario the form is created with PHP, and when the selectbox of
State change, you send a new almost identical page via GET or POST method with a fresh refill of
Cities according to the state you send. This was the old way and i still see that methood going around in some pages. So why not use that?
Well fisrt is slow as hell and well.. AJAX anyone?, but the biggest reason why you should'nt work like that is because the server dont know if what you try to do when you send the POST/GET is getting new cities or sending the complete form filled, so you play with unnecesary hidden variables or check that all the fields are not empty,well just more work for such a simple thing
B)Server Precharge the Data,and Ajax afterward: This scenario is now the standard way to solve this problem, but not the brigthess. Here you fill the
first round of cities with PHP and when the select box change, you do it via AJAX
, so you send the petition, the server create the city DOM (i mean the options tags with duh.. the options), and then Mr Javascript take charge and put the DOM into the selectbox. So what's wrong with this way? Well nothing is wrong but it can be better.Think again little grasshoper, why build the DOM from the server when you can build it on the client.Imagine if you free the server for all the charge of creating DOM, say goodbye to loops and whiles and if statements. If you know what MVC means this can a way to make things better. So why not send the data in a naked stance to the client and let them write his DOM. Well, let me introduce C guy.
C)Ajax Semigod takes the (pre)charge: This is like the next step, like going from an ATARI 2600, to a BlueGene that kick Gasparov Ass. In this scenario (lots of scenarios in my blog) you send the form empty, and you use javascript to create the DOM based on naked data send from the server using eiher XML that is slow, or using json, that is fast. So json it is. Now when the page finish to load the first time, all the select boxes are empty,so you use ajax to fill them. Well here you get a bonus over the other methods, you put some of the work of the server into the clients (da browsers). So the Server just have to send Data in json, in PHP you do something like this:
< ?php echo json_encode($array_of_cities) ?>
and that's it, you get a jsonized var that you can send to the client.He will do the rest. But wait, isnt this alot of unnecesary calls to the server? I mean that can be done faster if the server draw the first selects boxes and when we need a fresh supplies of cities we ajax it until fullfitness?. Yes but you are creating a new deja vu here, the client and the server are doing the same thing. So was wondering a few days ago a better way todo it, so here it is the:
D)Json Precharge Overdose: Well i guess there are alots of smartguys that have discover this method but , i never see any reference to this so here it is. Its a fusion from B and C.
The first load of the form, you send the page selectboxes unfilled but you also print the PHP cities data (naked data), and make it a global variable in javascript. How ydo you do that?
Well in PHP you do something like this:
< ?php echo "var naked_data= eval('$array_of_cities') "?>
And then when the page load, you create with javascript the options DOM for the city select box using the global variable printed with PHP. The next time you call for fresh data, you just ask for the same fucntion that get you the json and recreate the selectbox DOM again using javascript. If you think in a MVC way, you are just effectively separating the view from the controller. So now you free the server forever of building the page DOM and you dont get unnecesary AJAX call to the server. But this method does have some problems:
- The fact that youre using globals variablesin javascript can make your life a living hell in large projects. But not so if you use a javascript framework like jquery, or use object in javascript, so if you have some order in your code, this can help alot.
- Using PHP to print javascript code, thats not good, but remember that youre not creating all the javascript in the page. You re just sending data from the server to the client. so the client can work with it.
So next post in my blog wil be putting this topractice usign jquery and php, stay tune
