OpenJS > Scripts > jx - JavaScript Ajax Library > jx - JavaScript Ajax Library

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.2 KB compressed / 2.6 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 - 2.6 KB
Compressed Source File - 1.2 KB

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 onReadyStateChange handler
And more...

Demo

jxs Demonstration.

Code

Source - jxs.js File - 5.6 KB
Compressed Source File - 2.9 KB

Comments

ben at 22 Mar, 2007 05:47

I'm using jx excess - V2.01.A.
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).

Binny V A at 23 Mar, 2007 05:46

Thanks for alerting me - I will fix it as soon as possible.

Binny V A at 23 Mar, 2007 01:01

Ok - its fixed now. Thanks for reporting this.

wyo at 05 Apr, 2007 12:48

How about publishing the full sample code (server and client side) for download?

Binny V A at 05 Apr, 2007 08:57

If you give me your email address, I will send you the server side code. I don't see any point in publishing it here. If you want the code, just send me a mail. My Address is binnyva, gmail.

Thiago Ricieri at 16 Apr, 2007 06:15

Hi,

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.

Binny V A at 16 Apr, 2007 10:21

Hate to break this to you - but I have already done that - in jxs.

Anonymous at 20 Apr, 2007 11:47

Can't find the license...

Binny V A at 20 Apr, 2007 12:20

BSD License - like all other scripts in this site.

Anonymous at 02 Jun, 2007 09:08

this maybe is using for ajax coders.
I just found another Ajax loading generator on www.webscriptlab.com, lets you generate loading icons on demand for your applications. Pretty cool stuff! ...

Anonymous at 18 Jul, 2007 11:01

I would like to use the "data" variable as a global variable. How would you do that? Thanks!

Binny V A at 19 Jul, 2007 01:33

Do something like this

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.

gymnasium at 12 Aug, 2007 06:41

nice site...and nice tutorial

Saqib Razzaq at 05 Sep, 2007 12:36

its a nice script. I want to use it with ASP.Net and SQL Server DB values based on the search text entered in the textbox.

Binny V A at 05 Sep, 2007 08:00

This is a client side technology - it does not matter what you are using on the server.

Anonymous at 30 Oct, 2007 08:26

It would be nice if there was some proper documentation, other than the demo app - which frankly I can't make head or tail of.

Alan Burlison at 31 Oct, 2007 10:20

The current compressed version of jxs.js generates some Javascript warnings, diffs below:

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"){

Franz Fortuny at 12 Nov, 2007 10:57

Using this function:



function ValidaUser()

{

 jx.load("valuser?user="+document.forms[0].user.value,

         function(data){document.getElementById('user').innerHTML=data;},

		"text","GET");

}

It returns the proper values from the server, BUT the Error Console reports this:



Error: error de sintaxis

Archivo Fuente: localhost/cgi-bin/glaw.exe/valuser?user=frafor&uid=1194892808062

Línea: 1, Columna: 1

Código Fuente:

No válido^

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:



Error: error de sintaxis

Archivo Fuente: localhost/cgi-bin/glaw.exe/valuser?user=kjkdj&uid=1194892730953

Línea: 1, Columna: 1

Código Fuente:

Válido^

It is as if your function were collecting the response from my application as part of a Javascript code.

Good work!

Yaroslav at 22 Nov, 2007 05:26

jxs still has "if (XMLHttpRequest)" code instead of "if (window.XMLHttpRequest)".
Please fix it and it will be just a perfect! I like it! Thank you!

Anonymous at 29 Nov, 2007 08:35

Hi,

I do have a problem with multiple ajax calls - e.g. :

var litRepURL = "Locus2Publications?locus=" + agiCode + "&queryID=" + squeryID;

jx.load(litRepURL, function(data){

    showAggregator(data, "litrep");

}, "json","get");

    

var taigaURL = "Locus2Images?locus=" + agiCode + "&queryID=" + squeryID;

jx.load(taigaURL, function(data){

    showAggregator(data, "taiga");

}, "json","get");

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

germán at 22 May, 2008 03:28

Hello, I have the same problem. I modified the jx.js file to avoid references to "this". Now it's works OK at least on IE6 and FF. I don't know what consecuences will this have....

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();}

}

FIG-GHD742 at 15 Apr, 2008 07:31

Hello.

I is rely happy for you script,
Is is vary esye to user.
Vary god, i tink ajax normal is vary hard.

/ FIG

Anonymous at 19 May, 2008 05:04

I ran into the same problem with jx callbacks being overwritten by multiple requests. So I now clone the jx object and call clone(jx).load instead of jx.load

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;
}

Anonymous at 28 May, 2008 10:07

Interesting, this function may be supposed to help newbie (like me), but after few hours of trying to figure out how to use it, I still don't know how to access data that it fetched from php, but I know how 90% of it works.
I think you need more examples.

Comment Formating : HTML tags a, strong, em, b, i, code, pre, p and br allowed. Other tags will be shown as code(< will become <). Urls, Line breaks will be auto-formated.