AJAX request and response on AEM

Another working day just passed again and before my it ends I wanted to share with you my experience about the AJAX response when using servlet in Java before I forget about it.

So, I’ve been working on this servlet that validates form field after user key in their information. And also saving information to the Java JCR storage. It is not really that simple to write a servlet in Java especially when you are not familiar with object-oriented programming (OOP). And I hope that things that I’ll discuss below will help you a bit (it is not about OOP).

Below are the things that I have encountered when building my servlet.

Make an AJAX request

Coding is more fun when you don’t need to wait for the page to load to get the data that you need. And that is when AJAX request comes in. I worked on different way to do my request to check either through the header  or query variable.Using the code below you can get the x-requested-with header post variable.

HttpServletRequest request; // from doPost() parameters
String headerRequestedWith = request.getHeader("x-requested-with");

if ("XMLHttpRequest".equals(headerRequestedWith) ) {
    // code here...
}

Alternatively, you can do it through query string. This is more straight forward and easy to work on.

// Using jQuery ajax call
$.ajax({
    url: '/servlet/path/here',
    type: 'POST',
    data: $('form').serialize() + 'ajax=1'
    ...
});

Return a JSON data format

After doing the AJAX call, we need to return some data to be used in the page. Printing out JSON data format is really useful and easy to manage. You can do two ways here by doing it through echoing string or using pre-defined Java library.

Normal string:

PrintWriter out = response.getWriter(); out.println("{\"response\":\"success\",\"message\":\"Your text here\"}");

Or using Gson:

Gson gson = new Gson(); 
Map<String, String> jsonMap = new HashMap<String, String>(); jsonMap.put("response", "success"); 
jsonMap.put("message", "Your text here"); 
String jsonText = gson.toJson(jsonMap); 
out.println(jsonText); 
out.flush();

Make sure to add things such as below in order to make your response acceptable by the request.

response.setCharacterEncoding("UTF-8");
response.setContentType("application/json");

Make it works on dispatcher/publisher server

In AEM, there are few things that need to be considered when doing AJAX call and that is by going through The Dispatcher Security Checklist. Once you already managed to do the things that you need then you are good to go.

After doing so many tests, I have noticed that on dispatcher/publisher server, it is showing this weird numbers before and after your JSON response text as shown below.

0027
{"variable":"Message here"}
0

At first, I’ve suspected that it is a text count but it is not. This response will always break your request as it is not a valid JSON data format anymore.

What I did is that I added an additional header when printing out the data. I just need to make sure that when throwing my response it should provide the content length so AEM will not try to check it and insert the numbers. Here is the code:

String jsonText = gson.toJson(jsonMap); response.setContentLength(jsonText.length());
out = response.getWriter();
out.print(jsonText);
out.flush();

So, the important thing that I have learned here is that I need to understand more how the CMS really works on this kind of situation. And dig in their documentation more. They might provide it somewhere but somehow I have discovered it myself.

That’s it for now. I hope you guys learn something new from me. Don’t forget to ask me anything if you have queries about this post.