Ajax Tutorial : Ajax Help for newbies

AJAX Generic Form Parser - With Validation:

In this tutorial I’ll show you a simple method to pass any HTML form through AJAX without the need to hard code all form fields into the JavaScript or Server Side Script. Using this simple piece of JavaScript you can reuse it as is with any form, saving a lot of time. I’ve even added basic validation to certain form element types (which would be expected).

Okay, straight to the main JS code.

var req = createXMLHttpRequest();

function createXMLHttpRequest() {
 var ua;
 if(window.XMLHttpRequest) {
 try {
  ua = new XMLHttpRequest();
 } catch(e) {
  ua = false;
 }
 } else if(window.ActiveXObject) {
  try {
	ua = new ActiveXObject(”Microsoft.XMLHTTP”);
  } catch(e) {
	ua = false;
  }
 }
return ua;
}

function sendRequest(frm, file) {
 var rnd982g = Math.random();
 var str = “”;
 if(str = getForm(frm)) {
  req.open(’GET’, file+’?'+str+’&rnd982g=’+rnd982g);
  req.onreadystatechange = handleResponse;
  req.send(null);
 }
 return false;
}

function handleResponse() {
 if(req.readyState == 4){
  var response = req.responseText;
  document.getElementById(”results”).innerHTML = response;
 }
}

function getForm(fobj) {
 var str = “”;
 var ft = “”;
 var fv = “”;
 var fn = “”;
 var els = “”;
 for(var i = 0;i < fobj.elements.length;i++) {
  els = fobj.elements[i];
  ft = els.title;
  fv = els.value;
  fn = els.name;
 switch(els.type) {
  case "text":
  case "hidden":
  case "password":
  case "textarea":
  // is it a required field?
  if(encodeURI(ft) == "required" && encodeURI(fv).length < 1) {
	alert('''+fn+'' is a required field, please complete.');
	els.focus();
	return false;
  }
  str += fn + "=" + encodeURI(fv) + "&";
  break; 

  case "checkbox":
  case "radio":
   if(els.checked) str += fn + "=" + encodeURI(fv) + "&";
  break;	

  case "select-one":
	str += fn + "=" +
	els.options[els.selectedIndex].value + "&";
  break;
  } // switch
 } // for
 str = str.substr(0,(str.length - 1));
 return str;
}

The JavaScript code above is split into 4 functions, here is an overview of what each function does.

createXMLHttpRequest() - This is the function which will establish the AJAX connection object, this is called as soon as the JS file is loaded.

sendRequest() - This function is the one which is called when the form is submitted. This function requires (passed in) the ‘Form Object’ and the ‘File Name’ of the script which will receive the form data. When this function has been called, it takes the form object and passes it to the JS function getForm() which in turn parses the whole form extracting all the data. sendRequest() then takes the open AJAX connection and passes all the data to the PHP file form processing. Finally when the request from the PHP server script is returned, it writes out the reply to an element on the screen with the div ID ‘results’.

getForm() - This is the magic, this function reads through the whole form and extracts the field data before returning it back to sendRequest(). It handles radio, text, password, textarea, select and checkbox field types. It even looks for validation requests on text, password and textarea fields (which is enabled by using title=”required” in the form element).

Simple :)

Next is a very simple form with a mixture of field types and validation requests (nothing fancy here). Also included at the bottom is the div which prints out the results to the browser.

Option One:
 
Option Two:
 
Option Three:
 
Text One*:
 
Text Two:
 






<div id="results" />

As you can see the form trigger which calls the AJAX actions is set in the button using the onClick method. Also note I’ve added title=”required” to the ‘textOne’ field - this means the user will not be able to submit the form unless this field contains a value.

Finally here is a very stripped down Server script in PHP which takes the form values and returns them formatted back to the JS (you could do anything with the data at this stage!).

process.php

if(isset($_GET[’rnd982g’])) {
 foreach($_GET as $a => $b) {
 if($a == “rnd982g”) {
  // ignore this random number
  // only used to prevent browser caching
 } else {
  echo “<b>$a</b>: “.stripslashes(htmlentities($b)).” “;
 } // if
 } //foreach
die;
}

You could easily change the above to generate an email or add the form data to a database, the above example will echo out the results which are passed back to the div tag below the form.

There you have it, short and sweet (I hope) - I’ve intentionally kept the example scripts to a minumum but with still enough to be useful. Please feel free to take this and mess around with it.

Have Fun!!

Ajax and PHP - Building Responsive Web Applications

Packt Publishing have been kind enough to send me an copy of their Ajax and PHP book. I now have dedicated place for this book on my work desk, and expect it’ll come in extremely handy when building my next Ajaxed and PHP based application.

The book is aimed mainly at developers who have some HTML, PHP and JavaScript knowledge - but you do not need to be an expert in any of these by any standard. The book starts off by explaining exactly what Ajax is and how it works (contains many descriptive diagrams to make this clear), also covers the basics of how HTTP and HTML work to make it more complete. Don’t worry, it covers these explanations perfectly - not to in depth and not to sparse, in my opinion they have got the concentration perfect.

The book is split into 10 Chapters, covering the most common uses of Ajax (DOM, XML, Form Validation, Chatting, Charting, RSS , Drag and Drop etc.)

Before I give a run down of each chapter I would just like to say this. I’ve read many computer programming books over the years, many great and some not so good. In comparison, I’d put this book in my top 5. My rating for this book is 9 out of 10.

More details on Ajax and PHP

Paperback: 275 pages
Release date: March 2006
ISBN: 1904811825
Authors: Cristian Darie, Bogdan Brinzarea, Filip Chereches-Tosa and Mihai Bucica

AJAX and PHP: Building Responsive Web Applications is the most practical and efficient resource a reader can get to enter the exciting world of AJAX. This book will teach you how to create faster, lighter, better web applications by using the AJAX ingredients technologies to their full potential.

In Detail
Assuming a basic knowledge of PHP, XML, JavaScript and MySQL, this book will help you understand how the heart of AJAX beats and how the constituent technologies work together. After teaching the foundations, the book will walk you through numerous real-world case studies covering tasks you’ll be likely to need for your own applications:

• Server-enabled form-validation page
• Online chat collaboration tool
• Customized type-ahead text entry solution
• Real-time charting using SVG
• Database-enabled, editable and customizable data grid
• RSS aggregator application
• A server-managed sortable list with drag&drop support using the script.aculo.us
  JavaScript toolkit

The appendices guide you through installing your working environment, using powerful tools that enable debugging, improving, and profiling your code, working with XSLT and XPath.

What you will learn from this book

Chapter 1: AJAX and The Future Of Web Applications is an initial incursion into the world of AJAX and the vast possibilities it opens up for web developers and companies, to offer a better experience to their users. In this chapter you’ll also build your first AJAX-enabled web page, which will give you a first look of the component technologies.

Chapter 2: Client-Side Techniques with Smarter JavaScript will guide you through the technologies you’ll use to build AJAX web clients, using JavaScript, DOM, the XMLHttpRequest object, and XML. While not being a complete tutorial for these technologies, you’ll be taken to the right track of using them together to build a solid foundation for your future applications.

Chapter 3: Server-Side Techniques with PHP and MySQL completes the theory foundation by presenting how to create smart servers to interact with your AJAX client. You’ll learn various techniques for implementing common tasks, including handling security and error handling problems.

Chapter 4: AJAX Form Validation guides you through creating a responsive, modern form with real-time validation based on server data.

Chapter 5: AJAX Chat presents a simple online chat that works exclusively using AJAX code, without Java applets, Flash code, or other specialized library, as most chat applications work these days.

Chapter 6: AJAX Suggest and Autocomplete builds a Google-suggest like feature, that helps you find PHP functions, and forward you to the official help page for the chosen function.

Chapter 7: SVG (Scalable Vector Graphics) is a text-based graphics language that can be used to draw shapes and text. (SVG is supported natively by Firefox 1.5, and requires a SVG plugin with other browsers). In this case study you learn how to implement a realtime charting solution with AJAX and SVG.

Chapter 8: AJAX Grid teaches you how to build powerful updatable data grid. You’ll learn how to parse XML documents using XSLT to generate the looks of your grid.

Chapter 9: AJAX RSS Reader uses the SimpleXML PHP library,
XML and XSLT, to build a simple RSS aggregator.

Chapter 10: AJAX Drag and Drop is a demonstration of using the script.aculo.us framework to build a simple list of elements with drag&drop functionality.

Appendix A: Configuring Your Working Environment teaches you
how to install and configure the required software: Apache, PHP, MySQL, phpMyAdmin.

Who this book is written for
This book is for web developers willing to build better web applications. A basic knowledge of PHP, XML, JavaScript and MySQL, or a strong will to learn-as-you-type, is assumed.

If you are interested in buying this book, I suggest buying it directly from the publishers as they seem to have the best discount right now.

Download the sample chapter: Chapter 1: AJAX and The Future Of Web Applications

Here is another very interesting Ajax resource well worth a read. This article give some nice examples of things you can do with Ajax, some tutorials and also explains the history of Ajax. The article is several months old and you may already have came across it before - but it certainly deserves a mention here. Check out DHTMLNirvana’s Ajax - What is it good for?

Just read an interesting article over at sitepoint by James Edwards. Titled AJAX and Screenreaders: When Can it Work?

We’ve all heard a great deal of buzz about AJAX in the last few months, and with this talk has come a legion of articles, tips, presentations and practical APIs designed to explore the possibilities and try to arrive at best-practice techniques. But, for all of the excitement and hype, still very little has been said on the subject of AJAX and accessibility.

Nice thought provoking article.

Ajax Frameworks, Tools and Libraries with PHP

Xajax - PHP Class Library

What Xajax is:

‘xajax is an open source PHP class library that allows you to easily create powerful, web-based, Ajax applications using HTML, CSS, JavaScript, and PHP. Applications developed with xajax can asynchronously call server-side PHP functions and update content without reloading the page.’

How it works:

‘The xajax PHP object generates JavaScript wrapper functions for the PHP functions you want to be able to call asynchronously from your application. When called, these wrapper functions use JavaScript’s XMLHttpRequest object to asynchronously communicate with the xajax object on the server which calls the corresponding PHP functions. Upon completion, an xajax XML response is returned from the PHP functions, which xajax passes back to the application. The XML response contains instructions and data that are parsed by xajax’s JavaScript message pump and used to update the content of your application.’

Find out more about Xajax at the XajaxProject website - or visit their sourceforce project page

Sajax - Tool

What Sajax is:

‘Sajax is a tool to make programming websites using the Ajax framework — also known as XMLHTTPRequest or remote scripting — as easy as possible. Sajax makes it easy to call ASP, Cold Fusion, Io, Lua, Perl, PHP, Python or Ruby functions from your webpages via JavaScript without performing a browser refresh. The toolkit does 99% of the work for you so you have no excuse to not use it.’

How it works:

‘Our toolkit creates a JavaScript stub function that calls functions you export from your script. It handles all the connection details and calls a callback function of your design when the data is available.’

Find out more about Sajax at the ModernMethods
website.

Ajax HTML from PEAR - Libraries

This is a PHP and JavaScript package available through the official PEAR website. For simple examples tutorials, visit the package authors website. To download this package, visit the HTML_AJAX Package page on PEAR.

XOAD - PHP Based Ajax Framework (formerly known as NAJAX)

‘XOAD is a PHP based AJAX/XAP object oriented framework that allows you to create richer web applications.

XOAD has many benefits:

it uses JSON and native PHP serialized objects to communicate,
special attention has been paid to security,
supports server side events (observation),
client side events (XOAD Events),
server and client extensions,
HTML manipulation (extension),
Caching (extension).’

Find out more about XOAD at the XOAD
Wiki website.

AjaxAC - PHP Based Ajax Framework

‘AjaxAC is an open-source framework written in PHP, used to develop/create/generate AJAX applications. The fundamental idea behind AJAX (Asynchronous JavaScript And XML) is to use the XMLHttpRequest object to change a web page state using background HTTP sub-requests without reloading the entire page. It is released under the terms of the Apache License v2.0.’

‘The basic idea behind AjaxAC is that you create an AjaxAC application, which in itself contains a number of action handlers and event handlers. An application in this context might mean an entire web site powered by AJAX, or it could mean a subset of a form (such as the CountryRegionCityJax example, which could be a small part of a signup form, for example).’

Find out more about the AjaxAC Framework

CPAINT - Ajax Toolkit (Cross-Platform Asynchronous INterface Toolkit)

What CPAINT is?

‘CPAINT (Cross-Platform Asynchronous INterface Toolkit) is a multi-language toolkit that helps web developers design and implement AJAX web applications with ease and flexibility. It was originally born out of the author’s frustration and disappointment with other open-source AJAX toolkits. It is built on the same principles of AJAX, utilizing JavaScript and the XMLHTTP object on the client-side and the appropriate scripting language on the server-side to complete the full circle of data passing from client to server and back.’

Some Features:

‘Flexibility - built for small and enterprise applications
100% OOP approach
Supports multiple scripting languages (ASP & PHP)
Unified JavaScript file for all functions
Supports both Remote Scripting and XML
Supports both local & remote functions
Single or multiple XMLHTTP objects
Returns backend data as text or as a JavaScript XML/DOM document object
Can support both POST & GET requests
Backend proxy functions for accessing remote functions and data
Tested with all major browsers
Distributed under the GNU GPL & LGPL ‘

Find out more at the CPAINT website or visit their SourceForge Project page.

This list is in no way exhaustive.