Download jigsaw.js samples.zip
Jigsaw is a small javascript framework for AJAX.

First you need to download the prototype library from http://prototype.conio.net/. Then include the javascripts in your header like this :

<script src="prototype.js" type="text/javascript" language="javascript"></script>
<script src="jigsaw.js" language="javascript" type="text/javascript"></script>

After that you just have to call the request function.

<script>
var request = new Ajax.Request('test.xml');
</script>

It can be either a static xml page or dynamically generated one, it doesn’t matter. The xml file describes what to do next.

Here is a sample xml.

<?xml version="1.0" encoding="iso-8859-1"?>
<response>
<element id="header">World!</element>
<element id="header" attribute="style">font-size:16px</element>
<element id="image1" attribute="src">picture2.jpg</element>
<script>alert('Text inside script tags are executed')</script>
</response>

Your html page should have two elements like this :
<div id="header">Hello</div>
<img id="image1" src="picture1.jpg" />

It’ll update the content of the header div to “World!”, make the font size larger and the change the picture to “picture2.jpg”.

You can also create javascript objects.

<?xml version="1.0" encoding="iso-8859-1"?>
<response>
<object>
<attribute name="name">Person1</attribute>
<attribute name="age">20</attribute>
</object>
<object age="30">
<attribute name="name">Person2</attribute>
</object>
<object name="Person3" age="40" />
</response>

Then you have to create a function to process the objects.

function process_objects(response) {
for (var i=0;i<response.objects.length;i++) {
alert(response.objects[i].name+" = "+response.objects[i].age);
}
}

The request should be like -

var request = new Ajax.Request("objects.php",{onFinish:process_objects});

You can also access the XMLHTTP Object from response.transport

This function is called after the pre-processing, if you want to process something before pre-processing use onComplete option.

Tags: Ajax, Javascript