Simple AJAX Code-Kit (SACK)
SACK is exactly what it says it is: A simple set of code to allow you to put AJAX into your webpages with none of the fuss or overhead of other packages. Just AJAX, just simple.
Current SACK Version: 1.6
This is the main page for SACK and will be, over the next little while, updated with reasources and tutorials about how to use SACK to enhance your webpages. Maybe it will even give you some ideas! If you come up with something special please let me know, I’d love to hear from people that are using my SACK in their projects or products. The same goes for any suggestions, please tell me how I can make this better.
SACK 1.2 is included with WordPress 2.0, which makes me happy beyond words, newer versions of SACK should work with no problems in WordPress.
Code Documentation
Full documentation of the classes methods and variables is included in the zip package. It should be more than you need, but if you have any trouble then please let me know: The aim is to make everything simple, so if you are confused I need to fix something.
Example Code
A basic demonstration of how you can use SACK to communicate with a PHP page is included in the full zip distribution. Remember: it needs to be run on a webserver to work correctly.
Software Licence
The full licence text follows, basically it’s a very permissive open source licence:
Note: This is a modified version of the X11 Licence (commonly known as the MIT licence). The modifications relate to including not only the copyright notice, as per the original X11, but also the authors URL. This is a trivial modification, and does not affect any other part of the licence.
COPYRIGHT AND PERMISSION NOTICE for Simple AJAX Code Kit (SACK).
Copyright © 2005 Gregory Wild-Smith
Authors Website: http://www.twilightuniverse.com/All rights reserved.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, provided that the above copyright notice(s), authors website url, and this permission notice appear in all copies of the Software and that the above copyright notice(s), authors url, and this permission notice appear in supporting documentation.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF THIRD PARTY RIGHTS. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR HOLDERS INCLUDED IN THIS NOTICE BE LIABLE FOR ANY CLAIM, OR ANY SPECIAL INDIRECT OR CONSEQUENTIAL DAMAGES, OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
Except as contained in this notice, the name of a copyright holder shall not be used in advertising or otherwise to promote the sale, use or other dealings in this Software without prior written authorization of the copyright holder.
The Code
There are two versions you can download, a full pack (which includes the docs and demo code), or just the JavaScript.
- Download the full SACK (Simple AJAX Code-Kit) v1.6 Zipfile
- View the SACK (Simple AJAX Code-Kit) v1.6 JavaScript
If you have produced software with SACK please let me know, I’d love to be able to compile a list of applications that use it. If you do want to see your site up here then shoot me an email with the url of your site, ideally a link to where it is used, and a description of what you did with it.
Start your keyboards…
on November 20th, 2005 at 11:26
[…] Getting a handle on how I wanted the new interface for surveys to work wasn’t easy. My first choice was to have user-draggable questions that combined the old preview and edit modes into one seamless interface while also adding live updating for all the actions that used to require a page reload. In Old Surveys the page would reload if you: added a question; removed a question; changed a question’s type; added an answer; reordered questions, etc. It was frustrating to try and use, because the responsiveness just wans’t there. Feeling good about JavaScript after the Answerline Revamp, I tried to address all of these issues. The page reloads were simple, I’d replace them with degradable JavaScript making AJAX calls via my current favorite Library, SACK. It’s lightweight and just does the AJAX transport/receiving stuff. I’m a fan of lightweight libraries, the big ones like Prototype and Scriptaculous just don’t interest me that much. Too much overhead for what I’d need. […]
on December 29th, 2005 at 2:56
[…] Simple AJAX Code-Kit (SACK) […]
on December 31st, 2005 at 13:55
[…] Simple AJAX Code-Kit (SACK) […]
on January 2nd, 2006 at 14:55
[…] Simple AJAX Code-Kit (SACK) […]
on January 3rd, 2006 at 17:20
[…] Rilasciata la nuova versione di SACK, che adesso ha (finalmente) una paginetta dedicata interamente a s. […]
on January 22nd, 2006 at 0:20
[…] Development thus far has been very similar to my Java days, but I decided to throw in a twist, I wanted to encorporate some sort of AJAX elements into the app. I am using a lightweight AJAX wrapper called SACK, it saves alot upfront legwork to get things set up and running. […]
on January 25th, 2006 at 22:57
[…] Lo script javascript principale, tornado.js, ha bisogno di una gran bella ripulita. All’inizio funzionava tutto senza appoggi esterni, alla fine ho optato per l’utilizzo di una libreria che facesse le cose principali ma che mi lasciasse libero di manipolare un po’ le cose. Ho scelto SACK. […]
on January 28th, 2006 at 1:23
[…] Twilight Universe » Simple AJAX Code-Kit (SACK) (tags: sack ajax php javascript development) […]
on January 30th, 2006 at 1:05
[…] Twilight Universe » Simple AJAX Code-Kit (SACK) […]
on February 20th, 2006 at 1:46
[…] Simple AJAX Code-Kit (SACK) […]
on February 27th, 2006 at 21:06
[…] Insofern würden sich für die Engines bestimmt viele Verwendungsmöglichkeiten ergeben. Momentan bin ich allerdings auf der Suche nach einer geeigneten, möglichst flexiblen aber trotzdem kleinen und schnellen Bibliothek, die in allen AJAX benötigenden Seiten schnell eingebunden werden kann. Dr. Web hatte vor kurzem eine gute Quellensammlung zum Thema AJAX veröffentlicht. Hier zu finden. Momentan sehe ich mir folgende AJAX Bibliotheken näher an: XAJAX, PHPAJAXTags, moo.fx und SACK. […]
on March 11th, 2006 at 5:44
[…] SACK is last on this list, but definitely not on functionality. In fact, it is good enough that an earlier version is used in WordPress 2.0 for all its AJAXy goodness. Just like advAJAX, you can customize your Javascript to perfection. The difference is in the syntax for setting parameters and calling functions, and boils down to personal preference. […]
on April 18th, 2006 at 19:19
[…] La collaborazione prevede anche la catalogazione della vasta biblioteca di pubblicazioni, cataloghi, fotografie, rassegne stampa (e altro) che in questi quarant’anni hanno riguardato la galleria. Una demo del programma utilizzato dal personale della galleria per creare l’archivio può essere vista qui (username: demo password: demonio), se ne può anche scaricare una copia da qui. Il programma è scritto in Php utilizzando MySQL, quelle quattro cose di Javascript sono fatte usando SACK. […]
on April 21st, 2006 at 19:44
[…] [Blog / Toolkit] http://twilightuniverse.com/resources/code/sack/ […]
on May 5th, 2006 at 5:43
[…] Hladal jsem co nejjednodušší způsob jak vyřešit na stránkách AJAX (Co je to AJAX ?). Podařilo se mi najít Simple AJAX Code-Kit (SACK). Tato jednoduchá třída SACK napsaná v Javascriptu umožní používat AJAX na stránce tak jednoduše jak to jen jde. Nakonec podívejte se sami : […]
on May 22nd, 2006 at 2:48
[…] SACK, Simple Ajax Code Kit. […]
on June 2nd, 2006 at 6:27
[…] http://twilightuniverse.com/resources/code/sack/ […]
on July 5th, 2006 at 21:11
[…] Simple AJAX Code-Kit (SACK) […]
on October 30th, 2006 at 23:06
How can i do function WaitForResponse - i need it. If it possible write me pls.
on November 2nd, 2006 at 9:44
Your code is so simple that it can be compatible with old browsers like IE5.
Other ajax code kit require IE5.5
I added the following code at the top of tw-sack.js to ensure this compatibility :
/* Compatibility with IE 5.0 */
if (typeof(encodeURIComponent) == ‘undefined’)
{
encodeURIComponent = function(uri)
{
return (escape(uri));
}
}
With this patch applied, it works fine even with IE5. Hope you take that into account.
on November 5th, 2006 at 20:29
dear ,
I want use class sack upload file .
i had been seach google but see nothing.
can u help me . code suorce upload file
i used target iframe but not finish .
thanks !
on November 8th, 2006 at 18:10
hii.. m a newbie.. i seem to get an trivial error in IE … donno da same file works well in FF.. damn… was jus checkin how the responses are collected thru SACK..
can you help..
heres my code..
var ajax = new sack();
function whenLoading(){
var e = document.getElementById(’searchResponse’);
e.innerHTML = “Sending Data…”;
}
function whenLoaded(){
var e = document.getElementById(’searchResponse’);
e.innerHTML = “Data Sent…”;
}
function whenInteractive(){
var e = document.getElementById(’searchResponse’);
e.innerHTML = “getting data…”;
}
function whenError(){
var e = document.getElementById(’searchResponse’);
e.innerHTML = “error getting data from server”;
}
function whenCompleted(){
var e = document.getElementById(’searchResult’);
document.getElementById(’searchResponse’).innerHTML = “”;
e.innerHTML = ajax.response();
}
function AJAXSearch(){
var form = document.getElementById(’form’);
//ajax.setVar(”searchStr”, form.searchStr.value); // recomended method of setting data to be parsed.
ajax.requestFile = “Response.aspx”;
ajax.method = “POST”;
ajax.element = ’searchResult’;
ajax.onLoading = whenLoading;
//ajax.onLoaded = whenLoaded;
ajax.onInteractive = whenInteractive;
ajax.onCompletion = whenCompleted;
ajax.onError = whenError;
ajax.runAJAX();
}
on November 8th, 2006 at 18:13
How about little modification
?
this.ProgID = [”MSXML2.XMLHTTP.5.0″, “MSXML2.XMLHTTP.4.0″, “MSXML2.XMLHTTP.3.0″, “MSXML2.XMLHTTP”, “Microsoft.XMLHTTP”];
this.createAJAX = function() { for(var i=0;i
on November 8th, 2006 at 18:15
well i am using IE 7.. may dat help u debug my cause..
on November 10th, 2006 at 10:07
srry it didnt help…
on November 16th, 2006 at 15:16
Gregory
There seems to be a minor bug in lines 164-5 of tw-sack.js where you have:
elemNodeName = self.elementObj.nodeName;
elemNodeName.toLowerCase();
As a result case of elemNodeName is not changed - strings are not mutable.
How about:
elemNodeName = self.elementObj.nodeName.toLowerCase();
That should do the trick.
Cheers,
L.
on November 20th, 2006 at 15:43
Hi. First i want to thank you by thil lovely piece of code. It simplified my life and i could start to play with ajax with few knowledge of javascript.
But now i have a problem. i have a script that pulls a php document that i want to have some javascript in it. But when i parse the request, the javascript in that page doesn´t execut. how do i do that?
this is my function:
function login(){
var login = document.getElementById(”login”);
var password = document.getElementById(”password”);
doc_login = new sack();
doc_login.setVar(”login”, login.value);
doc_login.setVar(”password”, password.value);
doc_login.requestFile = “fichas/login_auth.php”;
doc_login.method = ‘GET’;
doc_login.element = ’substituir’;
doc_login.runAJAX();
}
Now the login_auth.php has a javascript embebed that i want to execute.
how do i use the:
runResponse and (Boolean) execute
in my function in order to perform this?
Thanks a lot for your help and i apologise for my bad english
Cumps
Diogo Velho
on November 24th, 2006 at 11:45
dfdfdf df sf s sdsdff dfs df sf sd sff df sdfsdf dsfsd
on December 3rd, 2006 at 15:41
MEMORY LEAKAGE
———————————————-
Hi, I have experienced some memory leakage problems in IE while using the sack library(almost 1 MB for each reload).
I saw on your old page a comment regarding adding
self.URLString = “”; delete self.xmlhttp[’onreadystatechange’]; self.xmlhttp=null; self.responseStatus=null;
at the bottom of the “case 4″ block.
This seams to solve the memory leak problems I had.
Are you planning to add some memory cleanup code to your download file?
Thank you.
on December 5th, 2006 at 7:11
1.2 in WP versus 1.6.1 — i tried upgrading the tw-sack.js that is included with wordpress to 1.6.1 in hopes of fixing an intermittent bug we are seeing in the wp-polls plugin we are using ( http://www.lesterchan.net/portfolio/programming.php ). just as an fyi, v1.6.1 broke the functionality of the polls plugin. specifically, when you click on the “view results” on the bottom of the poll, it shows the results, but then clicking “vote” on the results page does not bring you back to the voting as it should (and does with 1.2 tw-sack.js). i am not sure where the bug is (it could be in the polls code i suppose and only surface now), but just wanted to mention it here that simply dropping in 1.6.1 may not always guarantee exact same behavior. thanks for the code and hard work, btw.
on December 8th, 2006 at 0:44
Sack is great. I adjusted it to suit my needs, due to a typical problem with callbacks in JS. When using sack from an object, the “this” context is lost. I added a myObject class variable in sack to solve this problem:
this.myObject = this; // in resetData()
and changed each callback line in sack (onLoading, onInteractive, onCompletion, onError and onFailed) to something like this :
//self.onLoading(); // old code
self.onLoading.call(self.myObject); // new code
BTW - onFailed uses “this” - not “self”. Anyway, it works for object callbacks and non-object callbacks alike, even though there’s no condition (the non-obj callbacks get the sack obj as “this” context - which should do no harm). You can use only one object of course.
I use a different technique to create classes in JS, but here’s a simple example to get anyone interested going :
TestClass = function()
{
this.my_var = “hey yo”; // a variable wanting to be retrieved in the callback
this.sack = new sack();
this.sack.myObject = this; // set the callback object to “this”
this.sack.onCompletion = this.myCallback; // set a callback
// more sack stuff…
}
// the callback function. “this” should be set correctly
TestClass.prototype.myCallback = function()
{
alert(’yo yo mamma - ‘ + this.my_var); // “yo yo mamma - hey yo”
}
var test_it = new TestClass();
on December 10th, 2006 at 0:58
I want to report an issue.
Reusing a sack object inside a callback doesn’t work. It is useful to do this, e.g. you queue AJAX requests so only one is pending at a given time. The callbacks are used to trigger sending a queued request. But since the URLString is reset *after* the callbacks in the sack code (in sack, callbacks are referred to as Functions) - reusing the sack object to send another AJAX request results in the URLString being a concat of the prev and current URL.
There are a few work-arounds :
- Manually clear the URLString before using the object again. Sack will clear the URLString will immediately after sending the request, so ur code can’t rely on this variable being populated.
- use a setInterval mechanism in your callback code, so the sack object finishes clearing out the URLString before you use it again.
- Create and use another sack object - though this gets messy with potential repercussions of memory leakage and managing multiple objects.
The first is simple enough. But I see a previous post on this page from Alf Magne regarding an IE memory leakage issue. I assume the problem is that in reloading a page which has completed a sack AJAX request, IE doesn’t deallocation sack related memory. The fix he mentions involves clearing sack resources after the response, I guess to force JS garbage collection. This code is where the URLString = “” — AFTER the callbacks.
This means reusing a sack object back-to-back needs reset() and createAJAX() called in between - to get those resources back. It also means reusing a sack object inside a callback is impossible. It would totally break it. Those resources would get cleared immediately after the next request is sent.
The setInterval workaround in callback code would work in this case, but it’s a messy thing to expect users of a simplified API to do!
So.. if one wanted to incorporate the IE memory leakage fix, this should be taken into consideration. I think the easiest approach is to allow the user to invoke the clean-up code. It involves another step (like calling a “cleanUp()” member), and needs another call to reallocate those resources too (equiv of the reset() and createAJAX()) if the object is reused. But it’s two simple calls - and only needed by those who wish to avoid the IE memory leakage issue. It’ll work without it anyway.
The other thing I suggest regardless is to have a “clearURLString()” routine, and not do this automatically in sack. The problem I had - I copied the code from the included examples. Reusing an object back to back works, because sack clears the URLString, but not if you reuse an object inside a callback. If the example code had a simple clearURLString() call prior to calling setVar() etc, it would work for all cases. And people like me would have copied this from the example and have no problems.
Just when you think writing a simple AJAX API was easy! AIYA! Despite its corner-cases, it’s neat. thanks for writing it.
on December 13th, 2006 at 14:46
I’m using the AJAX SACK code you’ve written and it’s great, but when I write a n input box with the “onkeyup=doit();” methodology, it never appears to be up to date information; secondly if you type real fast it always sticks in the “loading” phase, sometimes I *have* to press the submit button to force the loading to stop and to get the latest information.
Why is the information I type in always old information, and why is it less responsive the faster you type?
IE:
[code]
Company:
[/code]
on December 14th, 2006 at 20:26
[…] Meanwhile I’m still using a very light Javascript library that gives me the flexibility I like: the Simple AJAX Code-Kit (SACK). Of course the two solution (GWT from one side and SACK from the other) represent the two possible approach to a feature like AJAX: GWT is a Framework aimed to reduce the development and testing time, while SACK is aimed to a more “standard” approach, simply giving a simple set of functions. Well, two different visions, both interesting and both with virtues and flaws… (of course GWT is Google, therefore I think that there must be a lot of quality in its heart!) […]
on December 28th, 2006 at 17:13
Hello,
I am using de sack ajax stuff. But I’ve got a problem with the radiobuttons. Using textfields is no problem. The next code I am using. The radiobuttons are named “antwoord_vraag” Hiddin field “go”is allright
Please help me…
function doit_poll(){
var form = document.getElementById(’pollform’);
ajax.setVar(”antwoord_vraag”, form.antwoord_vraag.value); // recomended method of setting data to be parsed.
ajax.setVar(”go”, form.go.value); // recomended method of setting data to be parsed.
ajax.requestFile = “external/poll.php”;
ajax.method = “POST”;
ajax.element = ‘replaceme’;
ajax.runAJAX();
}
on January 13th, 2007 at 2:56
Ajax, well, i guess it is not good for SEO.
on May 24th, 2007 at 16:46
[…] SACK […]
on July 22nd, 2007 at 7:54
[…] Simple AJAX Code-Kit (SACK) : SACK is exactly what it says it is: A simple set of code to allow you to put AJAX into your webpages with none of the fuss or overhead of other packages. Just AJAX, just simple. Good documentation included in the download bundle. […]
on July 29th, 2007 at 12:43
[…] Sack → Lo usa wordpress […]
on August 5th, 2007 at 11:22
[…] меня хитро :), благо в PHP я еще не спец. Поэтому я взял другой пакетик, под надванием SACK - Simple AJAX Code-Kit. Там действительно все […]
on August 14th, 2007 at 11:57
[…] SACK […]
on August 16th, 2007 at 4:21
[…] SACK […]
on October 25th, 2007 at 12:45
[…] my ajax requests I use SACK, Simple Ajax Code-Kit. It’s not any kind of ultra super widget collection or anything, […]
on October 26th, 2007 at 23:30
[…] Twilight Universe » Simple AJAX Code-Kit (SACK) SACK is exactly what it says it is: A simple set of code to allow you to put AJAX into your webpages with none of the fuss or overhead of other packages. Just AJAX, just simple. (tags: ajax javascript framework toolkit library webdesign webdev programming simple web development) […]
on November 26th, 2007 at 5:48
[…] SACK […]
on November 29th, 2007 at 15:41
[…] you see I use sack for my ajax requests. You can use wathever you feel like, but if you stick with sack you […]
on December 8th, 2007 at 22:09
[…] http://twilightuniverse.com/projects/sack Documentação: Incluído no download Sites que usam Sack : Não […]
on February 13th, 2008 at 14:16
[…] 9.SACKA simple set of code to allow you to put AJAX into your webpages with none of the fuss or overhead of other packages.It makes using AJAX simpler, and easy to implement. […]
on February 22nd, 2008 at 20:03
[…] Sack […]
on February 22nd, 2008 at 20:03
[…] Sack […]
on February 23rd, 2008 at 11:24
[…] SACK […]
on February 23rd, 2008 at 11:26
[…] SACK […]
on February 23rd, 2008 at 11:27
[…] SACK […]
on February 28th, 2008 at 22:02
Moving truck rental orlando….
U-haul truck rental. Rollins truck rental and leasing. Moving truck rental orlando. Rental moving truck. Truck rental. Bucket truck rental san antonio….
on April 24th, 2008 at 3:19
[…] Enlace: http://www.twilightuniverse.com/projects/sack/ […]
on May 10th, 2008 at 15:57
03142edc6547…
03142edc6547e4e14977…
on June 9th, 2008 at 18:34
[…] 9.SACK A simple set of code to allow you to put AJAX into your webpages with none of the fuss or overhead of other packages.It makes using AJAX simpler, and easy to implement.SACK is released under a Modified X11 licence. […]
on June 15th, 2008 at 4:09
[…] 建一目錄 js，並 下載 Ajax 程式碼 (SACK) 於 js/ […]
on July 13th, 2008 at 23:03
Rivotril mexico….
Buy rivotril mexico. Rivotril. Rivotril mexico. Buy rivotril with same day delivery….
on August 20th, 2008 at 2:15
Ximo ephedra….
Ximo ephedra….