
March 20th, 2013, 11:54 AM
|
|
Registered User
|
|
Join Date: Mar 2013
Posts: 4
Time spent in forums: 1 h 20 m 52 sec
Reputation Power: 0
|
|
|
Prototype - [AJAX] Update Multiple Variables
New user and I apologize if this is the wrong forum.
I’ve been asked to develop a new web program that searches 2 databases for the existence of a network device name. The requirements are relatively simple;
1 – Provide a way for a user to enter a network device name to search for.
2 - Search both company databases.
3 – Provide a real time feedback method on the database search status.
My prototype main HTML page looks like this:
Enter a device name: ___________ [Submit Button]
(Below in in a table format)
Database Found Not Found
Database 1
Database 2
The HTML is:
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Look For Device</title>
</head>
<body>
<form name = "getDeviceName" method = "post" action = "checkAllDBs.jsp" >
Enter a device name: <input type = "text" name = "deviceToCheck">
<input type = "submit" name = "submit" value = "Submit">
<table style = "border: 1px solid; border-collapse: collapse">
<tr>
<th style = "border: 1px solid; border-collapse: collapse">Database</th>
<th style = "border: 1px solid; border-collapse: collapse">Found</th>
<th style = "border: 1px solid; border-collapse: collapse">Not Found</th>
</tr>
<tr>
<td style = "border: 1px solid; border-collapse: collapse">Database 1</td>
<td style = "border: 1px solid; border-collapse: collapse"></td>
<td style = "border: 1px solid; border-collapse: collapse"></td>
</tr>
<tr>
<td style = "border: 1px solid; border-collapse: collapse">Database 2</td>
<td style = "border: 1px solid; border-collapse: collapse"></td>
<td style = "border: 1px solid; border-collapse: collapse"></td>
</tr>
</table>
</form>
</body>
</html>
Now, my plan is to call the “checkAllDBs.jsp” program to do the heavy lifting. It will call 2 other jsp or php scripts that will query each individual database and return the results independently. I would like to have the “Found” / “Not Found” fields updated as each search process is completed with an "X" or checkmark.
I’m thinking of using AJAX to accomplish this but I’m not sure how to implement it. I have used AJAX before but not to this degree. I am familiar with AJAX basics like XMLHttpRequest & ActiveXObject objects, “onreadystatechange” property, readyState “state” values, and open/send methods. But trying to use it to update multiple variables asynchronously is proving to be a bit of a challenge.
Can anyone point me to a tutorial or anything where I can test the concept? Or provide another alternative?
Thanks in advance.
|