May 31, 2011

Ajax with XML response and Java JDOM library on server-side

0) Add the jdom.jar file to the WebContent/lib folder of the web application - download the jar file from here

1) Create a JSP - getOrderInfoXml.jsp - within the WebContent folder of your web application. The JSP contains the Javascript DOM manipulation code to retrieve the response payload in XML format and modify the HTML DOM.



<html>
<head>
<title>Get Customer Orders - XML Example</title>


<script type="text/javascript">


var request = null;


function createRequest() {


     try {
        request = new XMLHttpRequest();
     } catch (trymicrosoft) {
        try {
              request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (othermicrosoft) {
              try {
                     request = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (failed) {
                     request = null;
                  }
              }
        }

        if (request == null) {  alert("Error creating request object");   
     }
}


function checkOrder() {
    createRequest();
    request.open("POST", "xmlServlet", true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    request.onreadystatechange = updatePage;
    request.send("customerId="+document.forms[0].elements[0].value);
}


var updatePage = function() {
    if (request.readyState == 4) {
       if (request.status == 200) {

          var responseStr = request.responseText;
    
          var xmlDoc = request.responseXML;
          alert(responseStr);
       
          var toDisplay;
   
          var realname = xmlDoc.getElementsByTagName("realname"); 
          toDisplay = "<span style='font-weight:bold;'> Customer Name:</span> " 
                       + realname[0].childNodes[0].nodeValue + "<br/><br/>";
   
          var order = xmlDoc.getElementsByTagName("order");
          
          toDisplay = toDisplay 
                  + "<span style='font-weight:bold;'>Order ID: </span> " 
                  + order[0].getAttribute("id") + "<br/>";


          toDisplay = toDisplay 
                  + "<span style='font-weight:bold;'>Total Order Cost:</span> " 
                  + order[0].getAttribute("cost") + "<br/>";
   
  var date = xmlDoc.getElementsByTagName("date");
   
          toDisplay = toDisplay 
                  + "<span style='font-weight:bold;'>Date of Order:</span> " 
                  + date[0].childNodes[0].nodeValue + "<br/><br/>";
   
          toDisplay = toDisplay 
                  + "<span style='font-weight:bold;'>Details of Order</span> "  
                  + "<br/><br/>";
    
          var item = xmlDoc.getElementsByTagName("item");
          var name = xmlDoc.getElementsByTagName("name");
          var description = xmlDoc.getElementsByTagName("description");
          var price = xmlDoc.getElementsByTagName("price");
    
          for(var i=0; i<item.length; i++) {
   
               toDisplay = toDisplay 
                      + "<span style='font-weight:bold;'>Item Id:</span> " 
                      + item[i].getAttribute("id") + "<br/>";


               toDisplay = toDisplay 
                     + "<span style='font-weight:bold;'>Item Name:</span> " 
                     + name[i].childNodes[0].nodeValue + "<br/>";
   
              toDisplay = toDisplay 
                     + "<span style='font-weight:bold;'>Item Price:</span> " 
                     + price[i].childNodes[0].nodeValue + "<br/>";
   
              toDisplay = toDisplay 
                     + "<span style='font-weight:bold;'>Description:</span> " 
                     + description[i].childNodes[0].nodeValue + "<br/>";
   
              toDisplay = toDisplay + "<br/><br/>";
          }
    
          document.getElementById('message').innerHTML = toDisplay;
      }
   }
}
</script>
</head>
<body>
<h1>Check Customer Order Information</h1>


<form >
<label>Customer Id</label>: <input type="text" name="customerId" />
            <br/><br/>
<input type="button" value="Submit" onclick="javascript:checkOrder();"/>
</form>
<br/>


<div id="message"></div>


</body>
</html>




2) Create a servlet - XmlServlet.java - within the src folder of the web application


import java.io.*;
import java.util.Date;
import javax.servlet.http.*;
import org.jdom.*;
import org.jdom.output.XMLOutputter;

public class XmlServlet extends HttpServlet {
   public void doPost (HttpServletRequest req, HttpServletResponse res) 
                     throws IOException {
      String custId = req.getParameter("customerId");
      Customer customer = getCustomer(custId);

      Element responseElem = customer.toXml();
      Document responseDoc = new Document(responseElem);

      res.setContentType("application/xml");
      PrintWriter out = res.getWriter();
      new XMLOutputter().output(responseDoc, out);
   }
   private Customer getCustomer(String id) {
       Item i1 = new Item();
       i1.setId("i-55768");
       i1.setDescription("512 Megabyte Type 1 CompactFlash card. Manufactured by Oolong Industries");
       i1.setName("Oolong 512MB CF Card");
       i1.setPrice(49.99);
       Item i2 = new Item();
       i2.setId("i-74491");
       i2.setDescription("7.2 Megapixel digital camera featuring six shooting modes and 3x optical zoom. Silver.");
       i2.setName("Fujak Superpix72 Camera");
       i2.setPrice(299.99);
       Item[] items = new Item[2];
       items[0] = i1;
       items[1] = i2;
       Order o1 = new Order();
       o1.setId("o-11123");
       o1.setCost(348.98);
       o1.setDate( new Date());
       o1.setItems(items);
       Order[] orders = new Order[1];
       orders[0] = o1;
       Customer c = new Customer();
       c.setRealname("Dinesh PC");
       c.setUsername("dinipc");
       c.setOrders(orders);

       return c;
   }
}


3) Configure the servlet in the web.xml file present within the WebContent/WEB-INF folder


<servlet>
    <servlet-name>xmlServlet</servlet-name>
    <servlet-class>XmlServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>xmlServlet</servlet-name>
    <url-pattern>/xmlServlet</url-pattern>
</servlet-mapping>


4) Add the classes - Customer.java,  Order.java and Item.java - within the src folder of the web application. These classes contain the toXml() methods that use the JDOM API methods to serialize the output response into the XML format


import java.util.*;
import org.jdom.Element;


public class Customer {

   private String username; 
   private String realname;
   private Order[] orders;

   public String getUsername() {
      return username;
   }

   public void setUsername(String username) {
      this.username = username;
   }


   public String getRealname() {
      return realname;
   }

   public void setRealname(String realname) {
      this.realname = realname;
   }


   public Order[] getOrders() {
      return orders;
   }


   public void setOrders(Order[] orders) {
      this.orders = orders;
   }

   public Element toXml() {


      Element elCustomer = new Element("customer");
      elCustomer.setAttribute("username",username);


      Element elRealname = new Element("realname");
      elRealname.addContent(realname);
 
      elCustomer.addContent(elRealname);


      Element elOrders = new Element("orders");
      for (int i=0; i<orders.length; i++) {
          elOrders.addContent( orders[i].toXml());
      }
      elCustomer.addContent(elOrders);


      return elCustomer;
   }
}



import java.util.*;
import org.jdom.Element;


public class Order {

   private String id;
   private Date date;
   private double cost;
   private Item[] items;

   public String getId() {
      return id;
   }
   public void setId(String id) {
      this.id = id;
   }
   public Date getDate() {
      return date;
   }
   public void setDate(Date date) {
      this.date = date;
   }
   public double getCost() {
      return cost;
   }
   public void setCost(double cost) {
      this.cost = cost;
   }
   public Item[] getItems() {
      return items;
   }
   public void setItems(Item[] items) {
      this.items = items;
   }

   public Element toXml() {


      Element elOrder = new Element("order");
      elOrder.setAttribute("id",id);
      elOrder.setAttribute("cost",Double.toString(cost));


      Element elDate = new Element("date").addContent(date.toString());
      elOrder.addContent(elDate);


      Element elItems = new Element("items");
      for (int i=0; i<items.length; i++ ) {
          elItems.addContent(items[i].toXml());
      }
      elOrder.addContent(elItems);


      return elOrder;
   }
}



import java.util.Iterator;
import org.jdom.Element;


public class Item {

   private String id;
   private String name;
   private String description;
   private double price;

   public String getId() {
      return id;
   }
   public void setId(String id) {
      this.id = id;
   }
   public String getName() {
      return name;
   }
   public void setName(String name) {
      this.name = name;
   }
   public String getDescription() {
      return description;
   }
   public void setDescription(String description) {
      this.description = description;
   } 
   public double getPrice() {
      return price;
   }
   public void setPrice(double price) {
      this.price = price;
   }

   public Element toXml() {


      Element elItem = new Element("item");
      elItem.setAttribute("id",id);


      Element elName = new Element("name").addContent(name);
      elItem.addContent(elName);
 
      Element elDescription 
              = new Element("description").addContent(description);
      elItem.addContent(elDescription);
 
      Element elPrice 
              = new Element("price").addContent(Double.toString(price));
      elItem.addContent(elPrice);


      return elItem;
   }
}




5) Test the example with the following URL in the browser:

http://localhost:8080/WebAppName/xmlServlet

No comments:

Post a Comment