AJAX - it

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.)
Click here to see the POST HTML of the homepage
Click here to see the GET HTML of the homepage
(they are the same)

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. Originally, I detected this by updating the element and then doing doing a regex test on it. If it was an error, I would use another Regex to strip out the error message and update the element again, but because of the CSS, if the same user triggered an error multiple times (eg testing to see if they could submit the comment yet) there would be a momentary flash. I fixed this problem by updating a variable instead of going straight to the element, but it still required using client-side code to process it.

The Setup:
Some data is posted through AJAX to the server-side script. This script then calls a function (submit_data) which then passes on the data to WordPress. (There is of course PHP and JavaScript that isn’t shown here.)

The Original Function:

function submit_form(){
global $wpdb, $post,$id;
	require_once('../../../../wp-comments-post.php');
	echo 'Comment submitted';
}

The new function that traps the error:

function submit_form(){
global $wpdb, $post,$id;
ob_start("nodie");
require_once('../../../../wp-comments-post.php');
ob_end_clean();
echo 'Comment submitted';
}

function nodie($error){
	preg_match('@<p>(.*?)</p>@', $error,$errs);
	return $errs[1];
}

Global  $wp_actions;
 $wp_actions[] = 'admin_head';