Programming for beginners: AJAX response in struts2

In this post, I am going to explain, how to send response for AJAX request.

Following jsp file send an Ajax call to the action HelloAction.

<html>
<head>
<script type="text/javascript">
  var xmlHttp;
  function ajaxEditFunctionCall() {

    var URL = "HelloAction";
    try {
      xmlHttp = new XMLHttpRequest();
    } catch (e) {
      try {
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
          alert("Your browser does not support AJAX!");
          return false;
        }
      }
    }
    xmlHttp.onreadystatechange = showMessage;

    xmlHttp.open("GET", URL, true);
    xmlHttp.send(null);
  }

  function showMessage() {
    if (xmlHttp.readyState == 4) {
      alert(xmlHttp.responseText);
    }
  }
</script>
</head>
<body>
  <form>
    <input type="button" onclick="ajaxEditFunctionCall()" value="Click me" />
  </form>
<body>
</html>

Create an action class to handle ajax request.

package struts.actions;

import java.io.ByteArrayInputStream;
import java.io.InputStream;

import com.opensymphony.xwork2.ActionSupport;

public class AjaxAction extends ActionSupport {
  private InputStream inputStream;

  public InputStream getInputStream() {
    return inputStream;
  }

  public String execute() throws Exception {
    inputStream = new ByteArrayInputStream(
        "Struts2 AJAX response"
            .getBytes("UTF-8"));
    return SUCCESS;
  }
}

Update struts.xml to handle AJAX call.

<struts>
  <package name="default" extends="struts-default">

    <action name="HelloAction" class="struts.actions.AjaxAction">
      <result type="stream">
        <param name="contentType">text/html</param>
        <param name="inputName">inputStream</param>
      </result>
    </action>

  </package>

</struts>

Following step-by-step procedure explains complete working application in Eclipse.

Step 1: Create new dynamic web project ‘struts2-ajax’ in eclipse.

File -> New -> Dynamic Web Project

Step 2: Mavenize the project. Right click on the project -> Configure -> Convert to Maven project.

Step 3: Create a folder ‘classes’ inside WEB-INF. Create struts.xml file inside classes folder.

Total project structure looks like below.

Step 4: Update pom.xml for struts2 dependencies. I am using following maven dependency.

<dependencies>
  <dependency>
    <groupId>org.apache.struts</groupId>
    <artifactId>struts2-core</artifactId>
    <version>2.3.20</version>
  </dependency>
</dependencies>

Step 5: Update web.xml like below.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns="http://java.sun.com/xml/ns/javaee"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
  id="WebApp_ID" version="3.0">
  <display-name>struts2-ajax</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>

  <filter>
    <filter-name>struts2</filter-name>
    <filter-class>
      org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
    </filter-class>
  </filter>

  <filter-mapping>
    <filter-name>struts2</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

Step 6: Create index.jsp file. Add following content to index.jsp.

index.jsp

<html>
<head>
<script type="text/javascript">
  var xmlHttp;
  function ajaxEditFunctionCall() {

    var URL = "HelloAction";
    try {
      xmlHttp = new XMLHttpRequest();
    } catch (e) {
      try {
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
          alert("Your browser does not support AJAX!");
          return false;
        }
      }
    }
    xmlHttp.onreadystatechange = showMessage;

    xmlHttp.open("GET", URL, true);
    xmlHttp.send(null);
  }

  function showMessage() {
    if (xmlHttp.readyState == 4) {
      alert(xmlHttp.responseText);
    }
  }
</script>
</head>
<body>
  <form>
    <input type="button" onclick="ajaxEditFunctionCall()" value="Click me" />
  </form>
<body>
</html>

Step 7: Create package struts.actions. Create class AjaxAction.java.

package struts.actions;

import java.io.ByteArrayInputStream;
import java.io.InputStream;

import com.opensymphony.xwork2.ActionSupport;

public class AjaxAction extends ActionSupport {
  private InputStream inputStream;

  public InputStream getInputStream() {
    return inputStream;
  }

  public String execute() throws Exception {
    inputStream = new ByteArrayInputStream(
        "Struts2 AJAX response"
            .getBytes("UTF-8"));
    return SUCCESS;
  }
}

Step 8: Update struts.xml by adding mappings.

<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
  <package name="default" extends="struts-default">

    <action name="HelloAction" class="struts.actions.AjaxAction">
      <result type="stream">
        <param name="contentType">text/html</param>
        <param name="inputName">inputStream</param>
      </result>
    </action>

  </package>

</struts>

Run the application on server.

Click the button, you will get following response.

Prevoius Next Home

Programming for beginners

Monday 16 November 2015

AJAX response in struts2

No comments:

Post a Comment