DZone 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

Snippets has posted 5883 posts at DZone. View Full User Profile

MiniAJAX.js - Updated To Be A Bit More Robust

02.27.2008
| 3603 views |
  • submit to reddit
        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

Snippets Manager replied on Fri, 2008/12/05 - 8:45am

function $__(e){if(typeof e=='string')e=document.getElementById(e);return e}; function collect(a,f){var n=[];for(var i=0;i0){for(var i=0;i You can see how to use it: http://snippets.dzone.com/posts/show/2025 It has, json, interval, timeout, parse functions in it.

Snippets Manager replied on Fri, 2008/12/05 - 8:45am

function $__(e){if(typeof e=='string')e=document.getElementById(e);return e}; function collect(a,f){var n=[];for(var i=0;i0){for(var i=0;i You can see how to use it: http://snippets.dzone.com/posts/show/2025 It has, json, interval, timeout, parse functions in it.

Snippets Manager replied on Sat, 2008/07/26 - 11:24am

it will work if we use " eval(f)((x.responseText)) " intead of " f(x.responseText)"

Snippets Manager replied on Sat, 2008/07/26 - 11:24am

Hi All, In firefox one error occured error: "f" is not a function i know f is a parameter [function name to show response ] passing from AJAX call function. here how can I evaluate thais function parameter, now it acting like "f" is is the function. can any one help on this? if(x.readyState==4)f(x.responseText) Thanks Peter

Snippets Manager replied on Sat, 2008/07/26 - 11:24am

Hi All, In firefox one error occured error: "f" is not a function i know f is a parameter [function name to show response ] passing from AJAX call function. here how can I evaluate thais function parameter, now it acting like "f" is is the function. can any one help on this? if(x.readyState==4)f(x.responseText) Thanks Peter

Snippets Manager replied on Wed, 2008/02/27 - 2:28pm

DAMN. doesn't work all the time. not sure why. working on it.

Snippets Manager replied on Wed, 2008/02/27 - 2:28pm

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 declarations are in lower case */ function parseAndEvalScripts(sIN){var sHTML="";if(sIN.indexOf("=0){var oHTML=sIN.split("");for(iHTML=0;iHTML= 0) {sHTML=oHTML[iHTML];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;i0) 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. */