Demo search engine
Source window
<a class="button" href="javascript:executeRequest();"><span><span><span>Execute request</span></span></span></a>
<a class="button" href="javascript:executeRequest('404');"><span><span><span>Execute 404 request</span></span></span></a>
<a class="button" href="javascript:reset();"><span><span><span>Reset console</span></span></span></a>
<div style="margin-top:10px;">
Click on the button above. The response of the Ajax requests will be printed below.
</div>
<div id="DivResponse" style="margin-top:15px; padding:10px; padding-left:20px; background-color:#DDDDDD;">
</div>
<script>
/*
* load libraries
*/
toutou.require("toutou.js.ajax");
toutou.require("toutou.html.dom");
/*
* reset
*/
function reset() {
tt$("DivResponse").innerHTML = "";
}
/*
* executeRequest
*/
function executeRequest(option) {
var xhr = new toutou.js.ajax.xhr();
if (option == '404') {
xhr.url = "./this_is_not_a_valid_url.htm";
}
else {
xhr.url = "./ajaxReply.htm";
}
xhr.asynchronous = true;
xhr.tt_eventManager.addListener("success", onSuccess);
xhr.tt_eventManager.addListener("failure", onFailure);
xhr.tt_eventManager.addListener("uninitialized", onOtherEvent);
xhr.tt_eventManager.addListener("loading", onOtherEvent);
xhr.tt_eventManager.addListener("loaded", onOtherEvent);
xhr.tt_eventManager.addListener("interactive", onOtherEvent);
xhr.tt_eventManager.addListener("complete", onOtherEvent);
xhr.request();
}
/*
* onSuccess
*/
function onSuccess(eventData) {
var xhr = eventData.xhr;
tt$("DivResponse").innerHTML+= "<div><li>Success : " + xhr.getResponseText() + "</div>";
}
/*
* onFailure
*/
function onFailure(eventData) {
var xhr = eventData.xhr;
tt$("DivResponse").innerHTML+= "<div><li>Failure : " + xhr.getResponseText() + "</div>";
}
/*
* onOtherEvent
*/
function onOtherEvent(eventData) {
var xhr = eventData.xhr;
tt$("DivResponse").innerHTML+= "<div><li>Other event: " + xhr.ajaxEvents[xhr.transport.readyState] + ".</div>";
}
</script>
Ajax asynchronous requests
This example executes an Ajax request in an asynchronous manner. The Ajax request in this example returns some text which is printed in a DIV element. When the request is complete, an event is sent to the event manager. To catch this event, we must add a listener function.
Execute request
Execute 404 request
Reset console
Click on the button above. The response of the Ajax requests will be printed below.