jx - JavaScript Ajax Library
jx is a small toolkit for providing AJAX support in JavaScript. It has two different version - jx and jxs.
jx - Lite Vesion - V3.00.A
This provides the most basic Ajax support. It is striped down to minimise file size - so it will not support many advanced features. You can pass data to the server side script using the GET method only. The supported return types are plain text and JSON. It does NOT support XML return.
See a line by line explanation of what the code does...
Demo
jx Demonstration.Features
- Supports GET method
- Supports JSON.
- Small Size (>1 KB compressed / 2.3 KB with all the comments)
- Very easy to use.
Samples
jx.load('demo.php?dummy=text&lorem=ipsum',function(data){
alert(data); // Do what you want with the 'data' variable.
});
For more samples, see the jx Demonstration page. Code is provided for more advanced uses of jx like using JSON returns.
Code
Source - jx.js File
Compressed Source File
Take a look at the explanation page to see what happens in the code.
jxs - jx excess - V2.01.A
This is a slightly larger version of jx - hence the name j excess. It supports many features that the lite version don't support. The file size is slightly bigger - but its worth it.
Features
- Supports both POST and GET methods
- Supports XML return.
- Supports customizable loading indicator display
- Automatically update a given element with returned text.
- Customizable
onReadyStateChangehandler - And more...
Comments
The code in jxs.js where it says "if (XMLHttpRequest)" will give this error in IE6:
'XMLHttpRequest' is undefined
I had to change it to "if (window.XMLHttpRequest)" to get it to work in IE6 (and it still works in IE7, Opera 9.10, Firefox 1.5.0.10).
I'm using the jx (it helps me a lot ehehhe) and I discovered that it will always send the variables using the GET method. I needed to send using POST method, so I've changed the source to support the POST method too.
I just found another Ajax loading generator on www.webscriptlab.com, lets you generate loading icons on demand for your applications. Pretty cool stuff! ...
jx.load('demo.php?dummy=text&lorem=ipsum',function(data){
returned_data = data;
alert(data); // Do what you want with the 'data' variable.
});
Now the 'returned_data' is a global variable with the contents of data.
Index: jxs.js
*** /home1/homedir/alanbur/tonic/auth/trunk/AuthWebapp/web/javascript/jxs.js Base (BASE)
--- /home1/homedir/alanbur/tonic/auth/trunk/AuthWebapp/web/javascript/jxs.js Locally Modified (Based On LOCAL)
***************
*** 1,10 ****
! jx={http:false,format:'text',callback:function(data){},handler:false,error:false,opt:new Object(),
getHTTPObject:function(){var http=false;if(typeof ActiveXObject !='undefined'){try{http=new ActiveXObject("Msxml2.XMLHTTP");}catch(e){
try{http=new ActiveXObject("Microsoft.XMLHTTP");}catch(E){http=false;}}
}else if(XMLHttpRequest){try{http=new XMLHttpRequest();}catch(e){http=false;}}return http;},
load:function(url,callback,format,method){this.init();if(!this.http||!url)return;
if(this.http.overrideMimeType)this.http.overrideMimeType('text/xml');this.callback=callback;
! if(!method)var method="GET";if(!format)var format="text";this.format=format.toLowerCase();
method=method.toUpperCase();var ths=this;var now="uid="+new Date().getTime();url+=(url.indexOf("?")+1)?"&":"?";
url+=now;var parameters=null;if(method=="POST"){var parts=url.split("\?");url=parts[0];parameters=parts[1];}
this.http.open(method,url,true);if(method=="POST"){
--- 1,10 ----
! var jx={http:false,format:'text',callback:function(data){},handler:false,error:false,opt:new Object(),
getHTTPObject:function(){var http=false;if(typeof ActiveXObject !='undefined'){try{http=new ActiveXObject("Msxml2.XMLHTTP");}catch(e){
try{http=new ActiveXObject("Microsoft.XMLHTTP");}catch(E){http=false;}}
}else if(XMLHttpRequest){try{http=new XMLHttpRequest();}catch(e){http=false;}}return http;},
load:function(url,callback,format,method){this.init();if(!this.http||!url)return;
if(this.http.overrideMimeType)this.http.overrideMimeType('text/xml');this.callback=callback;
! if(!method)method="GET";if(!format)format="text";this.format=format.toLowerCase();
method=method.toUpperCase();var ths=this;var now="uid="+new Date().getTime();url+=(url.indexOf("?")+1)?"&":"?";
url+=now;var parameters=null;if(method=="POST"){var parts=url.split("\?");url=parts[0];parameters=parts[1];}
this.http.open(method,url,true);if(method=="POST"){
Using this function:
It returns the proper values from the server, BUT the Error Console reports this:
As you can see, Firefox puts the error in the language of the user (Spanish, in this case).
No matter what textual response I get from the server "Válido" or "No válido", I get in the Error Console the indicated error. Here is the other case:
It is as if your function were collecting the response from my application as part of a Javascript code.
Good work!
Please fix it and it will be just a perfect! I like it! Thank you!
I do have a problem with multiple ajax calls - e.g. :
both servlets are called but only the second callback function is then called. Apparently it the second overwrites the first callback function ?
Can you explain how to solve that ?
Thanks
Hear is the new code:
//V3.00.A - www.openjs.com/scripts/jx/
// modified to enable (or at least try to enable) concurrent use
jx = {
//http:false, //HTTP Object
//format:'text',
//callback:function(data){},
//error:false,
//Create a xmlHttpRequest object - this is the constructor.
getHTTPObject : function() {
var http = false;
//Use IE's ActiveX items to load the file.
if(typeof ActiveXObject != 'undefined') {
try {http = new ActiveXObject("Msxml2.XMLHTTP");}
catch (e) {
try {http = new ActiveXObject("Microsoft.XMLHTTP");}
catch (E) {http = false;}
}
//If ActiveX is not available, use the XMLHttpRequest of Firefox/Mozilla etc. to load the document.
} else if (XMLHttpRequest) {
try {http = new XMLHttpRequest();}
catch (e) {http = false;}
}
return http;
},
// This function is called from the user's script.
//Arguments -
// url - The url of the serverside script that is to be called. Append all the arguments to
// this url - eg. 'get_data.php?id=5&car=benz'
// callback - Function that must be called once the data is ready.
// format - The return type for this function. Could be 'xml','json' or 'text'. If it is json,
// the string will be 'eval'ed before returning it. Default:'text'
load : function (url,callback,format) {
var http = this.init(); //The XMLHttpRequest object is created at every call - to defeat Cache problem in IE
if(!http||!url) return;
if (http.overrideMimeType) http.overrideMimeType('text/xml');
if(!format) var format = "text";//Default return type is 'text'
format = format.toLowerCase();
if (http.overrideMimeType) http.overrideMimeType('text/xml');
//Kill the Cache problem in IE.
var now = "uid=" + new Date().getTime();
url += (url.indexOf("?")+1) ? "&" : "?";
url += now;
http.open("GET", url, true);
http.onreadystatechange = function () {//Call a function when the state changes.
if (http.readyState == 4) {//Ready State will be 4 when the document is loaded.
if(http.status == 200) {
var result = "";
if(http.responseText) result = http.responseText;
//If the return is in JSON format, eval the result before returning it.
if(format.charAt(0) == "j") {
//\n's in JSON string, when evaluated will create errors in IE
result = result.replace(/[\n\r]/g,"");
result = eval('('+result+')');
}
//Give the data to the callback function.
if(callback) callback(result);
} else { //An error occured
if(error) error()
}
}
}
http.send(null);
},
init : function() {return this.getHTTPObject();}
}
I is rely happy for you script,
Is is vary esye to user.
Vary god, i tink ajax normal is vary hard.
/ FIG
function clone(myObj)
{
if(typeof(myObj) != 'object') return myObj;
if(myObj == null) return myObj;
var myNewObj = new Object();
for(var i in myObj) myNewObj[i] = clone(myObj[i]);
return myNewObj;
}
I think you need more examples.
Thanks again.
btw, I have the same problem as the other users, I can't have multiple request at the same time but I hope it will be fixed in next versions.
thanks!
if(ths.error) ths.error()It's bad - no specified parameters.
In jxs error-handler calling like this:
if(ths.error) ths.error(http.status);(good - I can see why this error occurred)But, if use method 'bind', for calling jxs, error-handler again calling without arguments:
if(opt.onError) this.error = opt.onError;May be give arguments in all calling?
P.S. Thanx for jx.
Sorry for my inglish :)
The line
if (this.http.overrideMimeType) this.http.overrideMimeType('text/xml');in lite version meets twice. Mistake?
Thankyou.
jx.load('demo.php?dummy=text&lorem=ipsum', function(data){
returned_data = data;
});
...returned_data is undefined in further code. I call jx.load always in a function, like this:
function name() {
jx.load('demo.php?dummy=text&lorem=ipsum', function(data){
returned_data = data;
});
}
Does it have to do something with that?
Thank you very much for your help...
Also the comment by Yaroslav about jxs still having "if (XMLHttpRequest)" code instead of "if (window.XMLHttpRequest)". -- as my javascript skills are lacking i do not know if this is a required change (i could change it, but i dont know if it would be for the best)
Thanks for your help!
Cheers.
+1
If you want "data" to be global, then you can do something like this:
<script>
var my_global_data_variable;
js.load('/whatever/?blah=bleh', function(data){
my_global_data_variable = data;
});
</script>
jx.load(req_1);
// Wait and process the req_1 result here
jz.load(req_2);
// Wait and process the req_1 result here
...
Of course, I can place jz.load(req_2); into the callback fn for req_1 etc., but it makes the code too unclean for reading.
How to do it?
Please :(
'error' undefined...
What should i dow?
ie :
function error(status){
//do the stuff
}
@Binny V A, i think registering a custom error handler will be good, ie we can pass error handler as a function parameter.
Thnx for this simple and great library.
a, strong, em, b, i, code, pre, pandbrallowed. Other tags will be shown as code(< will become <). Urls, Line breaks will be auto-formated.