Tag: PHP

Categories
PHP Programming

PHP Dark Arts: Semaphores

Note:  The full example code can be downloaded here.

Dijkstra contributed many important things to computer science, and among them was the semaphore.  A semaphore is a protected variable or abstract data type that is used for controlling access to some resource.  Semaphores can be used to control access to almost anything.  For example, lets say that I have multiple instances of a program running and this program counts how many rows are in table ‘X’ every 15 seconds.  We don’t want the program instances clobbering the database all at once, so we use a semaphore to control the access (I realize this is a silly idea, but it’s to illustrate a point).  Before a program instance can access the database, it must first acquire the semaphore.  Once acquired, it may run it’s query, and then release the semaphore so another program instance can use it.  In this way, access to the database is strictly controlled.

Semaphores have drawbacks of course.  The most obvious is that it’s easy to enter a state of deadlock.  Let’s say in the previous example, one program instance never releases the semaphore.  What happens then?  Everything comes to a screeching halt.  That’s why it’s important to be extremely careful when using a semaphore.  If you acquire it, be sure to release it.

PHP’s Semaphore Implementation

Using semaphores in PHP is actually very straight forward.  There are only 4 semaphore functions:

  • sem_acquire() – Attempt to acquire control of a semaphore.
  • sem_get() – Creates (or gets if already present) a semaphore.
  • sem_release() – Releases the a semaphore if it is already acquired.
  • sem_remove() – Removes (deletes) a semaphore.

So how do they all work together?  First, you call sem_get() to fetch the identifier for the semaphore.  After that, one of your processes will call sem_acquire() to try and acquire the semaphore.  If it’s currently unavailable, sem_acquire() will block until the semaphore is released by another process.  Once the semaphore is acquired, you may access the resource that you are controlling with it.  After you are done with the resource, call sem_release() so that another process can acquire the semaphore.  When all is said and done, and you’ve made sure that none of your processes require the semaphore anymore, you can call sem_remove() to remove the semaphore completely.

Getting and Removing

The first step in using a semaphore is calling sem_get().

1
2
3
4
5
6

$key = 123321;
$maxAcquire = 1;
$permissions =0666;
$autoRelease = 1;
 
$semaphore = sem_get($key, $maxAcquire, $permissions, $autoRelease);

The parameters for this function are pretty straight forward, but here is a break down just in case.

  • $key – A unique integer so that the semaphore is easily identifiable.
  • $maxAcquire – How many process can acquire the semaphore at once?
  • $permissions – Unix style permissions on the semaphore.
  • $autoRelease – Do you want the semaphore to release automatically if the request shuts down?

Each process needs to call sem_get() using the same parameters, otherwise it will get a different semaphore.  And if you want to remove your semaphore?  Just make sure you have a valid semaphore resource and then call sem_remove().

1
2
3
4
5

if(sem_remove($semaphore)) {
     echo "Semaphore removed. \n";
} else {
     echo "Failed to remove semaphore. \n";
}

Acquiring and Releasing

Once you’ve created (or retrieved) a semaphore, you can then start using it by calling sem_acquire().  Both sem_acquire() and sem_release() only take one parameter: a semaphore resource.

1
2
3
4

$semaphore = sem_get($key, $maxAcquire, $permissions, $autoRelease);
sem_acquire($semaphore);  //blocking
echo "hello world!";
sem_release($semaphore);

Now that you understand how to use PHP’s implementation of semaphores, we should try them out fully.

Controlling Access to Standard Input (STDIN) Using Semaphores

When learning about semaphores, a classic example is to control access to standard input.  There honestly isn’t much to the example, so I’ll just give you a quick breakdown of what happens and then let the code do the talking.

  1. Set the semaphore properties.
  2. Get the semaphore.
  3. Start a loop, and try to acquire the semaphore.
  4. Once acquired, access standard input.
  5. Once input is received store it, then release the semaphore
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

//Semaphore properties
$key = 123456;
$max = 1;
$permissions = 0666;
$autoRelease = 1;
 
//Open a new or get an existing semaphore
$semaphore = sem_get($key, $max, $permissions, $autoRelease);
if(!$semaphore) {
     echo "Failed on sem_get().\n";
     exit;
}
 
//Try to aquire the semaphore.
for($i = 0; $i < 2; $i++) {
     echo "\nAttempting to acquire semaphore...\n";
     sem_acquire($semaphore);
 
     echo "Aquired.\n";
     echo "Enter some text: ";
     $handler = fopen("php://stdin", "r");
     $text = fgets($handler);
 
     fclose($handler);
     sem_release($semaphore);
 
     echo "Got: $text \n";
}

Running the Example


First, you should download the example here.  After that open up two terminal windows and run the following in each:

{code} php semaphore.php {/code}

Did you like this article?  You’ll probably like these other PHP Dark Arts articles too.

Categories
PHP Programming

PHP Dark Arts: Shared Memory Segments (IPC)

Note: The full source code for the examples can be downloaded here.

In my previous articles on using PHP for multi-process programming, we kept it very simple.  By simple, I mean we didn’t have any inter-process communication (IPC).  IPC is a set of techniques for the exchange of data amongst separate processes and/or threads.  There are many different ways to set up IPC, such as files, signals, sockets, pipes, semaphores, shared memory, and message passing.  This time around, we’re going to cover PHP’s implementation of shared memory segments.

So what does it mean to share a memory segment?  It means that the program will create a section of memory that can be accessed by other processes on the system.  Normally this isn’t the case, since most processes have mutually exclusive address spaces.  The benefit of using a shared memory segment is that communication between processes is extremely fast.  The main downside is that processes must be running on the same machine (and same processor in some cases), where as other types of IPC can be used over a network.

Creating a Shared Memory Segment

In order to share memory between processes, you first need to create the shared memory segment.  This is accomplished with PHP’s shm_attach() function.  The shm_attach() function takes 3 parameters.

  • $key (int) – This is an integer value that identifies your shared memory segment.  If you used 123456 for this value in one process, you would need to use the same key in another process to access the shared memory segment.
  • $memsize (int) –  This is the amount of memory (in bytes) you would like to share.  Deciding how large this should be is sort of a pain.  The easiest way it to simply pick an arbitrary amount and make sure anything you try to share isn’t larger then that.  The best way would be to know the maximum size of data you will need to share and set it to that value.
  • $perm (int) – The permissions for the shared memory segment.  These permissions follow typical Unix style permissions.  The default is 0666 which means that everyone can read from and write to this memory segment.

On success, shm_attach() returns an identifier of the shared memory segment.

1
2
3
4
5
6
7

//Define shared memory segment properties.
$key = "987654";
$permissions = 0666;
$size = 1024;
 
//Create or open the shared memory segment.
$segment = shm_attach($key, $size, $permissions);

Using Your Shared Memory Segment

Now that you have created a shared memory segment, you’ll obviously want to try it out.  Using it is pretty straight forward with the shm_put_var() and shm_get_var() functions.  They work as you might expect them to.  shm_put_var() has 3 parameters:

  • The shared memory segment key.
  • An integer used basically as an index on the data (making it easier to retrieve).
  • Some variable.  This can be anything so long as it’s smaller than the size you’ve defined the memory segment to be.

The shm_get_var() function is very similar.  It only takes 2 parameters, one of which is the key for the shared memory segment, and the other is the integer value (index) associated with the stored data.  Now that you know what the functions do, let’s put it all together in a little program.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?php
//Check the command line arguments
if(sizeof($argv) < 2) {
     echo  "Usage: php shared_memory.php <send|get|delete> <integer identifier> <value>\n";
     exit;
}
 
//Define shared memory segment properties.
$key = "987654";
$permissions = 0666;
$size = 1024;
 
//Create or open the shared memory segment.
$segment = shm_attach($key, $size, $permissions);
 
//Handle operations for the segment.
switch($argv[1]) {
     case "send":
          shm_put_var($segment, $argv[2], $argv[3]);
          echo "Message sent to shared memory segment.\n";
          break;
     case "get":
          $data = shm_get_var($segment, $argv[2]);
          echo "Received data: {$data}\n";
          break;
     case "delete":
          shm_remove($segment);
          echo "Shared memory segment released.\n";
          break;
}
?>

A quick glance at the code reveals that I’m making this program a little interactive for easier use.  All it does is check to make sure your command line arguments are correct, creates / opens the shared memory segment, and then performs the given operation on the segment.  An example:

<->php shared_memory.php
Usage: php shared_memory.php send|get|delete integer identifier value;
<->php shared_memory.php send 1 "Hello.  This is the shared memory segment."
Message sent to shared memory segment.
<->php shared_memory.php get 1
Received data: Hello.  This is the shared memory segment.
<->php shared_memory.php delete
Shared memory segment content deleted.

You’ll also notice that at the end I delete the contents of the shared memory segment.  It’s important to understand the difference between detaching and deleting(removing) here.  When you detach the shared memory segment, it’s possible for your data to still exist in memory until it’s overwritten by something else.  This poses a big security threat, so you should always delete(remove) the data first.  So how do we release the memory?  By using the shm_detach() function.

<->
//Define shared memory segment properties.
$key = “987654”;
$permissions = 0666;
$size = 1024;

//Create or open the shared memory segment.
$segment = shm_attach($key, $size, $permissions);

//Detach the memory segment.
shm_detach($segment);

Download

Now that your done, check out the full source code for the examples here.  In the near future I hope to have a virtual machine available for download, so users who don’t want to mess with configuration can just start it up and go.

Categories
PHP Programming

PHP Dark Arts: Multi-Processing (Part 2)

Note: Part 1 of this series can be found here.  Also, after feedback from the development community, this series was renamed to “Multi-Processing” instead of “Multi-Threading”.   To most people the distinction probably doesn’t matter, but this title is more accurate.

Priority

The priority of a process is a ranking given to it. The higher priority the process is given, the more CPU time it will get.  How much time on the processor each process gets is determined by the scheduling algorithm that is used, but in general, higher priority processes will get more CPU time.  All this begs the question, what is process X’s priority and how can I set it?

When compiled with the –enable-pctl option, PHP gives you access to the pcntl_getpriority() function.  This function is, well, obvious.  It gets the priority of the current process, or if a PID (Process ID) is specified, that process instead.

1
2
3
4
5

$priority = pcntl_getpriority();
echo "This process priority is: {$priority}.";
 
$priority = pcntl_getpriority(1234);
echo "Process 1234's priority is: {$priority}.";

So that one’s pretty easy. Not much explaining to do there. But what about setting process priority? For that, we use pcntl_setpriority().

1
2
3
4
5
6
7
8
9
10
11

if(pcntl_setpriority(-15)) {
     echo "Priority set successfully.";
} else {
     echo "Failed to set priority.";
}
 
if(pcntl_setpriority(15, 1234)) {
     echo "Priority of process 1234 set successfully.";
} else {
     echo "Failed to set priority of process 1234.";
}

The first parameter of this function is the priority.  In most cases, this value can range between -20 and 20. The lower the number, the higher priority your process receives (counter-intuitive right?). These numbers can change though, so you may want to view the man page for your operating system’s setpriority(2) function.  The second parameter is the process id.  If left blank, it sets the current processes priority, otherwise it tries to set the priority of the PID that is given.

Signals

A signal is a limited form of inter-process communication used in Unix systems.  Believe it or not, you probably use signals often when you are using a Linux box (CTRL+C anyone?).  Signals can be a problem when you’re doing important work that you don’t want interrupted, so PHP allows us to install signal handlers so that we can handle these situations gracefully.  To install a custom signal handler, you use the pcntl_signal() function.  Calling this function isn’t as straight-forward as the others though.  The first parameter is the signal which you are intercepting, which is an integer.  Most of the signals are defined as constants(here), so that’s what we’ll be using.  The second parameter is a callback function to handle the signal processing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

declare(ticks = 1);
function signal_callback($signalNumber) {
     switch($signalNumber) {
          case SIGTERM:
               echo "Handling shutdown tasks.";
               exit;
               break;
          case SIGHUP:
               echo "Handling restart stuff.";
               break;
          default:
              echo "Handling all other signals.";
     }
}
pcntl_signal(SIGTERM, "signal_callback");
pcntl_signal(SIGHUP, "signal_callback");

The above code first declares our callback function, then has a simple switch statement to handle the different signals.  After the function is constructed, we just call pcntl_signal() to set up the handler.  But why would you want to handle signals in the first place?  There are many reasons, but a good example would be financial data.  Wouldn’t you want to make sure a transaction goes all the way through before the system dies?  Or perhaps you want to send a message to someone if all transactions couldn’t be completed?  It’s situations like these where handling signals makes sense.

Now that we know how to handle signals, there are all sorts of neat functions we can play with.  If you interested in learning more, I suggest you check out the PHP documentation on the subject.

Categories
PHP Programming

PHP Dark Arts: Multi-Processing (Part 1)

Note:  Part 2 of this post can be found here.

Of all the glorious programming languages in existence, you’ve chosen to work with PHP.  Okay, maybe you were forced to, but that doesn’t mean you can’t have fun right?  Hmm, fun… What’s fun?  Threading, race conditions, and deadlocks.  Sounds like loads of fun!  But alas, PHP doesn’t have functionality to cover this.  True, but the host operating system does.  We can just fork processes manually like in the good ‘ole days and then ride off into the sunset.  But we shouldn’t do that, it’s wrong.  It’s taking advantage of PHP.  Bah! We’re going to do it anyways.  And FOR THE LOVE OF GOD, do not do this in production code.  If you need multi-threading, use a different language.

Process Control

One of those things that you are bound to learn about if you go through a computer science degree is process control.  Process control usually comes up slowly and then bites you in the ass REALLY hard during operating systems courses.  Thinking about race conditions, deadlocks, and collisions are all part of the game.  And guess what?  When you are writing multi-threaded programs this is exactly the type of thing you will encounter.

When thinking about process control, people often cite some form of a producer-consumer problem.  You have one process (thread) producing information, and another thread consuming it.  For instance, a producer may spit out a stream of integers, and the consumer will, well, consume them.  However, the consumer will terminate itself when it hits a non-integer character.  That’s called out exit condition, and it’s very important.  You have to always remember to have some sort of fool-proof exit condition, otherwise the process is going to hang and go zombie on your.  If your program get’s executed a few thousand times a day, you get a few thousand zombies (process zombie apocalypse!).  So, the import part here is to remember that you need to have exit condtions.

Getting Started

The first step into multi-threading in PHP is making sure your build is compiled with the –enable-pcntl flag set.  If that’s not set, you’re dead in the water.  Otherwise, we can take a look at a simple example.

1
2
3
4
5
6

$processID = pcntl_fork();
if($processID) {
     echo "I'm in the parent process!";
} else {
     echo "I'm in the child process!";
}

Now, a quick explanation.  The pcntl_fork() function takes the current running process and makes a copy of it.  Everything (for practical purposes) is copied into this new child process except the process id(pid) which is changed to something new.  This is where things get a bit weird.  When pcntl_fork() executes, the pid of the child process is returned to the parents thread of execution.  A value of 0(zero) is returned to the child process’ thread of execution.  Since you can differentiate between threads of execution, you can make them do different things with a simple if statement like above.  So what does this program print?

I'm in the parent process!
I'm in the child process!

or

I'm in the child process!
I'm in the parent process!

It can actually go either way here.  It depends entirely on how your operating system decided to schedule the processes.  But remember, the child process is an exact (not entirely true, but let’s go with it) copy of the parent process.  So what happens if we change the code a bit.

1
2
3
4
5
6
7

$processID = pcntl_fork();
if($processID) {
     echo "I'm in the parent process!";
} else {
     echo "I'm in the child process!";
}
echo "End of the line folks.";

Since the last echo statement exists in both parent and child processes, you’ll get:

I'm in the parent process!
End of the line folks.
I'm in the child process!
End of the line folks.

Waiting for the Child

One of the problems that you run in to with writing multi-threaded programs is that the child process can finish before the parent, or the parent can finish before the child.  You just never really know.  So you need a way to wait for processes to finish.  Lucky for us, PHP at least provides this functionality for us.

1
2
3
4
5
6
7

$pid=pcntl_fork();
if($pid) {
     pctnl_waitpid($pid,$status,WUNTRACED);
     echo "In parent process!";
} else {
     echo "In child process!";
}

By using the pcntl_waitpid() function, we can force the parent process to wait for the child process to finish executing.  This is handy for if you have a critical procedure that your child process must complete before the parent can continue.  In our case, the output will always be:

In child process!
In parent process!

Next Time…

That’s all for now, but soon I’ll have The 2nd (and last) part of this article up for your enjoyment.  In that part, we’ll cover some more advanced notions like getting/setting priority, setting alarms, and signal processing.   You should follow me on Twitter and/or become a fan on Facebook to find out when this exciting(?) article comes out.

Categories
Wordpress Development

WordPress Data Validation Functions

As a developer of WordPress plugins or themes, you need to be aware of and use data validation.  What is data validation you ask?  It’s when you make sure that the data you fetched (POST, GET, database call, external source) is the type of data that you expected.  For instance, let’s say you have a user enter a number between 1-10.  They enter the letter ‘A’.  The process of determining whether the input is an integer between 1-10 is data validation.

So what kind of data functionality does WordPress (and PHP in general) offer?  Lots!

  • intval($value) – This will cast any value as an integer.  Particularly useful for casting floating point numbers.
  • absint($value) – Returns the absolute value of a number.  For those of you with no math background, that means it will return a whole number given any floating point number.  (Ex.  absint(3.3) = 3)
  • wp_kses() – This function will strip a string of any HTML tags that are not allowed.  It also makes sure that any HTML entities that are in the string are normal.
  • esc_html($string) – This will escape any HTML characters in a string.  This is handy for storing blogs of HTML in a database.
  • esc_js($string) – Escapes any javascript that it is given.  Mostly this means it escapes single and double quotes.
  • urlencode($string) – This function encodes any string you put in to it as a url-safe value.
  • $wpdb->prepare() – This function is used prepare SQL statements for database inserts.  I wrote an article about using the WPDB class with your plugin that you should check out.
  • validate_file(..) – This  is useful to validate that a file exists, and also to help prevent directory traversal attacks.
  • wp_redirect() – This is the safest was to do redirects.  Instead of using header(Location: ..), this will only allow redirects to white listed domains instead domains.
  • balanceTags($string) – If you’re allowing your users to comment on something with html tags, this function will try to make sure that the tags are balanced.
  • is_email($email) – Validates whether an email address is valid or not.

As you can see, WordPress (and PHP) include a nice array of data validation functions.  Make sure you use them as often as possible, because a large number of web based attacks could be prevented if people validated data.

Categories
PHP Programming

Search PDFs With PHP, MySQL, and PdfToText

Being able to search a PDF is a very useful feature on any web site.  The problem is that there aren’t many languages that give you the tools to do so right out of the box.  PHP is no exception to this.  If you want to search PDF files you’ll need some third-party tools and a little bit of ingenuity.

Pre-requisites

You’ll server will need to have the following configuration.

  • PHP (>=4)
  • MySQL (>=4)
  • Linux (Distro of your choice)

Step 1:  Download PdfToText

PdfToText is a program written in C that will quickly convert the contents of a PDF to text.  We’re going to use it just for that purpose.  You download the file at http://www.foolabs.com/xpdf/download.html.  Once you have downloaded the file, go ahead and place it somewhere in your web site directory and extract it (on most linux systems “tar -xzf [file]” will do the trick).  Once it’s unzipped, you’ll see a program called “pdftotext”, which is what we’re after.

Step 2:  Convert the PDF to Text

As an astute reader, you’ve probably noticed by now that PdfToText is not a PHP file.  So how are we going to use it?  Well, we’re going to use the “backtick” (the ~ [tilda] key) operator.

function convert_to_text($pdf) {
     $output = `./pdftotext {$pdf} temp.txt`;
     return $output
}

The backtick operator will execute any command on the command line, trap it’s output, and return it to the caller.  It’s worth noting that the backtick operator will only return output from standard out.

This is probably the hardest part of this tutorial.  There may be problems with write permissions on the directory, or ownership problems, but if you can get it to work, you’re all set.

Step 3:  Read the Text

Now that the PDF has been converted to a text file, we need to get that information back in to PHP.  To do that, we use the file_get_contents functions.

function get_text() {
     $text = file_get_contents("temp.txt");
     return $text;
}

Step 4:  Store the Data

This part of the tutorial assumes 2 things.  1) That you have a table named pdf_data, and 2) That the table has a column called pdf_contents that is full-text searchable (If you need help setting this sort of thing up, leave a comment).

function store_data() {
     $text = mysql_real_escape_string(get_text());
     $query = "INSERT INTO pdf_data (pdf_contents) VALUES ('{$text}')";
     mysql_query($query);
}

Step 5:  Search the Data

The final step is actually searching the data.  To do that, we’ll use the full-text searching capability of MySQL.

function search_data($term) {
     $term = mysql_real_escape_string($term);
     $query = "SELECT * FROM pdf_data MATCH(pdf_contents) AGAINST ('$term')";
     $result = mysql_query($query);
     while($row = mysql_fetch_array($result)) {
          //Do stuff with returned data.
     }
}

Where “Do stuff with returned data” is, you can do whatever you want.  MySQL is going to return the rows to you in order of relevance (descending).  The most relevant result will be first, followed by the second most, and third most, and so on.

Other Notes

  • PdfToText may or may not be the best way to do this, but it is one of the simplest.  There are a handful of libraries out there for creating PDFs in PHP, but surprisingly few for something as common as reading a PDF.
  • There are binaries and source files available for PdfToText on their web site(here).
  • This tutorial could be expanded a lot.  If you have questions or requests, please ask!
Categories
PHP Programming Wordpress Development

$_SERVER Variables Are Unsafe For WordPress Plugins

Sometimes a plugin developer might want to submit a form back to itself.  Or perhaps they want to link back to the current page, except with a variable in the query string.  Often enough, you’ll seem them do it this way.

1

<form method=POST action='<=$_SERVER['PHP_SELF']?>'>

or

1
2
3
4
5
6
7

<a href='<?=$_SERVER['REQUEST_URI']?>'>Click Here</a>{/code}
 
The problem with this code is that it's easily exploitable.  Remember, the behavior for REQUEST_URI and PHP_SELF are to take whatever the entrance URL was and return it to the caller.  So how can this effect your pages?  Since the user can append anything that they'd like to the initial entrance URL, it becomes the vector for attack.
 
So how can you submit forms and links back to themselves without these variables?  For forms, just leave the action blank or don't include it at all.
 
<pre lang="html4strict"><form method=POST>
<form method=POST action=''>

And for links, using the # sign will link back to your current page.

<a href='#'>Click here!</a>

If a plugin developer absolutely MUST use server variables, just make sure to escape them accordingly.   Use the WordPress function esc_url().

1

<a href='<?=esc_url($_SERVER['PHP_SELF']?>'>Click Me!</a>

In reality, it’s bad practice to use the PHP $_SERVER variables at all.  So try to avoid doing it at all costs.

Categories
Other Programming PHP Programming

Form Ajax : How to Create and Submit a Form Using Ajax

For the longest time, web developers were stuck submitting their forms in the normal way: Click a button, go to a processing page, redirect back.  However, now it is possible to submit a form without ever leaving the page with Ajax.  Ajax stands for Asynchronous JavaScript, which as stated before, basically means you can submit a form without ever leaving the page.

So how do you use form Ajax? First of all, we’re going use a JavaScript library called jQuery.  Don’t be scared of it though, jQuery makes JavaScript easy.  What jQuery allows us to do is use form Ajax without having to muck around with all the tedious JavaScript details (which trust me, is a GOOD thing).   Without further a due, here is how to submit a form with Ajax.

To download the full working code for this, click here.

Form Ajax Step 1:  The HTML Page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<html>
<head>
<title>Form Ajax Tutorial</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
//After the document has loaded, it adds the following handlers
//to the web page.
$(document).ready(function() {
//When the form with id="myform" is submitted...
$("#myform").submit(function() {
     //Send the serialized data to formProcessor.php.
     $.post("formProcessor.php", $("#myform").serialize(),
     //Take our repsonse, and replace whatever is in the "formResponse"
     //div with it.
    function(data) {
          $("#formResponse").html(data);
     }
);
return false;
});
});
</script>
<head>
<body>
<h2&gt;Form Ajax Tutorial</h2>
<p&gt; Fill out some information &lt;/p>
<form id="myform">
<input type="text" name="firstName" value="" /><br />
<input type="text" name="lastName" value="" /><br />
<input type="submit" name="submit" value="Submit" />
</form>
<div id="formResponse">
</div>
</body>
</html>

For anyone who is used to HTML programming, this should all look very familiar.  The only confusing part is the JavaScript, but I’ll explain that here.  The first bit just includes the jQuery library.  This is crucial for form ajax to work.  The rest of the function is explained below:

  • $(document).ready() – This will add handlers to your web page only after the entire page has loaded.
  • $().submit() – This will catch the click of the submit button so that it doesn’t submit the form the normal way, but the Ajax way instead.
  • $().post() – This is the part that sends out data to the processing file.  It also has a callback function that will modify our page to contain data that the processing file sent back.
  • $().serialize() – Takes our form data and puts it into an easy to parse format.

Form Ajax Step 2:  The Processing Page

1
2
3
4
5
6
7
8
9
10
11

<?php
//Get the information that was sent from the form.
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
 
//Get the unix time stamp.
$unixTimeStamp = time();
 
//Print output for out web page to catch.
echo "Hello $firstName $lastName.  The local unix time is <b>$unixTimeStamp</b>";
?>

The processing page is very important for making form ajax work correctly.  What this file does is catch the data sent by the form, and then prints out some information.  The form is waiting for this information, and then will add it to your page.  Note:  This file is a .PHP file.  You need to be running a web server (or have access to one) that can process php files.

Form Ajax Step 3:  You’re Done!

Form Ajax used to be pretty difficult, but now that their are JavaScript libraries like jQuery, MooTools, and Scriptaculous, it’s easier than ever.  To download the full working code for this example, click here.