- “YUI IO” Queue feature provides control above series of Ajax request to server.
- It supports FIFO transactions for request while each request is non-blocking type.
- Different methods:-
start : Starts the queue for the requests.
stop: Stops the queue fir making request.
promote: Promotes the queue .Changes the priority of the execution
remove: Removes it from the queue.
Testing YUI IO Queue:-
- The Servlet code (NameServlet.java)
package com.sandeep.json.data.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class NameServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public NameServlet() {
super();
}
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
Integer taskNo = Integer.parseInt(request.getParameter("taskNo"));
String name;
switch (taskNo) {
case 1:
name = "Sandeep And TaskNo " + taskNo;
break;
case 2:
name = "Surabhi And TaskNo " + taskNo;
break;
case 3:
name = "Sumanta And TaskNo " + taskNo;
break;
default:
name = "Sangeeta And TaskNo " + taskNo;
break;
}
out.println("<span class='name-response-output'> "+ name +" </span>");
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
- The Normal request series is like 1,2,3,4.But Here task 3 is promoted .That’s why it will flow like 3,2,1,4.
<!DOCTYPE html>
<html>
<head>
<title>YUI IO Queue (Ajax Request to Servlet)</title>
<script src="http://yui.yahooapis.com/3.8.0/build/yui/yui-min.js"></script>
<style>
.name-response-output {
color:green;
font-size: 20px;
font-style: italic;
}
.ajax-start-class {
color:#100000;
font-weight: bold;
font-size: 12px;
}
.ajax-success-class {
color:#660099;
font-weight: bold;
font-size: 13px;
}
.ajax-failure-class {
color:#996600;
font-weight: bold;
font-size: 14px;
}
.ajax-complete-class {
color:#9966FF;
font-weight: bold;
font-size: 15px;
}
.ajax-end-class {
color:#C0C0C0;
font-weight: bold;
font-size: 16px;
}
</style>
</head>
<body class="yui3-skin-sam">
<ul id="ajax-status-appender"></ul>
<script>
YUI().use('io', 'io-queue', function (Y) {
var configuration,
servletUrl = "http://localhost:8080/YUIIODemo/NameServlet?taskNo=",
statusElement = Y.one("#ajax-status-appender"),
task1, task2, task3, task4;
configuration = {
on: {
start: function (transactionid, arguments) {
statusElement.append("<li class='ajax-start-class'>transactionid = " + transactionid + " , response = no response]</li>");
},
success: function (transactionid, response, arguments) {
statusElement.append("<li class='ajax-success-class'>transactionid = " + transactionid + " , responseText = " + response.responseText + " response.status = " + response.status + "</li>");
},
failure: function (transactionid, response, arguments) {
statusElement.append("<li class='ajax-failure-class'>transactionid = " + transactionid + " , responseText = " + response.responseText + " response.status = " + response.status + "</li>");
},
complete: function (transactionid, response, arguments) {
statusElement.append("<li class='ajax-complete-class'>transactionid = " + transactionid + " , responseText = " + response.responseText + "response.status = " + response.status + "</li>");
},
end: function (transactionid, arguments) {
statusElement.append("<li class='ajax-end-class'>YUI IO Ajax Request END transactionid = " + transactionid + " , response = no response]</li>");
}
}
};
Y.io.queue.stop();
task1 = Y.io.queue(servletUrl + "1", configuration);
task2 = Y.io.queue(servletUrl + "2", configuration);
task3 = Y.io.queue(servletUrl + "3", configuration);
task4 = Y.io.queue(servletUrl + "4", configuration);
Y.io.queue.promote(task3);
Y.io.queue.start();
});
</script>
</body>
</html>
Firebug Inspection:-
- Firebug shows the queues execution like 3,1,2,4.
Output:-
transactionid = 2 , response = no response] transactionid = 0 , response = no response] transactionid = 2 , responseText = Sumanta And TaskNo 3 response.status = 200
transactionid = 2 , responseText = Sumanta And TaskNo 3 response.status = 200
YUI IO Ajax Request END transactionid = 2 , response = no response] transactionid = 1 , response = no response] transactionid = 0 , responseText = Sandeep And TaskNo 1 response.status = 200
transactionid = 0 , responseText = Sandeep And TaskNo 1 response.status = 200
YUI IO Ajax Request END transactionid = 0 , response = no response] transactionid = 3 , response = no response] transactionid = 1 , responseText = Surabhi And TaskNo 2 response.status = 200
transactionid = 1 , responseText = Surabhi And TaskNo 2 response.status = 200
YUI IO Ajax Request END transactionid = 1 , response = no response] transactionid = 3 , responseText = Sangeeta And TaskNo 4 response.status = 200
transactionid = 3 , responseText = Sangeeta And TaskNo 4 response.status = 200
YUI IO Ajax Request END transactionid = 3 , response = no response]
