Surebert makes ajax a breeze. These are the formats used when working with sb.ajax objects. See surebert documents for full details on all the options available with sb.ajax objects. These are only a few of the options avaiable to you but should cover most basic data transfer. If you would like to see the data as it loads and is processed set the debug consol to on.
Plain Text - Loading plain text based data from the server is simple. In fact it is the defaul format of sb.ajax objects and can be useful for updating parts of the DOM with data from your server side code. When you click the Load Text button, sb.ajax will load a text string from the server that looks something like this "Hello there 10.9.60.136 its already 01/29/07 17:49:33" but with your ip and the current time. The text in can be plain text or formatted HTML including css styles
//this is just an example of the syntax, the actual code running the json button can be seen in the source code
var myAjax = new sb.ajax({
debug : 1,
format : 'text', //this is the default - so its not required
url : 'myServerSidePage.php',
//optional data to send
data : {
name : 'joe',
day : 'monday'
},
handler : function(txt){
//you can use this text as a string once it loads
alert(txt);
}
});
myAjax.fetch();
Node Sync - Node sync allows you to easily sync the contents of a DOM node innerHTML to the contents of a serverside file. While you can do this yourself using the text format above and specifying the node in the handler function it is even easier to use the node format by specifying the node in the sb.ajax instance.
//this is just an example of the syntax, the actual code running the json button can be seen in the source code
var myAjax = new sb.ajax({
debug : 1,
node : '#myNodesId',
url : 'myServerSidePage.php',
//optional data to send
data : {
name : 'joe',
day : 'monday'
}
});
myAjax.fetch();
JSON - Javascript Object Notation - see json.org for more information. A simple way of serializing javascript objects which makes them ideal data transfer strings. Also see php 5.2's json_encode and json_decode which can turn native php objects into json objects and vice cersa. When you click the Load JSON button, sb.ajax will load a jsonstring from the server that looks something like this {ip:"10.9.60.136", time : "01/29/07 17:49:33"} but with your ip and the current time.
//this is just an example of the syntax, the actual code running the json button can be seen in the source code
var myAjax = new sb.ajax({
debug : 1,
format : 'json',
url : 'myServerSidePage.php',
//optional data to send
data : {
name : 'joe',
day : 'monday'
},
handler : function(obj){
//once the object arrives you can use its properties as you woudl with any javascript object
alert(obj.myProperty);
}
});
myAjax.fetch();
XML - sb.ajax instances can also easily read xml, although I would suggest moving toward a pure JSON based system as it is more bandwidth efficient and much easier to parse. When you click the load XML button, sb.ajax will load an xml file from the server that looks something like this <data><ip>10.9.60.136</ip><time>01/29/07 17:49:33</time></data> but with your ip and the current time.
//this is just an example of the syntax, the actual code running the json button can be seen in the source code
var myAjax = new sb.ajax({
debug : 1,
format : 'xml',
url : 'myServerSidePage.php',
//optional data to send
data : {
name : 'joe',
day : 'monday'
},
handler : function(xml){
//would alert the ip
alert(xml.firstChild.nodeValue);
//would also alert the ip
alert(xml.getElementsByTagName('ip')[0].nodeValue);
}
});
myAjax.fetch();
While AJAX stands for Asynchronous Javascript and XML, just like we don;t use it with XML sometimes, also sometimes you want the data to be fetched synchronously. Synchronous requests cause all javascript executation to halt until the data comes back from the request. This is escpecially important if you are loading new javacript function which are to be used later in the code.
//this is just an example of the syntax
var myAjax = new sb.ajax({
async : 0, //not asynchronous
url : 'myServerSidePage.php',
//optional data to send
data : {
name : 'joe',
day : 'monday'
},
handler : function(data){
//do something with the data
}
});
myAjax.fetch();
If you are using synchronous requests this to load javascript you can use surebert's load function as an alternative. The file is eval'd when it is received and all global functions will become avavailable to your script at that point. Make sure the data comes from a trusted source.
sb.load('../js/myjavascriptfile.js');