Asynchronous Javascripting And Xml (AJAX) is a major improvement in the web based technology and it is being used by big Websters like gmail, youtube, yahoo, etc. Ajax provides the feature to refresh only a portion of the web page while the other contents still remains for the user to go through.
When Ajax calls are made, the web browser do not refresh the entire web page. Instead only the portion of the page gets refreshed based on the Ajax response.
DOJO is a web toolkit that provides framework to make the AJAX calls easier. Asynchronous AJAX calls can be handled quite easily using such open source frameworks.
DOJO is a web toolkit that provides framework to make the AJAX calls easier. Asynchronous AJAX calls can be handled quite easily using such open source frameworks.
In this section, we will go through the step-by-step approach on how to create an AJAX based application with SPRING.
1. Download the DOJO Toolkit from the below web site. The Dojo Toolkit provides the framework to make the Ajax Calls easily from the java script.
http://download.dojotoolkit.org/
2. We need a web page through which the user can initiate the AJAX call to the server.
1. Download the DOJO Toolkit from the below web site. The Dojo Toolkit provides the framework to make the Ajax Calls easily from the java script.
http://download.dojotoolkit.org/
2. We need a web page through which the user can initiate the AJAX call to the server.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax Example</title>
<!-- AjaxSubmit.js - This script contains the code to make the Ajax Call using DOJO. -->
<script type="text/javascript" src="/BluePortal/js/AjaxSubmit.js"></script>
<!-- AjaxSubmit.js - This script is taken from the DOJO tool kit and placed on to the below locatio in the project. -->
<script type="text/javascript" src="/BluePortal/js/lib/dojo/dojo.js"></script>
</head>
<body>
<form name="AjaxSubmitForm" method="POST" onsubmit="return false;"><input type="text"
name="FirstName" id="FirstName"> <br>
<input type="submit" value="Submit Ajax Call"
onclick="javascript: makeAjaxCall();"> <br>
<!-- This is the div where the AJAX response will get printed. -->
<div id="responseDiv"></div>
</form>
</body>
</html>
3. We need a Java Script that makes the AJAX call.
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax Example</title>
<!-- AjaxSubmit.js - This script contains the code to make the Ajax Call using DOJO. -->
<script type="text/javascript" src="/BluePortal/js/AjaxSubmit.js"></script>
<!-- AjaxSubmit.js - This script is taken from the DOJO tool kit and placed on to the below locatio in the project. -->
<script type="text/javascript" src="/BluePortal/js/lib/dojo/dojo.js"></script>
</head>
<body>
<form name="AjaxSubmitForm" method="POST" onsubmit="return false;"><input type="text"
name="FirstName" id="FirstName"> <br>
<input type="submit" value="Submit Ajax Call"
onclick="javascript: makeAjaxCall();"> <br>
<!-- This is the div where the AJAX response will get printed. -->
<div id="responseDiv"></div>
</form>
</body>
</html>
 |
| JSP Page |
function makeAjaxCall() {
var nameData = document.AjaxSubmitForm.FirstName.value;
var contentData = {
'nameData' : nameData,
'key' : 'Another data sent to server'
};
var kw = {
url : "/BluePortal/ajaxSubmit.do",
handleAs : "text",
content : contentData,
load : function(result) {
// When the AJAX call is returned with a success response.
document.getElementById('responseDiv').innerHTML = result;
},
error : function(response) {
// When the AJAX call gets timed out.
document.getElementById('responseDiv').innerHTML = result;
},
timeout : 30 // In Seconds
};
dojo.xhrPost(kw); // Xml Http Request Post
}
3. We need the controller class that handles the request.
package com.mybusiness.blueportal.controllers;
var nameData = document.AjaxSubmitForm.FirstName.value;
var contentData = {
'nameData' : nameData,
'key' : 'Another data sent to server'
};
var kw = {
url : "/BluePortal/ajaxSubmit.do",
handleAs : "text",
content : contentData,
load : function(result) {
// When the AJAX call is returned with a success response.
document.getElementById('responseDiv').innerHTML = result;
},
error : function(response) {
// When the AJAX call gets timed out.
document.getElementById('responseDiv').innerHTML = result;
},
timeout : 30 // In Seconds
};
dojo.xhrPost(kw); // Xml Http Request Post
}
3. We need the controller class that handles the request.
package com.mybusiness.blueportal.controllers;
import java.util.Date;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.AbstractController;
import com.mybusiness.blueportal.view.BlueView;
public class AjaxSubmitController extends AbstractController {
@Override
protected ModelAndView handleRequestInternal(HttpServletRequest request,
HttpServletResponse response) throws Exception {
Date date = new Date();
return new ModelAndView(new BlueView(), "responseData",
"This is the response from server @ " + date);
}
}
4. We need the View Code that returns the response to the Ajax Call.
package com.mybusiness.blueportal.view;
import java.io.PrintWriter;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.servlet.View;
public class BlueView implements View {
public String getContentType() {
return null;
}
public void render(Map<String, ?> model, HttpServletRequest request,
HttpServletResponse response) throws Exception {
String responseData = (String) model.get("responseData");
// Return the AJAX Response.
PrintWriter pw = response.getWriter();
pw.println(responseData);
pw.flush();
}
}
5. Now your code is ready to be tested and you should be able to see the response from the server in your web page without the webpage getting refreshed.
 |
| Ajax Response |
No comments:
Post a Comment