Simple Ajax Example

function init() {
target = document.getElementById("complete-field");
}

function initRequest() {
try { // Firefox, Opera 8.0+, Safari

req1 = new XMLHttpRequest();
} catch (e) { // Internet Explorer
try {
req1 = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
req1 = new ActiveXObject("Microsoft.XMLHTTP");
}
}
}

function doCompletion() {
init();
var url = "AjaxGetCompanyDetails.jsp?action=CreditCompanyReport&id=" + escape(target.value);//getting XML data
initRequest();
req1.onreadystatechange = processRequest;
try{
Ext.MessageBox.show({ title: 'Please wait...', msg: 'Loading......', width:240, progress:false, closable:false });
}catch(k){}
req1.open("GET", url, true);
req1.send(null);

}

function processRequest() {
if (req1.readyState == 4) {
if (req1.status == 200) {
parseMessages();
} else if (req1.status == 204){

}else{
}
}
}

function parseMessages() {
var companies = req1.responseXML.documentElement.getElementsByTagName("companies")[0];
for (loop = 0; loop < companies.childNodes.length; loop++) {
var company= companies.childNodes[loop];
var name = company.getElementsByTagName("name")[0];
var address = company.getElementsByTagName("address")[0];
var tele = company.getElementsByTagName("tele")[0];
var fax = company.getElementsByTagName("fax")[0];
addRowToTable(name.childNodes[0].nodeValue,address.childNodes[0].nodeValue,tele.childNodes[0].nodeValue,fax.childNodes[0].nodeValue);
}
Ext.MessageBox.hide();
}


======================= Data Generated JSP ==============================

<!-- //================================================================

//

// Document : AjaxGetCompanyDetails.jsp

//

// Create date : 11-10-2009

//

// Author : Gayan Dissanayake

//

//=====================================================================



-->

<%@ page import="java.util.HashMap" %>

<%@ page import="AjaxController" %>

<%@ page import="java.io.IOException" %>

<%@ page import="java.util.Iterator" %>

<%@ page import="java.io.PrintWriter" %>







<%!

public void jspInit() {

}



public void jspDestroy() {

}

%>

<%@ page contentType="text/xml" %>

<%

try {

String action = request.getParameter("action");

String targetId = request.getParameter("id");

String data[][] = (String[][]) AjaxController.getCompanyDetails(targetId);
//return 2D array

StringBuffer sb = new StringBuffer();

boolean namesAdded = false;

if ("CreditCompanyReport".equals(action)) {

for (int i = 0; i < data.length; i++) {

sb.append("<company>");

sb.append("<name>" + (String) data[i][0].replace('&', '-').replace('/', '-') +
"</name>");

sb.append("<address>" + (String) data[i][1].replace('&', '-').replace('/', '-')
+ "</address>");

sb.append("<tele>" + (String) data[i][2].replace('&', '-').replace('/', '-') +
"</tele>");

sb.append("<fax>" + (String) data[i][3].replace('&', '-').replace('/', '-') +
"</fax>");

sb.append("</company>");



namesAdded = true;

}

if (namesAdded) {

StringBuffer dataXml = new StringBuffer();

dataXml.append("<xml version=\"1.0\" encoding=\"UTF-8\" ><companies>");

dataXml.append(sb);

dataXml.append("</companies></xml>");



response.setContentType("text/xml");

response.setHeader("Cache-Control", "no-cache");

response.getWriter().write(dataXml.toString().trim());

data = null;

} else {

response.setStatus(HttpServletResponse.SC_NO_CONTENT);

}

}

} catch (Exception e) {

e.printStackTrace();

}

%>

 

Remove table rows dynamically using javascript

function removeRowsFromTable()
{
var tb2 = document.getElementById('ServicesTable');//table id
var lastRow = tb2.rows.length;
while (lastRow > 1) {
try{
lastRow--;
tb2.deleteRow(lastRow);

}catch(e){
}
}
}

Create Dynamic HTML table using JavaScript

JAVASCRIPT CODE

<script type="text/javascript">

function addRowToTable(name,address,tele,fax){

try {

 var w = name;

var x = address;

var y = tele;

var z= fax;

var tbl = document.getElementById('ServicesTable');

var lastRow = tbl.rows.length;

var iteration = lastRow;

var row = tbl.insertRow(lastRow);

if(lastRow % 2 ==0)

row.className="rowgrey";

else

row.className="buttons";

row.height=25;

var secondCell = row.insertCell(0);

var textNode2 = document.createTextNode(w);

secondCell.appendChild(textNode2);

 

var thirdCell = row.insertCell(1);

var textNode3 = document.createTextNode(x);

thirdCell.appendChild(textNode3);

 

var fourthCell = row.insertCell(2);

var textNode4 = document.createTextNode(y);

fourthCell.appendChild(textNode4);

 

 

var fifthCell = row.insertCell(3);

var textNode5 = document.createTextNode(z);

fifthCell.appendChild(textNode5);

} catch (e) {

}

 

}

</script>

 

HTML CODE

 

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="bodyTable" height="35"  id="ServicesTable" >

<tr>

<td width="30%" height="31" align="left" class="tableTitle"><span class="style1">Company Name </span></td>

<td width="40%" height="31" align="left" class="tableTitle"><span class="style1">Address</span></td>

<td width="15%" height="31" align="left" class="tableTitle"><span class="style1">Tele. No. </span></td>

<td width="15%" height="31" align="left" class="tableTitle"><span class="style1">Fax No.</span></td>

</tr>

</table>