If you’ve ever spent time looking for stuff on the Internet you know that there are a million and a half acronyms out there – PHP, HTML, SQL, etc.  AJAX is an acronym that gets used a lot, but do you actually know what it is?  AJAX stands for Asynchronous JavaScript And XML – that’s an uber-geek definition that really means “I can dynamically change content on a web page based on data I get from somewhere else without having to refresh the page”.

Here’s an example – you know when you’re searching in Google and the little box pops up under the search bar with suggested search terms?  That’s AJAX.  What’s happening behind the scenes is this:

Ajax example google

  1. The page you are on is sending the letters you type in the search box to another page behind the scenes
  2. That page looks up that combination of letters (and others like it) in it’s database of search terms
  3. The page takes the list of similar search terms and sends it back to the page you’re on
  4. The page you are on adds the HTML dropdown list to the page and displays it
  5. When you click on one of the suggestions, it changes the text in the search box

All of this is done without having to refresh the page.  That’s where the Asynchronous part of the AJAX comes in.

So… How do you use AJAX?

My preferred method is to use jQuery (a JavaScript Library) to make the AJAX calls to a PHP page that returns the results in JSONP.  (Yeah, I know – more acronyms right?)

Using the example above, the JavaScript on the search page uses AJAX to get the data from a PHP script. That script returns the data in JSONP (the preferred method of sending data from one domain to another).  The search page takes the returned data and updates the page content dynamically.

So…  How have I actually used it?

Most recently, I used it at the Infusionsoft Implementation Accelerator to help a client update his Infusionsoft Landing Page.  They were using the landing page to get clients to register for a live event that had limited seating (100).  When they registered, they got tagged in Infusionsoft.  As they got closer to the limit of registrants, they wanted the text on the page to change.  For example, when they had less than 10 seats left they wanted it to say “Register today, only 10 seats left!” – then the number would count down as they got more registrants.  So, I built a PHP script that connected to Infusionsoft’s API that counted how many times a tag was applied.  I took 100 minus that number to figure out how many seats were left.  Then, based on the seats left, I returned the messages they wanted.  I then wrote the JavaScript they could embed in an HTML snippet on their landing page that made the AJAX call and injected the HTML (with the text I sent back to it) into the landing page.

So… Can you give me the code to do that?

I’ll have to do that in another post…