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.
