Title: Page 129 – Alex Kirk

---

 * 
   ## 󠀁[Documenting prototype.js for AJAX](https://alex.kirk.at/2005/10/05/documenting-prototypejs-for-ajax/)󠁿
   
 * October 5, 2005
 * As the [prototype.js](http://prototype.conio.net/) library lacks documentation
   and I recommend to use the [down cut version for AJAX](https://alex.kirk.at/2005/10/05/prototypejs-just-for-ajax/),
   I thought it might be useful to document how to use the AJAX related functions.
 * **A “normal” AJAX callback**
 * When you just want to do a post-back to the server (for example to store some
   data the user has just changed) you’d use the following piece of code:
    `
 * A simple corresponding PHP script (store.php) would look like this:
    ` < ?php
   if (!isset($_POST["value"])) { die("no value given!"); } $db = mysql_connect();
   mysql_select_db("test"); mysql_query("INSERT INTO table (value) VALUES ('" + 
   addslashes($_POST["value"]) + "')"); mysql_close(); echo "successful"; ?>
 * The value the user entered in the prompting box will be stored to a MySQL database.
   The magic happens in line 2 of the function store(): `new Ajax.Request` will 
   do an HTTP POST to the given script at the first parameter (store.php) with the
   parameters given in the second argument. The yet unusual notations within curly
   brackets denotes a hash (also called associative array) that stores key/value
   pairs. Here the pair `parameters` (key) and `'&value=' + value` (value) are stored.
   Other possible key/parameter functions can be found at the [preliminary documentation of prototype.js by Sergio Pereira](http://www.sergiopereira.com/articles/prototype.js.html#Ajax.options).
 * This brings up a problem common to AJAX applications: you explicitly need to 
   inform the user about what happened, or if it failed. This can be done via an
   Event handler. The most useful one might be `onComplete`. It is inserted like
   this:
 * `
    function store() { value = prompt("Give me a value, please."); new Ajax.Request("
   store.php", { parameters: '&value=' + value, onComplete: function (req) { if (
   req.responseText == "successful") { alert("Your value has been stored successfully");}
   else { alert("Something went wrong when storing your value"); } } }); }
 * This will display an appropriate alert box depending a successful status message
   by the script. In near future I will describe how to use the `Ajax.Updater` feature
   which allows to easily modify your existing page to instantly display results
   of a query.
 * ajax, introduction, tutorial, prototype.js
 * [Ajax](https://alex.kirk.at/category/code/ajax/), [Code](https://alex.kirk.at/category/code/)
 * 
   ## 󠀁[prototype.js just for AJAX](https://alex.kirk.at/2005/10/05/prototypejs-just-for-ajax/)󠁿
   
 * October 5, 2005
 * As I stated earlier, the [prototype.js](http://www.prototypejs.org/) library 
   is too large for just using AJAX. In its current version (1.4.0_pre10) it weighs
   36KB and contains lots of other features that are most probably not needed when
   just dealing with AJAX.
 * I have therefore created a smaller version just for AJAX, based on 1.4.0_pre10:
   [pt.ajax.js](https://alex.kirk.at/area7/2005/10/05/pt.ajax.js?output_format=md&term_id=1122)
   8.9K
 * It now has only a quarter of size and still provides some nice features such 
   as `$` as a wrapper of `document.getElementById`.
 * Creating this was not too difficult: it is merely a combination of 4 files that
   make up prototype.js:
    - [HEADER](http://dev.conio.net/repos/prototype/src/HEADER) (needs modification
      from the original [prototype.js](http://dev.conio.net/repos/prototype/dist/prototype.js))
    - [prototype.js](http://dev.conio.net/repos/prototype/src/prototype.js) (without
      includes)
    - [base.js](http://dev.conio.net/repos/prototype/src/base.js)
    - [ajax.js](http://dev.conio.net/repos/prototype/src/ajax.js)
 * Just do copy and paste into a new files, i.e. copying each file to the bottom
   of your new javascript file.
 * As you can see, you can easily create your own customized (smaller!) version 
   of prototype.js to fit your needs.
 * ajax, prototype.js, customized
 * [Ajax](https://alex.kirk.at/category/code/ajax/), [Code](https://alex.kirk.at/category/code/)

 [Previous Page](https://alex.kirk.at/page/128/?output_format=md&term_id=1122) [Next Page](https://alex.kirk.at/page/130/?output_format=md&term_id=1122)