Dojo is an open source framework which provides various inbuilt functions for AJAX, Widgets, Events, and Effects etc. These functions make life easier for the developer. They provide complete abstraction from the complexity involved behind the scene. I am going to cover AJAX feature provided by Dojo in this article.
Normally when we code for AJAX we think of creating request, forming the data which needs to be sent to server, error handling, timeout scenarios, response handling etc. We can’t escape from any of these points when we write coding and due to this code becomes complex and cumbersome to understand and maintain. Dojo provides cleaner and easier approach to create a code for handling AJAX calls.
Dojo Basics:
Two types of request are sent to server for any AJAX request, Post and Get. Dojo provides two function for these two types dojo.xhrGet and dojo.xhrPost methods. These two functions have all the AJAX capabilities in built. It takes care of creating request, forming the data which needs to be sent to server, error handling, timeout scenarios, response handling etc.
dojo.xhrGet({
url: "/pojoProj/ dojoCall.jsp",
load: function(result) {
alert(result);
}
});
There are various arguments available for these functions, I have shown below how to use them while coding and their description.
dojo.xhrGet({ // Function Name, this can be dojo.xhrGet/ dojo.xhrPost
// url, This is the Server URL to which AJAX request will go.
url: "/pojoProj/search.jsp",
// content, This is the parameter which will be passed to above URL, to access these parameter use normal request.getParameter(“studentName”). Based on type POST/GET parameter will be send to server either as post data or url string.
content: {
studentName: dojouser,
class: 12,
},
//timeout, This value is milliseconds; request will wait for specified time than after that it will treat as failure.
timeout: 10000,
//
form: dojo.byId(<<formName>>),
//load is called after successful response. This function will not be called in case of any error or exception.
load: function(resp) {
if(<<condition>>){
<<actions>>
}else{
<<actions>>
}
},
// The error handler, this function will be called in case of failure. You can use first argument to display error message if there are any.
error: function(errorMessage) {
alert(errorMessage);
},
// handle will be called always, in case of success and failure of the request.
handle: function (response, ioArgs) {
alert("hello");
}
});
Create web project and create two jsp for testing below code. Below example is only for plain text response, in coming blogs i will explain different ways of handling the response like JSON, XML...
Complete Code Sample:
Index.jsp:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script language="javascript" src="js/dojo/dojo_uncompressed.js"></script>
<script>
function findStudent() {
var stdName=dojo.byId("stdId").value;
dojo.xhrGet({
url: "/dojo_json_sampleapp/dojoCall.jsp",
content: {
stdname:stdName
},
timeout: 10000,
load: function(resp) {
if(resp.trim() != ""){
dojo.byId("respNode").innerHTML = stdName+" is in "+resp;
}else{
dojo.byId("respNode").innerHTML = "Student detail is not available for "+stdName;
}
},
error: function(errorMessage) {
alert(errorMessage);
}
});
}
dojo.ready(function(){
dojo.connect(dojo.byId("stdId"),"onkeyup",findStudent);
});
</script>
</head>
<body>
Student Name: <input type="text" name="studentName" id="stdId" value="" />
<p>Student Details: <span id="respNode"> </span></p>
</body>
</html>
Search.jsp
<%if("pojo1".equals(request.getParameter("stdname"))){
System.out.println(" 11111 ");
out.print("4th standard");
}else if("pojo2".equals(request.getParameter("stdname"))){
System.out.println(" 22222 ");
out.print("5th standard");
}else{
System.out.println(" 33333 ");
out.print("");
}
%>
You can download the dojo js file from this url: http://dojotoolkit.org/
Important Notes:
1. Use get method if you don't have large data to be submitted to server and if you are retrieving data from the server. As get creates only one connection to the server for complete request. Post creates two connection one for header and one for body. You will have better performance in Get.
Important Notes:
1. Use get method if you don't have large data to be submitted to server and if you are retrieving data from the server. As get creates only one connection to the server for complete request. Post creates two connection one for header and one for body. You will have better performance in Get.
No comments:
Post a Comment