AJFORM: AJAX JavaScript Toolkit and Modern Alternatives

First released in February 2007 at http://projects.aphexcreations.net/ajform/ (and www.projects.aphexcreations.net/ajform/), AJFORM—subtitled “World’s Easiest AJAX Forms API JavaScript Toolkit”—was an open-source client-side library developed by Brendon Crawford at Aphex Creations.

In 2007, building asynchronous web forms required navigating severe browser incompatibilities across Internet Explorer 6/7 (ActiveXObject("Microsoft.XMLHTTP")) and early Mozilla Firefox, Safari, and Opera implementations of XMLHttpRequest. Even more challenging, browsers offered no built-in API to serialise an HTML <form> element into an HTTP request body or upload files asynchronously.

AJFORM solved these challenges in a single lightweight script by providing:

• Automatic Form Control Serialisation: Inspecting text inputs, radio groups, checkboxes, <select multiple> lists, and the specific submit button clicked by the user.
• Transparent Multipart File Upload Fallback: Automatically switching from XMLHttpRequest to a dynamically generated hidden <iframe> transport whenever a form contained an <input type="file"> element.
• Degradable Progressive Enhancement: Allowing developers to write standard semantic HTML forms with normal action and method attributes that continued to work on browsers without JavaScript enabled.

AJFORM was distributed publicly via SourceForge at https://sourceforge.net/projects/ajform/ under open-source licensing and documented at projects.aphexcreations.net/ajform/index.php. Because of its minimal footprint and framework-agnostic design, AJFORM was catalogued across international AJAX framework directories (including CNBlogs Ajax框架一览表, J2EEGeek, and PHPBuilder / PHPFreaks forums) alongside early contemporaries such as Prototype, MooTools, Dojo, and the jQuery Form Plugin.

Crucially, AJFORM also served as the client-side foundation for Brendon Crawford’s official Drupal AJAX Forms module (https://www.drupal.org/project/ajax), which brought asynchronous form validation, inline error display, and non-reloading node/comment submissions to Drupal 5 and Drupal 6 sites before Drupal 7 integrated native `#ajax` Form API properties into core. For more on Drupal form engineering from the Aphex Creations archive, see our guide on Drupal Login Form Theming: Legacy Concepts and Modern Techniques.

AJAX (Asynchronous JavaScript and XML) fundamentally changed web architecture by decoupling user interaction from full-document HTTP navigation. In traditional synchronous form handling, submitting a form tears down the entire browser viewport, transmits URL-encoded or multipart form data to the server, and waits for a complete HTML document response—losing scroll position, client-side state, and focus context if a single field fails validation.

As highlighted in classic web engineering essays such as Particletree’s Degradable Ajax Form Validation (which referenced AJFORM), the gold standard for asynchronous forms is progressive enhancement:

1. Layer 1 — Semantic HTML Baseline: The <form action="/api/submit" method="POST"> works natively if scripts fail to load or are blocked.
2. Layer 2 — Client-Side Pre-Validation: HTML5 constraint validation attributes (required, type="email", pattern) and JavaScript regular expressions catch obvious formatting mistakes immediately. You can test and refine validation patterns in our JavaScript Regex Tester.
3. Layer 3 — Asynchronous Transport & Server Authority: An event listener intercepts the submit event, sends the payload asynchronously, and renders server-side validation feedback or confirmation states inline with proper ARIA live-region announcements.

Today, external toolkits like AJFORM or the jQuery Form Plugin are no longer required for asynchronous form transport. The WHATWG Fetch API (window.fetch()) provides a Promise-based, streaming-capable HTTP interface across all modern browsers, Cloudflare Workers, and Node.js runtimes.

Compared to legacy XMLHttpRequest wrappers, fetch() integrates cleanly with async/await control flow, supports request cancellation via AbortController (preventing race conditions when a user double-submits or navigates away), and automatically sets the correct Content-Type: multipart/form-data; boundary=... header when passed a FormData instance.

The native FormData interface directly replaces the DOM-walking serialisers and hidden-iframe file upload workarounds of 2007:

• new FormData(formElement, submitter): Automatically collects every enabled input with a name attribute—including <input type="file"> File objects and the exact <button type="submit"> passed via SubmitEvent.submitter.
• new URLSearchParams(formData): Converts text-only FormData into an application/x-www-form-urlencoded query or body payload when multipart encoding is unnecessary.
• Object.fromEntries(formData.entries()): Transforms single-value form fields into a plain object ready for JSON.stringify() when communicating with JSON REST or GraphQL endpoints.

Below is a side-by-side comparison showing how a degradable asynchronous form was wired using the historical AJFORM toolkit in 2007 versus the modern, zero-dependency ECMAScript implementation using fetch(), FormData, and AbortController:

// Historical Aphex Creations AJFORM pattern (2007)
// Automatically hooked form onsubmit and fell back to hidden iframe for files
const contactForm = document.getElementById("contact-form");

AJForm.bind(contactForm, {
  onComplete: function (responseText, status) {
    const resultNode = document.getElementById("form-status");
    if (status === 200) {
      resultNode.innerHTML = responseText;
    } else {
      resultNode.innerHTML = "Submission failed. Please try again.";
    }
  }
});

// Modern zero-dependency progressive enhancement pattern
const form = document.querySelector("#contact-form");
let activeController = null;

form?.addEventListener("submit", async (event) => {
  event.preventDefault();

  // Cancel any in-flight duplicate request
  activeController?.abort();
  activeController = new AbortController();

  // Pass event.submitter so the clicked submit button's name/value is included
  const formData = new FormData(form, event.submitter);
  const statusEl = document.querySelector("#form-status");

  try {
    statusEl.textContent = "Submitting...";
    const response = await fetch(form.action, {
      method: (form.method || "POST").toUpperCase(),
      body: formData, // Browser automatically sets multipart/form-data boundary
      headers: { Accept: "application/json" },
      signal: activeController.signal,
    });

    const payload = await response.json();
    if (!response.ok) {
      throw new Error(payload.message || `HTTP ${response.status}`);
    }

    statusEl.textContent = payload.message || "Form submitted successfully.";
    form.reset();
  } catch (error) {
    if (error.name === "AbortError") return;
    statusEl.textContent = error.message || "Network error during submission.";
  }
});

If you are maintaining a legacy PHP, CakePHP, or Drupal application that still loads ajform.js or relies on hidden-iframe AJAX form responses:

• Eliminate innerHTML Injection Risks: Early 2007 AJAX form handlers frequently injected raw HTML fragments or evaluated JSON via eval(). Always parse structured responses with response.json() and update text nodes via textContent to prevent DOM-based Cross-Site Scripting (XSS).
• Preserve CSRF Token Headers: Ensure your FormData payload or request headers include your framework’s Cross-Site Request Forgery token (or enforce SameSite=Lax / Strict cookies alongside origin verification).
• Audit Client-Side Regex Validation: When migrating legacy form validation scripts, verify that regular expressions do not suffer from catastrophic backtracking. Test all field validation patterns in our JavaScript Regex Tester and review our JavaScript Regex Guide.

Looking for contemporary examples of high-craft interactive frontend engineering and progressive enhancement? Explore the recognised projects in the Web Dev Awards Archive or browse by Development Category.