Struts 2 with Ajax call example

Step 01. Create struts2 project

struts.xml

<?xml version="1.0" encoding="UTF-8"?>

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

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

        <action name="resourceBundleRequest" class="struts.ajax.AjaxCallAction"
                method="responseForAjaxCall">
            <result name="success">index.jsp</result>
        </action>

    </package>
</struts>

index.jsp

<%@ page language="java" contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<head>
    <script type="text/javascript" src="/application/js/localization-ajax-calls.js"></script>
</head>

<s:form
        name="resourceForm"
        acceptcharset="UTF-8"
        enctype="multipart/form-data"
        method="GET"
        >

    <div>
        <button type="button" name="id" onclick="ValueChanged('/application/resourceBundleRequest.action?id=123');">Get response</button>
        <button type="reset">Clear</button>
    </div>
    <div>
        <div>
            <s:textarea name="valueEn" label="English"/>
        </div>
        <div>
            <s:textarea name="valueSi" label="Sinhala"/>
        </div>
        <div>
            <s:textarea name="valueTa" label="Tamil"/>
        </div>
        <div>
            <s:textarea name="description" label="Descripion"/>
        </div>
    </div>
</s:form>

ActionAjaxCall.class (this is struts action class)

package struts.ajax;

import com.opensymphony.xwork2.ActionSupport;
import org.apache.struts2.interceptor.ServletResponseAware;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class AjaxCallAction extends ActionSupport implements ServletResponseAware {

    HttpServletResponse response;
    private String id;

    public String responseForAjaxCall() {
        String messageXml = "Sinhala|Tamil|English|This is description";
        System.out.println("Ajax request receive with id : [" + id + "] and reply value : " + messageXml);
        response.setContentType("text/html;charset=UTF-8");
        response.setHeader("Cache-Control", "no-cache");
        try {
            response.getWriter().write(messageXml);
        } catch (IOException ioe) {
            ioe.printStackTrace();
        }
        return null;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    @Override
    public void setServletResponse(HttpServletResponse httpServletResponse) {
        this.response = httpServletResponse;
    }
}

Step 02 : Create javascript file with ajax calling via XmlHttpRequest

localization-ajax-call.js

/*Ajax Request readyStates
State Description
0      The request is not initialized
1      The request has been set up
2      The request has been sent
3      The request is in process
4      The request is complete*/

var xmlHttp;

/**
* @return {boolean}
*/
function ValueChanged(url) {

    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.open("POST", url, true);
    xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");
    xmlHttp.send(null);
    xmlHttp.onreadystatechange = showMessage
}

function showMessage() {
    if (xmlHttp.readyState == 4) {
        SetValues(xmlHttp.responseText);
    }
}

function SetValues(sRawData) {
    var arrData = sRawData.split("|");
    var oForm = document.forms["resourceForm"];
    oForm.elements["valueEn"].value = arrData[0];
    oForm.elements["valueSi"].value = arrData[1];
    oForm.elements["valueTa"].value = arrData[2];
    oForm.elements["description"].value = arrData[3];
}

Example code available in git hub
View source code click here : https://github.com/malithmeee/struts2-ajax/

Clone the example source from github : https://github.com/malithmeee/struts2-ajax.git

Share with me

Search This Blog