Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

miniAJAX.js - updated to be a bit more robust (See related posts)

inspired by timmorgan's post here: http://snippets.dzone.com/posts/show/2025


see CHANGELOG in details.

function $(e){if(typeof e=='string')e=document.getElementById(e);return e};
function collect(a,f){var n=[];for(var i=0;i<a.length;i++){var v=f(a[i]);if(v!=null)n.push(v)}return n};

ajax={};
ajax.x=function(){try{return new ActiveXObject('Msxml2.XMLHTTP')}catch(e){try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){return new XMLHttpRequest()}}};
//ajax.serialize=function(f){var g=function(n){return f.getElementsByTagName(n)};var nv=function(e){if(e.name)return encodeURIComponent(e.name)+'='+encodeURIComponent(e.value);else return ''};var i=collect(g('input'),function(i){if((i.type!='radio'&&i.type!='checkbox')||i.checked)return nv(i)});var s=collect(g('select'),nv);var t=collect(g('textarea'),nv);return i.concat(s).concat(t).join('&');};
ajax.serialize=function(f){var g=function(n){return f.getElementsByTagName(n)};var nv=function(e){if(e.name)return encodeURIComponent(e.name)+'='+encodeURIComponent(e.value);else return ''};var i=collect(g('input'),function(i){if((i.type!='radio'&&i.type!='checkbox')||i.checked)return nv(i)});var s=collect(g('select'),nv);var t=collect(g('textarea'),nv);var sOutput = i.concat(s).concat(t).join('&'); while (sOutput.indexOf('&&')>0) sOutput = sOutput.replace("&&","&"); return sOutput;}; // i've modified to clear out instances of "&&" in the POSTback
ajax.send=function(u,f,m,a){var x=ajax.x();x.open(m,u,true);x.onreadystatechange=function(){if(x.readyState==4)f(x.responseText)};if(m=='POST')x.setRequestHeader('Content-type','application/x-www-form-urlencoded');x.send(a)};
ajax.sendNoCache=function(u,f,m,a){u = u + (u.indexOf('?') < 0 ? '?' : '&') + 'noCache=' + new Date().getTime();var x=ajax.x();x.open(m,u,true);x.onreadystatechange=function(){if(x.readyState==4)f(x.responseText)};if(m=='POST')x.setRequestHeader('Content-type','application/x-www-form-urlencoded');x.send(a)};
ajax.get=function(url,func){ajax.send(url,func,'GET')};
ajax.getNoCache=function(url,func){url = url + (url.indexOf('?') < 0 ? '?' : '&') + 'noCache=' + new Date().getTime();ajax.send(url,func,'GET')};
ajax.gets=function(url){var x=ajax.x();x.open('GET',url,false);x.send(null);return x.responseText};
ajax.getsNoCache=function(url){url = url + (url.indexOf('?') < 0 ? '?' : '&') + 'noCache=' + new Date().getTime();var x=ajax.x();x.open('GET',url,false);x.send(null);return x.responseText};
ajax.post=function(url,func,args){ajax.send(url,func,'POST',args)};
ajax.postNoCache=function(url,func,args){ajax.sendNoCache(url,func,'POST',args)};
ajax.update=function(url,elm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.get(url,f);};
ajax.updateNoCache=function(url,elm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.getNoCache(url,f);};
ajax.submit=function(url,elm,frm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.post(url,f,ajax.serialize(frm))};
ajax.submitNoCache=function(url,elm,frm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.postNoCache(url,f,ajax.serialize(frm))};



/** HOW TO USE
ajax.x - The XMLHttpRequest object (or MS equivalent) used for communication

ajax.serialize(f)
  f = the form element you wish to be serialized
  This function serializes all the fields in a form so that they can be passed as a query string in the form 'arg1=val1&arg2=val2'.

ajax.getNoCache(url, func)
ajax.get(url, func)
  url = the url to query (can contain arguments after a '?')
  func = the function to call once the response is returned (no quotes)
  This function uses a GET request to query the specified url and return a response to the specified function.

ajax.getsNoCache(url)
ajax.gets(url)
  url = the url to query (can contain arguments after a '?')
  This function uses a GET request to query the specified url and return a response synchronously. Use this sparingly, as synchronous calls can lock up the browser.

ajax.postNoCache(url, func, args)
ajax.post(url, func, args)
  url = the url to query
  func = the function to call once the response is returned (no quotes)
  args = a string containing arguments to be passed to the url
  This function uses a POST request to query the specified url and return a response to the specified function.

ajax.updateNoCache(url, elm)
ajax.update(url, elm)
  url = the url to query
  elm = the (name of the) element to update
  This function uses a GET request to query the specified url and insert the result into the specified element.

ajax.submitNoCache(url, elm, frm)
ajax.submit(url, elm, frm)
  url = the url to query
  elm = the (name of the) element to update
  frm = the form element to submit
  This function is typically used in the onsubmit handler of a function. The form is not submitted the usual way; the form is instead serialized using 'ajax.serialize' and submitted using 'ajax.post'. The result is then inserted into the specified element.
*/


/** CHANGES - by Michael Lowden
[2/27/2008 10:43 AM] 
Update the "serialize" function to get rid of risk of consecutive "&" symbols.  where "&&&&&&" may throw either an exception or a warning on some webservers (e.g. Tomcat).

[2/26/2008 4:47 PM]
Adapted it a little to handle for IE's stupid Caching issue when using AJAX:
I simply added the following functions:
  ajax.sendNoCache(url,func,method,args), not called by user, but called by some below functions.
  ajax.getNoCache(url, func)
  ajax.getsNoCache(url)
  ajax.postNoCache(url, func, args)
  ajax.updateNoCache(url, elm)
  ajax.submitNoCache(url, elm, frm)
*/

Comments on this post

Michael.Lowden posts on Mar 11, 2008 at 01:48
ah geez. updated again. this time to add "parse" functionality to it for those pesky sources that have embedded JavaScript that is normally ignored.
/* NOTE: this function requires that the <script> declarations are in lower case */
function parseAndEvalScripts(sIN){var sHTML="";if(sIN.indexOf("<script")>=0){var oHTML=sIN.split("</script>");for(iHTML=0;iHTML<oHTML.length;iHTML++){if(oHTML[iHTML].indexOf("<script")>= 0) {sHTML=oHTML[iHTML];sHTML=Right(sHTML,sHTML.length-sHTML.indexOf("<script")-7);sHTML=Right(sHTML,sHTML.length-sHTML.indexOf(">")-1);eval(sHTML);}}}};

function $(e){if(typeof e=='string')e=document.getElementById(e);return e};
function collect(a,f){var n=[];for(var i=0;i<a.length;i++){var v=f(a[i]);if(v!=null)n.push(v)}return n};

ajax={};
ajax.x=function(){try{return new ActiveXObject('Msxml2.XMLHTTP')}catch(e){try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){return new XMLHttpRequest()}}};
//ajax.serialize=function(f){var g=function(n){return f.getElementsByTagName(n)};var nv=function(e){if(e.name)return encodeURIComponent(e.name)+'='+encodeURIComponent(e.value);else return ''};var i=collect(g('input'),function(i){if((i.type!='radio'&&i.type!='checkbox')||i.checked)return nv(i)});var s=collect(g('select'),nv);var t=collect(g('textarea'),nv);return i.concat(s).concat(t).join('&');};
ajax.serialize=function(f){var g=function(n){return f.getElementsByTagName(n)};var nv=function(e){if(e.name)return encodeURIComponent(e.name)+'='+encodeURIComponent(e.value);else return ''};var i=collect(g('input'),function(i){if((i.type!='radio'&&i.type!='checkbox')||i.checked)return nv(i)});var s=collect(g('select'),nv);var t=collect(g('textarea'),nv);var sOutput = i.concat(s).concat(t).join('&'); while (sOutput.indexOf('&&')>0) sOutput = sOutput.replace("&&","&"); return sOutput;}; // i've modified to clear out instances of "&&" in the POSTback
ajax.send=function(u,f,m,a){var x=ajax.x();x.open(m,u,true);x.onreadystatechange=function(){if(x.readyState==4)f(x.responseText)};if(m=='POST')x.setRequestHeader('Content-type','application/x-www-form-urlencoded');x.send(a)};
ajax.get=function(url,func){ajax.send(url,func,'GET')};
ajax.gets=function(url){var x=ajax.x();x.open('GET',url,false);x.send(null);return x.responseText};
ajax.post=function(url,func,args){ajax.send(url,func,'POST',args)};
ajax.update=function(url,elm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.get(url,f);};
ajax.submit=function(url,elm,frm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.post(url,f,ajax.serialize(frm))};


ajax.sendNoCache=function(u,f,m,a){u = u + (u.indexOf('?') < 0 ? '?' : '&') + 'noCache=' + new Date().getTime();var x=ajax.x();x.open(m,u,true);x.onreadystatechange=function(){if(x.readyState==4)f(x.responseText)};if(m=='POST')x.setRequestHeader('Content-type','application/x-www-form-urlencoded');x.send(a)};
ajax.getNoCache=function(url,func){url = url + (url.indexOf('?') < 0 ? '?' : '&') + 'noCache=' + new Date().getTime();ajax.send(url,func,'GET')};
ajax.getsNoCache=function(url){url = url + (url.indexOf('?') < 0 ? '?' : '&') + 'noCache=' + new Date().getTime();var x=ajax.x();x.open('GET',url,false);x.send(null);return x.responseText};
ajax.postNoCache=function(url,func,args){ajax.sendNoCache(url,func,'POST',args)};
ajax.updateNoCache=function(url,elm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.getNoCache(url,f);};
ajax.submitNoCache=function(url,elm,frm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.postNoCache(url,f,ajax.serialize(frm))};


ajax.sendNoCacheAndParse=function(u,f,m,a){u = u + (u.indexOf('?') < 0 ? '?' : '&') + 'noCache=' + new Date().getTime();var x=ajax.x();x.open(m,u,true);x.onreadystatechange=function(){if(x.readyState==4){parseAndEvalScripts(x.responseText);f(x.responseText);}};if(m=='POST')x.setRequestHeader('Content-type','application/x-www-form-urlencoded');x.send(a)};
ajax.getNoCacheAndParse=function(url,func){url = url + (url.indexOf('?') < 0 ? '?' : '&') + 'noCache=' + new Date().getTime();ajax.sendNoCacheAndParse(url,func,'GET')};
ajax.getsNoCacheAndParse=function(url){url = url + (url.indexOf('?') < 0 ? '?' : '&') + 'noCache=' + new Date().getTime();var x=ajax.x();x.open('GET',url,false);x.send(null);parseAndEvalScripts(responseText);return x.responseText;};
ajax.postNoCacheAndParse=function(url,func,args){ajax.sendNoCacheAndParse(url,func,'POST',args)};
ajax.updateNoCacheAndParse=function(url,elm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.getNoCacheAndParse(url,f);};
ajax.submitNoCacheAndParse=function(url,elm,frm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.postNoCacheAndParse(url,f,ajax.serialize(frm))};



/** HOW TO USE
ajax.x - The XMLHttpRequest object (or MS equivalent) used for communication

ajax.serialize(f)
  f = the form element you wish to be serialized
  This function serializes all the fields in a form so that they can be passed as a query string in the form 'arg1=val1&arg2=val2'.

ajax.get(url, func)
ajax.getNoCache(url, func)
ajax.getNoCacheAndParse(url, func)
  url = the url to query (can contain arguments after a '?')
  func = the function to call once the response is returned (no quotes)
  This function uses a GET request to query the specified url and return a response to the specified function.

ajax.gets(url)
ajax.getsNoCache(url)
ajax.getsNoCacheAndParse(url)
  url = the url to query (can contain arguments after a '?')
  This function uses a GET request to query the specified url and return a response synchronously. Use this sparingly, as synchronous calls can lock up the browser.

ajax.post(url, func, args)
ajax.postNoCache(url, func, args)
ajax.postNoCacheAndParse(url, func, args)
  url = the url to query
  func = the function to call once the response is returned (no quotes)
  args = a string containing arguments to be passed to the url
  This function uses a POST request to query the specified url and return a response to the specified function.

ajax.update(url, elm)
ajax.updateNoCache(url, elm)
ajax.updateNoCacheAndParse(url, elm)
  url = the url to query
  elm = the (name of the) element to update
  This function uses a GET request to query the specified url and insert the result into the specified element.

ajax.submit(url, elm, frm)
ajax.submitNoCache(url, elm, frm)
ajax.submitNoCacheAndParse(url, elm, frm)
  url = the url to query
  elm = the (name of the) element to update
  frm = the form element to submit
  This function is typically used in the onsubmit handler of a function. The form is not submitted the usual way; the form is instead serialized using 'ajax.serialize' and submitted using 'ajax.post'. The result is then inserted into the specified element.
*/
Michael.Lowden posts on Mar 11, 2008 at 02:10
DAMN. doesn't work all the time. not sure why. working on it.

You need to create an account or log in to post comments to this site.


Click here to browse all 5140 code snippets

Related Posts