pi.xhr2009-01-06 09:23:29
Summary
A javascript class that provides to create ajax requests.
Syntax
var foo = new pi.xhr(url);
foo.addData(key,value);
foo.environment.setType('POST');
foo.send();
Usage Example
var foo = new pi.xhr("rss.php").addData("do","getNews").environment.setType('POST').send();
Properties
api
The XMLHttpRequest object that provides the transfer.
Methods
abort
Cancels the request.
addCallback
Pi will control the added value call-backs of the changing readyState values. The scope of the executed function is the object pi.xhr.
addData
Adds given data data to the request will be sent.
environment.setAsync
It provides determining the request is asynchronous or not.
environment.getApi
Gets the XMLHttpRequest object.
environment.setApi
Sets the XMLHttpRequest object.
environment.setCache
Determines if the ForceCache parameter will be send.
environment.setType
Determines the request type, GET or POST should be entered. If the request type is POST, pi.xhr sets the content type to "application/x-dom-event-stream".
StaticMethods
get
Sends a synchronic request and returns a XMLHttpRequest object.
Examples
Example #1: Get response from printUnixtime.php
Source files of the above example:
getUnixtime.html
<div id="time"></div>
getUnixtime.js
var req = new pi.xhr("unixtime.php");
req.environment.addCallback([4],function(){
pi.get("time").innerHTML=this.api.responseText;
});
req.send();
unixtime.php
<? print time(); ?>
Example #2: Post a form data to a serverside script.
Source files of the above example:
post.html
<label>Name:</label><input id="i_name" name="name" /><br />
<label>Age:</label><input id="i_age" name="age" /><br />
<label>Pick a color:</label>
<select id="i_color">
<option>Red</option>
<option>Green</option>
<option>Blue</option>
</select><br />
<button onclick="Send()">Send</button>
<br /><br /><strong>Response:</strong><br />
<div id="response">
Not was pushed.
</div>
post.js
var Send = function(){
var req = new pi.xhr("post.php").
environment.addData("name",pi.get("i_name").value).
environment.addData("age",pi.get("i_age").value).
environment.addData("color",pi.get("i_color").value).
environment.addCallback([4],function(){
pi.get("response").innerHTML=this.api.responseText;
}).
environment.setType("POST").
send();
}
post.php
<?
print "Name: ".$_POST["name"];
print "<br />Age: ".$_POST["age"];
print "<br />Color: ".$_POST["color"];
?>