Categories
AEM Java Programming

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.

Categories
AEM Java Programming

Adobe Experience Manager (AEM)

I’ve been working on Adobe Experience Manager (AEM) previously known as Communique5 (CQ5) for quite a while now. At first when I started learning it, I thought it is going to be difficult for me to understand it but I was wrong. This enterprise CMS is awesome and has so many things that you can do.

I have used two versions of it which are CQ5 and AEM6. There are huge difference in terms of data management, user management, security, etc. But for me, the whole experience were somehow the same. I haven’t fully understand the whole updates actually. 🙂

From traditional JSP and JSTL development, AEM introduced their own templating engine called Sightly. Although you cannot just drop both JSP and JSTL development as you might still need it for some of your work, Sightly on the other hand produced shorter and cleaner coding. It is also suitable to developers who uses only HTML/JS/CSS and doesn’t know much on doing Java/JSP/JSTL. I’ve been using it with Java Use-API.

This is just a start of my experience with this incredible web CMS. I hope you guys will keep in touch with me and don’t hesitate to ask me things. I’ll find ways to help you.

Categories
Personal

I am back

It has been a while since I have wrote my first blog post. And today I have finally decided to get back on sharing things from what I have experienced and discovered in my entire web developing career.

I hope with my knowledge and thoughts I can help you guys (who might need my help. haha) on your career too. Let us make this world a better place again. Peace!