AJAX Using DOJO Tutorial ~ balaram

Tuesday, October 9, 2012

AJAX Using DOJO Tutorial

It is very simple to develope Ajax application with DOJO. There is no any need to use
ActiveXObject or XMLHttpRequest. Here I am going to show a very simple application.

1. Create one dynamic web project using your Eclipse IDE. (Say Project Name : Ajax_Dojo)
2. Write one servlet in that project (Say AdmissionEnquiry.java)
3. Write one jsp page inside WebContent (Say example1.jsp)
4. Copy dojo.js inside WebContent
5. Add any server like Apache or Jboss to your project
6. Run the application http://localhost:8080/Ajax_Dojo/example1.jsp

AdmissionEnquiry.java

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AdmissionEnquiry extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
static final long serialVersionUID = 1L;
public AdmissionEnquiry() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String roll = request.getParameter("roll");
System.out.println("Entered Roll Number :: "+roll);
PrintWriter out = response.getWriter();
if(roll.equalsIgnoreCase("110")){
out.print("Binod Suman");
}
else if(roll.equalsIgnoreCase("120")){
out.print("Pramod Kumar");
}
else{
out.print("Roll Number not found");
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}

example1.jsp

<html><body onLoad="onLoad();"
><head>
<title>Ajax Dojo Example</title>
<script language="javascript" src="dojo.js"></script>
<script language="javascript">
dojo.require("dojo.io.*");
dojo.require("dojo.event.*");
function onLoad() {
var buttonObj = document.getElementById("myButton");
dojo.event.connect(buttonObj, "onclick", this, "onclick_myButton");
}
function onclick_myButton() {
var url2 = "http://localhost:8080/Ajax_Dojo/AdmissionEnquiry";
var bindArgs = {
url: url2,
error: function(type, data, evt){
alert(data); },
load: function(type, data, evt){
alert(data); },
mimetype: "text/plain",
formNode: document.getElementById("myForm") };
dojo.io.bind(bindArgs); }
</script>
</head>
<body>

<form id="myForm">
<h1>Find Student Name</h1>
<p> Enter Roll Number <input type="text" name="roll">
<input type="button" id="myButton" value="Submit"/>
</p>
</form>
</body>
</html>

During run the application, you will give roll number as input and you will get student Name.
Very simple ................ :)
Please give your comment to enhance this tutorial. ............ :)

balaram

Tuesday, October 9, 2012