March 20th, 2013, 11:54 AM
-
[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.
March 20th, 2013, 01:08 PM
-
One way to go about this, would be to use jQuery. In jQuery there is an utility, called a "Deferred Object" and "it can register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function". (http://api.jquery.com/category/deferred-object/)
Here is a tutorial, as well: How to Run Multiple AJAX Requests.
Good Luck
March 20th, 2013, 01:18 PM
-
Hey Web_Loone08, thanks a ton. After a quick look at your URLs I think this might be what I'm looking for.