- YUI (Yahoo User Interface) Library is based on JavaScript language.
- YUI3 has many individual modules which offers different features.
- “IO” is the module for asynchronous request to server.
- YUI can be downloaded from :-
http://yuilibrary.com/download/yui3/
- Different IO events are:-
start: event handler for ajax request.
complete: event handler for ajax complete.
success: event handler for ajax success.
failure: event handler for ajax error.
end: event handler for end of request.
- Response of the Ajax contain these fields are getAllResponseHeaders(), responseText , responseXML, status, statusText, getResponseHeader(headername).
Demo Servlet:-
- The Demo Servlet is 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();
out.println("<span class='name-response-output'>Sandeep</span>");
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
YUI IO Code:-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>YUI IO And Java Integration</title>
<script src="http://yui.yahooapis.com/3.8.0/build/yui/yui-min.js"></script>
<style>
.name-response-output {
color:green;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body class="yui3-skin-sam">
<ul id="ajax-status-appender"></ul>
<script>
YUI().use('io', function (Y) {
var configuration,
ajaxRequest,
statusElement = Y.one("#ajax-status-appender");
configuration = {
on: {
start: function (transactionid, arguments) {
statusElement.append("<li>YUI IO Ajax Request STARTED [transactionid = " + transactionid + " , response = no response]</li>");
},
success: function (transactionid, response, arguments) {
statusElement.append("<li>YUI IO Ajax Request SUCCESS [transactionid = " + transactionid + " , responseText = " + response.responseText + " response.status = " + response.status + "]</li>");
},
failure: function (transactionid, response, arguments) {
statusElement.append("<li>YUI IO Ajax Request FAILURE [transactionid = " + transactionid + " , responseText = " + response.responseText + " response.status = " + response.status + "]</li>");
},
complete: function (transactionid, response, arguments) {
statusElement.append("<li>YUI IO Ajax Request COMPLETED [transactionid = " + transactionid + " , responseText = " + response.responseText + "response.status = " + response.status + "]</li>");
},
end: function (transactionid, arguments) {
statusElement.append("<li>YUI IO Ajax Request END [transactionid = " + transactionid + " , response = no response]</li>");
}
}
};
ajaxRequest = Y.io("http://localhost:8080/YUIDataTableJavaIntegration/NameServlet", configuration);
});
</script>
</body>
</html>
Calling the URL:-
- The URL for the html page is :-
http://localhost:8080/YUIIODemo/yui-io-Demo.html
- Firebug Inspection of this URL is :-
Output:-
YUI IO Ajax Request STARTED [transactionid = 0 , response = no response] YUI IO Ajax Request COMPLETED [transactionid = 0 , responseText = Sandeep response.status = 200] YUI IO Ajax Request SUCCESS [transactionid = 0 , responseText = Sandeep response.status = 200] YUI IO Ajax Request END [transactionid = 0 , response = no response]
