"AJAX, is a group of interrelated web development techniques used for creating interactive web applications or rich Internet applications." Wikipedia
You can developed your own library basically by extending the foundation techniques of AJAX. I have my extended my own library based on pure Java-Script. Focus on the mechanism rather using 3rd party components and solutions is the key, I think.
Have a look to some parts of the code:
I have selected the simplest part which able you to extend your own Ajax library to solve the problem deeply
for ever. Software solution is separated into two major part:
1.Client-side consists of Java-Script (Ajax routines) and HTML UI components.
2.Server-side which provide Asynchronous request by some simple Servletes.
A part of Java-Script routines is:
function newXMLHttpRequest() {
var xmlreq = false;
if (window.XMLHttpRequest) {
xmlreq = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {}
}
}
return xmlreq;
}
function getReadyStateHandler(req, responseXmlHandler) {
return function () {
if (req.readyState == 4) {
if (req.status == 200) {
responseXmlHandler(req.responseText);
} else {
alert("HTTP error: " + req.status);
}
}
}
}
function search(sender , domain) {
returnToSender = sender;
var idField = document.getElementById(returnToSender);
if (idField.value.length>1)
{
var url = domain + "Search";
var req = newXMLHttpRequest();
var handlerFunction = getReadyStateHandler(req, callback);
req.onreadystatechange = handlerFunction;
req.open("POST", url , true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("align="+align+"&lang="+language+"&target=" + encodeURIComponent(idField.value));
}
else
{
fo(0);
fadeOutShort(0);
}
}
function callback(str) {
if (str!="[clear]") {
fadeOutShort(0);
var popupshadow = document.getElementById("popupshadow");
var popup = document.getElementById("popup");
document.getElementById("popupshadow").style.width=380;
document.getElementById("popupshadow").style.height=100;
document.getElementById("popup").style.width=380;
document.getElementById("popup").style.height=100;
popupshadow.innerHTML = "<div><font size=2>"+str+"</font></div>";
popup.innerHTML = "<div><font size=2>"+str+"</font></div>";
var xPos , yPos = 0;
xPos = findPosX(document.getElementById(returnToSender));
yPos = findPosY(document.getElementById(returnToSender));
if (align=="right")
{
xPos = xPos - 165;
}
yPos = yPos + 22;
document.getElementById("popupshadow").style.left = xPos+5;
document.getElementById("popupshadow").style.top = yPos+5;
document.getElementById("popup").style.left = xPos;
document.getElementById("popup").style.top = yPos;
fadeIn(50);
}
else
{
fo(0);
var shortpopup = document.getElementById("shortpopup");
shortpopup.innerHTML = "<div><font size=2>not found.</font></div>";
var xPos , yPos = 0;
xPos = findPosX(document.getElementById(returnToSender));
yPos = findPosY(document.getElementById(returnToSender));
if (align=="right")
{
xPos = xPos + 120;
}
yPos = yPos + 22;
document.getElementById("shortpopup").style.left = xPos;
document.getElementById("shortpopup").style.top = yPos;
fadeInShort(100);
}
}
In the header of HTML pages below DIV tags are inserted for support Ajax presentation.
<div class="scroll" id="popup" align="<c:out value="${align}"/>" dir="<c:out value="${dir}"/>" ></div>
<div class="shadow" id="popupshadow" align="<c:out value="${align}"/>" dir="<c:out value="${dir}"/>" ></div>
Also I need to cal Asynch routines by a simple code like this:
<input type="text"
autocomplete="off" size="30" id="target_id" name="target" onkeydown="fo(0);fadeOutShort(0);">
In the server-side a servlet like this is supporting clients requests:
package web;
Public class ProductSearchServlet extends HttpServlet {
protected final Log logger = LogFactory.getLog(getClass());
private ServletContext context;
public void init(ServletConfig config) throws ServletException {
super.init(config);
this.context = getServletContext();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String targetId = request.getParameter("target");
if (request.getParameter("returnto") != null) {
returnTo = request.getParameter("returnto");
id = request.getParameter("id");
}
if (request.getParameter("focusto") != null) {
focusTo = request.getParameter("focusto");
}
if (request.getParameter("unit") != null) {
unit = request.getParameter("unit");
}
logger.info(" request request.getContextPath() "
+ request.getContextPath());
try {
StringBuffer str = new StringBuffer();
List list;
if (repoId.equals("")) {
logger.info(" repoId = null ");
list = prodm.getProductsLike(targetId);
} else {
logger.info(" repoId = " + repoId);
list = prodAm.getAvailableProductsAmountListLike(targetId,
Integer.parseInt(repoId));
}
Locale loc = new Locale(lang);
MessageSourceAccessor msg = new MessageSourceAccessor(ctx, loc);
if (list.size() > 0) {
str.append(" RESPONSE ");
}
}
str.append("</table>");
response.setContentType("text/html");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write(str.toString());
} else {
response.setContentType("text/html");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("[clear]");
}
} else {
response.setContentType("text/html");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("[clear]");
}
} catch (Exception ex) {
logger.info(" >>>>> exception : " + ex.getMessage());
}
}
}
Client side mechanisms are ready to use for any framework/style. Server side part also can be deployed by any other technologies.
To get maximum performance I prevented to use any Decorator or XML interface between Server side and Web-UI.