I wanted to see how small you could make a fully functional AJAX script that worked cross-browser and degraded gracefully, so I went through an old custom AJAX script and made it as small as I possibly could. In the resulting AJAX scripts, the post version is 410 characters and the GET version is only 359 characters long. The scripts are fully functional and accept the following parameters: URL, DATA (in string form), and ELEMENT (to update).
The scripts could be a little smaller, but it would really kill readability.
“Get” AJAX Script
function a(l,d,u){try{r = new XMLHttpRequest();}catch(e){try {r = new ActiveXObject('Msxml2.XMLHTTP');}catch(e){r = new ActiveXObject('Microsoft.XMLHTTP');}}if(r){r.onreadystatechange = function() {if (r.readyState == 4 && r.status == 200){document.getElementById(u).innerHTML = r.responseText;}}r.open('GET', l+'?'+d, true);r.send(d);}}
“Post” AJAX Script
function b(l,d,u){try{r = new XMLHttpRequest();} catch(e){try {r = new ActiveXObject('Msxml2.XMLHTTP');} catch(e){r = new ActiveXObject('Microsoft.XMLHTTP');}}if(r){r.onreadystatechange = function() {if (r.readyState == 4 && r.status == 200){document.getElementById(u).innerHTML=r.responseText;}}r.open('POST', l, true);r.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');r.send(d);}}
Combined AJAX Script
This combined script also accepts a fourth parameter ‘p’ that should evaluate true if the data is to be sent by post.
function a(l,d,u,p){try{r = new XMLHttpRequest();}catch(e){try {r = new ActiveXObject('Msxml2.XMLHTTP');}catch(e){r = new ActiveXObject('Microsoft.XMLHTTP');}}if(r){r.onreadystatechange = function() {if (r.readyState == 4 && r.status == 200){document.getElementById(u).innerHTML = r.responseText;}}if(p){r.open('POST', l, true);r.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');}else{r.open('GET', l+'?'+d, true);}}}
Demo: (Sorry but you will have to go to the full page so the JavaScript is loaded.)
Trapping WordPress errors with output buffering.
If you have tried to use AJAX with WordPress, most likely you have stumbled upon the wp_die() function which completely kills the response you expect to get. However, we can trap the wp_die() by using PHP’s output buffering and the ob_start callback function to process the output of wp_die() even though a die() is called. This is a very special case, and will only work when you are able to ensure output buffering can be called before the die is called.
The easiest way to get a non-fatal wp_die() error (an error that shouldn’t cause the entire application to stop) is when submitting comments: non-fatal errors occur whenever someone posts too quickly or submits a duplicate comment, so this can be a problem when creating an AJAX app to submit comments (I ran into this problem with INAP.)
Since AJAX makes the entire submit process very quick, so it is easy to trigger the “Posting too quickly” error if the user make short comments, and when this happens an entire page –complete with CSS and headers– is returned as the AJAX response.
INAP 3.0 Progress
Aside from a brief flirtation with a couple payed projects, I’ve been heavily focusing on rewriting the code for INAP 3.0, and it has almost reached the point of a private beta (which means I start running it on this site.) I have selected the new name for INAP 3.0, but I’m not going to reveal it just yet. Here is a small preview of what you can expect from INAP 3.0:
INAP 3.0 is now truly modular with a main Javascript/PHP core that other features hook into to function. This core is easily extensible and the new structure of a main project with many smaller projects will make bugfixes and upgrades less painful, and will allow the user to upgrade the plugin section by section as most changes in the modules won’t effect the core.
For the users:
- INAP 3.0 will make upgrades far less painful.
If you use INAP and have noticed oddness with your full-text feeds lately, it may have been caused by INAP. Users that had the “custom options” selected would have their feeds trimmed as if it were a post. INAP 2.4.3 fixes this.
In other news, INAP is in the process of a major overhaul including a complete rewrite of most of its antiquated structure. When this process is complete it will be rebranded to demonstrate the totality of its features (it won’t be called INAP anymore because the name is too restrictive), but will be released as version 3.0
Inline Ajax Page was listed on Mashable as one of “30 good [AJAX wordpress plugins].” While I’m thankful for the publicity (it seems half the internet is scraping Mashable’s feed which resulted in a huge Technorati boost), as always, it was described as “Allow[ing] readers to see a snippet of a post, click a button and the remainder will appear without going to another page.”
I almost cried. That description fits only the 1.0 version of INAP that was released over a year ago–now it does so much more than that that it is almost like saying Google is just a search engine. Oh well, the traffic generated was good quality.
In other news, version 2.4.25 was released a couple days ago to fix a bug that occurs when submitting a comment using the jQuery library under IE6.
On this lovely Friday the 13th, Inline Ajax Page version 2.4 has finally been released.
If you are upgrading or have ever installed INAP before follow the upgrade instructions here.
Please report bugs as soon as you find them, as I will be making bug-fixing releases as they are fixed.
I am also specifically asking for feature ideas for the next version, so drop a note on the main page if you have any.
