Http
The Http namespace contains functionality used to make asynchronous requests to the server, making it possible to send and receive data between the browser and server without reloading the page.
Request
var req = new Fit.Http.Request("SetData.php");
req.AddData("Name", "Jimmy");
req.AddData("Age", "31");
req.AddData("Gender", "Male");
req.OnStateChange(function(sender)
{
// Get state - 0 = unsent, 1 = opened, 2 = headers received, 3 = loading, 4 = done
var state = req.GetCurrentState();
// Get HTTP status - e.g. 200 Success, 404 Not Found, 500 Internal Server Error, etc.
var status = req.GetHttpStatus();
console.log("State changed to " + state + " and HTTP status is " + status);
});
req.OnSuccess(function(sender)
{
var txt = req.GetResponseText(); // Get response as text
var json = req.GetResponseJson(); // Get response as JSON
var xml = req.GetResponseXml(); // Get response as XML/HTML DOM Document
console.log("OnSuccess - data received: " + txt);
});
req.OnFailure(function(sender)
{
console.log("OnFailure - failed with HTTP status " + req.GetHttpStatus());
});
req.AddHeader("My-Header", "Header value");
req.Start();
JsonRequest
Often we use JSON to send and retrive data from the server. The JsonRequest class is a more convient way to make requests and work with JSON. JsonRequest is an extension of Request, making all the same features available, and more.
var req = new Fit.Http.Request("SetData.php");
req.SetData({ Name: "Jimmy", Age: 31, Gender: "Male" });
req.OnSuccess(function(sender)
{
var resp = req.GetData(); // Returns JSON response from server
console.log("OnSuccess - server response: ", resp.Status + " - " + resp.Message);
});
req.OnFailure(function(sender)
{
console.log("OnFailure - failed with HTTP status " + req.GetHttpStatus());
});
req.Start();
How the JSON is received on the server differs - below is an example of how to retrieve the response using PHP.
$data = file_get_contents("php://input"); // Read raw JSON data sent to server
$jsonArray = json_decode($data, true); // Turn JSON text into associative array
var_dump($jsonArray); // Display response data
JSONP
If data needs to be loaded from a server on another domain, we need to use JSONP (
see Wikipedia on JSONP) to circumvent the
same-origin policy. Fortunately this is easy with Fit.UI.
var http = new Fit.Http.JsonpRequest("GetUsers.php");
http.Callback("MyJsonCallback"); // Fit.UI will provide a JSONP callback function
http.Timeout(10);
http.SetParameter("Search", "Jim");
http.OnSuccess(function(r)
{
var data = http.GetResponse();
console.log("Data received: ", data);
});
http.OnTimeout(function(sender)
{
alert("Error - no response within " + http.Timeout() + " seconds");
});
http.Start();
JSONP requires the server to wrap the data in a JavaScript function call. The name of the function to wrap the data in is passed to the server via the URL in the "MyJsonCallback" argument. In PHP, the server would do something like shown below.
$callback = $_GET["MyJsonCallback"];
echo $callback . "({Name: 'Jimmy', Age: 31, Gender: 'Male'});";