Transport-API (AJAX)
qooxdoo comes with an advanced transport layer. This layer could be used for client-server communication.
This system is (as everything else in qooxdoo) completely event based. It currently supports communication through xmlhttp or iframes. The system wraps most of the differences between the implementations and unifies them for the user/developer.
For all your communication needs you need to create a new instance of QxRequest:
var req = new QxRequest(url, "GET", "text/plain");
Constructor arguments of QxRequest:
- URL: Any valid http/https/file URL
- Method: You can choose between POST and GET.
- Response mimetype: What mimetype do you await as response
Mimetypes supported
- application/xml
- text/plain
- text/html
- text/javascript
- text/json
text/javascript and text/json will be directly evaluated. As content you will get the return value.
If you use the iframe the functionality of the type is more dependent on the server side response than for the xmlhttp case. For example the text/html mimetypes really need the response in HTML and can’t convert it. This also depends greatly on the mimetype sent out by the server.
Request data
setRequestHeader(key, value): Setup a request header to send.getRequestHeader(key): Returns the configured value of the request header.setParameter(key, value): Add a parameter to send with your request.getParameter(key): Returns the value of the given parameter.
Parameters are currently always sent using GET. Even if you select POST. This issue is already known and will be fixed with an enhanced data handling for our transport API in the future.
Request configuration (properties)
asynchronous: Should the request be asynchronous? This is enabled by default. Otherwise it will stop the script execution until the response was received.data: Data to send with the request. Only used for POST requests. This is the real post data. Generally this is a string of url-encoded key-value pairs.username: The username to authorize for the server. Configure this to enable authorization.password: The password to authorize for the server.timeout: Configure the timeout in milliseconds of each request. After this timeout the request will be automatically cancelled.prohibitCaching: Add a random numeric key-value pair to the url to securely prohibit caching in IE. Enabled by default.crossDomain: Enable/Disable cross-domain transfer. This is false as default. If you need to acquire data from a different server you need to setup this as true. (Internally this will switch to the iframe backend, which is generally less responsive compared to xmlhttp.)
Available events
sending: Request was configured and is sending data to the server.receiving: The client receives the response of the server.completed: The request was executed successfully.failed: The request failed through some reason.timeout: The request has got a timeout event.aborted: The request was aborted.
The last four events give you a QxDataEvent as the first parameter of the event handler. As always for QxDataEvents you can access the stored data using getData(). The return value of this function is an instance of QxResponse.
Response object
The response object QxResponse stores all the returning data of a QxRequest. This object comes with the following methods:
getContent: Returns the content data of the response. This should be the type of content you acquired using the request.getResponseHeader: Returns the content of the given header entry.getResponseHeaders: Return all available response headers. This is a hash-map using typical key-values pairs.getStatusCode: Returns the HTTP status code.
Response headers and status code information are not supported for iframe based communication!
Simple example
req = new QxRequest(val.getLabel(), "GET", "text/plain"); // Switching to POST // req.setMethod("POST"); // req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // Adding data // req.setParameter("test1", "value1"); // req.setParameter("test2", "value2"); // Force to testing iframe implementation // req.setCrossDomain(true); req.addEventListener("completed", function(e) { alert(e.getData().getContent()); }); // Sending req.send();
Please post questions to our mailinglist
