Ajax

  • Revision slug: AJAX
  • Revision title: AJAX
  • Revision id: 302577
  • Created:
  • Creator: smarty
  • Is current revision? No
  • Comment

Revision Content

Getting Started
An introduction to AJAX.

Asynchronous JavaScript + XML, while not a technology in itself, is a term coined in 2005 by Jesse James Garrett, that describes a "new" approach to using a number of existing technologies together, including: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, and the most importantly XMLHttpRequest object.
When these technologies are combined in the AJAX model, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. This makes the application faster and more responsive to user actions.

Although X in AJAX stands for XML, JSON is used more than XML nowadays because of its many advantages such as being lighter and a part of JavaScript. Both JSON and XML are used for packaging information in AJAX model.

Documentation

AJAX:Getting Started
This article guides you through the AJAX basics and gives you two simple hands-on examples to get you started.
Alternate Ajax Techniques
Most articles on Ajax have focused on using XMLHttp as the means to achieving such communication, but Ajax techniques are not limited to just XMLHttp. There are several other methods.
Ajax: A New Approach to Web Applications
Jesse James Garrett, of adaptive path, wrote this article in February 2005, introducing AJAX and its related concepts.
A Simpler Ajax Path
"As it turns out, it's pretty easy to take advantage of the XMLHttpRequest object to make a web app act more like a desktop app while still using traditional tools like web forms for collecting user input."
Fixing the Back Button and Enabling Bookmarking for AJAX Apps
Mike Stenhouse has penned this article, detailing some methods you can use to fix back button and bookmarking issues when developing AJAX applications.
Ajax Mistakes
Alex Bosworth has written this article outlining some of the mistakes AJAX application developers can make.
Tutorial with examples.
 
HTML in XMLHttpRequest
 
XMLHttpRequest specification
W3C Working draft
Other resources
Other AJAX resources you may find useful.

View All...

Community

  • View Mozilla forums...
{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}

Tools

View All...

Examples

HTML, XHTML, CSS, DOM, JavaScript, XML, XMLHttpRequest, XSLT, DHTML, Canvas

 

Revision Source

<div class="callout-box">
  <strong><a href="/en-US/docs/AJAX/Getting_Started" title="en-US/docs/AJAX/Getting_Started">Getting Started</a></strong><br />
  An introduction to AJAX.</div>
<div>
  <p><strong>Asynchronous JavaScript + XML</strong>, while not a technology in itself, is a term coined in 2005 by Jesse James Garrett, that describes a "new" approach to using a number of existing technologies together, including: <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a> or <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">Cascading Style Sheets</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/DOM" title="en-US/docs/DOM">The Document Object Model</a>, <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>, <a href="/en-US/docs/XSLT" title="en-US/docs/XSLT">XSLT</a>, and the most importantly <a href="/en-US/docs/DOM/XMLHttpRequest">XMLHttpRequest object</a>.<br />
    When these technologies are combined in the AJAX model, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. This makes the application faster and more responsive to user actions.</p>
  <p>Although X in AJAX stands for XML, <a href="/en-US/docs/JSON" title="https://developer.mozilla.org/en-US/docs/JSON">JSON</a> is used more than XML nowadays because of its many advantages such as being lighter and a part of JavaScript. Both JSON and XML are used for packaging information in AJAX model.</p>
</div>
<table class="topicpage-table">
  <tbody>
    <tr>
      <td>
        <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
        <dl>
          <dt>
            <a href="/en-US/docs/AJAX/Getting_Started" title="en-US/docs/AJAX/Getting_Started">AJAX:Getting Started</a></dt>
          <dd>
            This article guides you through the AJAX basics and gives you two simple hands-on examples to get you started.</dd>
          <dt>
            <a class="external" href="http://www.webreference.com/programming/ajax_tech/">Alternate Ajax Techniques</a></dt>
          <dd>
            Most articles on Ajax have focused on using XMLHttp as the means to achieving such communication, but Ajax techniques are not limited to just XMLHttp. There are several other methods.</dd>
          <dt>
            <a class="external" href="http://www.adaptivepath.com/publications/essays/archives/000385.php">Ajax: A New Approach to Web Applications</a></dt>
          <dd>
            Jesse James Garrett, of <a class="external" href="http://www.adaptivepath.com">adaptive path</a>, wrote this article in February 2005, introducing AJAX and its related concepts.</dd>
          <dt>
            <a class="external" href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html">A Simpler Ajax Path</a></dt>
          <dd>
            "As it turns out, it's pretty easy to take advantage of the XMLHttpRequest object to make a web app act more like a desktop app while still using traditional tools like web forms for collecting user input."</dd>
          <dt>
            <a class="external" href="http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps/" title="http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps/">Fixing the Back Button and Enabling Bookmarking for AJAX Apps</a></dt>
          <dd>
            Mike Stenhouse has penned this article, detailing some methods you can use to fix back button and bookmarking issues when developing AJAX applications.</dd>
          <dt>
            <a class="external" href="http://alexbosworth.backpackit.com/pub/67688">Ajax Mistakes</a></dt>
          <dd>
            Alex Bosworth has written this article outlining some of the mistakes AJAX application developers can make.</dd>
          <dt>
            <a class="external" href="http://www.xul.fr/en-xml-ajax.html">Tutorial</a> with examples.</dt>
          <dd>
            &nbsp;</dd>
          <dt>
            <a href="/en-US/docs/HTML_in_XMLHttpRequest" title="en-US/docs/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></dt>
          <dd>
            &nbsp;</dd>
          <dt>
            <a class="external" href="http://www.w3.org/TR/XMLHttpRequest/">XMLHttpRequest specification</a></dt>
          <dd>
            W3C Working draft</dd>
          <dt>
            <a href="/en-US/docs/AJAX/Other_Resources" title="en-US/docs/AJAX/Other_Resources">Other resources</a></dt>
          <dd>
            Other AJAX resources you may find useful.</dd>
        </dl>
        <p><span class="alllinks"><a href="/en-US/docs/tag/AJAX" title="en-US/docs/tag/AJAX">View All...</a></span></p>
      </td>
      <td>
        <h2 class="Community" id="Community" name="Community">Community</h2>
        <ul>
          <li>View Mozilla forums...</li>
        </ul>
        <div>
          {{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}</div>
        <ul>
          <li><a href="/en-US/docs/AJAX/Community" title="en-US/docs/AJAX/Community">AJAX community links</a></li>
        </ul>
        <h2 class="Tools" id="Tools" name="Tools">Tools</h2>
        <ul>
          <li><a class="external" href="http://www.ajaxprojects.com">Toolkits and frameworks</a></li>
          <li><a class="external" href="http://www.getfirebug.com/">Firebug - Ajax/Web development tool</a></li>
          <li><a class="external" href="http://blog.monstuff.com/archives/000252.html">AJAX Debugging Tool</a></li>
          <li><a class="external" href="http://www.osflash.org/doku.php?id=flashjs">Flash/AJAX Integration Kit</a></li>
          <li><a class="external" href="http://xkr.us/code/javascript/XHConn/">A Simple XMLHTTP Interface Library</a></li>
        </ul>
        <p><span class="alllinks"><a href="/en-US/docs/AJAX:Tools" title="en-US/docs/AJAX:Tools">View All...</a></span></p>
        <h2 id="Examples" name="Examples">Examples</h2>
        <ul>
          <li><a class="external" href="http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller">AJAX poller script</a></li>
          <li><a class="external" href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=9">Ajax Chat Tutorial</a></li>
          <li><a class="external" href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=13">RSS Ticker with AJAX</a></li>
          <li><a class="external" href="http://www.jamesdam.com/ajax_login/login.html#login">AJAX Login System using XMLHttpRequest</a></li>
          <li><a class="external" href="http://www.thinkvitamin.com/features/ajax/create-your-own-ajax-effects">Create your own Ajax effects</a></li>
          <li><a class="external" href="http://codinginparadise.org/weblog/2005/08/ajax-creating-huge-bookmarklets.html">AJAX: Creating Huge Bookmarklets</a></li>
          <li><a class="external" href="http://www.hotajax.org">AJAX: Hot!Ajax There are many cool examples</a></li>
        </ul>
        <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
        <p><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>, <a href="/en-US/docs/nsIXMLHttpRequest" title="en-US/docs/XMLHttpRequest">XMLHttpRequest</a>, <a href="/en-US/docs/XSLT" title="en-US/docs/XSLT">XSLT</a>, <a href="/en-US/docs/DHTML" title="en-US/docs/DHTML">DHTML</a>, <a href="/en-US/docs/HTML/Canvas" title="en-US/docs/HTML/Canvas">Canvas</a></p>
      </td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
Revert to this revision