مشکل با ajax و به روز رسانی!

rayanehkhabar · Aug 22, 2011

یه صفحه ای دارم که باید توسط ajax به روز رسانی بشه.
یعنی اطلاعات داخلش add بشه و یه سطر توی صفحه ایجاد بشه. باید به صورت ajax باشه. یعنی رفرش تو کار نباشه و یا اینکه واسه دیدن اطلاعات جدید که اظافه شده صفحه را رفرش کنم. همون موقع بعد از کلیک بر روی دکمه add اطلاعات اظافه بشه.
واسه حذف هم همینطور. وقتی حذف را زدم اطلاعات همونجا حذف بشه.

این کدها را از یه مقاله برداشتم. یکم گیج شدم. و البته جواب نداد. چون گفته بود به علت نبود وقت کدهای تحت سرور را حذف کردم!

لطفا دوستان اگه میشه این کد را برای من کامل کنید که جواب بده.

ممنون

employeeList.htm

کد:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]"> 
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]"> 
<head> 
<title>Employee List</title> 
<script type="text/javascript"> 
var xmlHttp; 
var name; 
var title; 
var department; 
var deleteID; 
var EMP_PREFIX = "emp-"; 
  
function createXMLHttpRequest() { 
if (window.ActiveXObject) { 
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
else if (window.XMLHttpRequest) { 
xmlHttp = new XMLHttpRequest(); 
} 
} 
  
function addEmployee() { 
name = document.getElementById("name").value; 
title = document.getElementById("title").value; 
department = document.getElementById("dept").value; 
action = "add"; 
if(name == "" || title == "" || department == "") { 
return; 
} 
var url = "EmployeeList?" 
+ createAddQueryString(name, title, department, "add") 
+ "&ts=" + new Date().getTime(); 
createXMLHttpRequest(); 
xmlHttp.onreadystatechange = handleAddStateChange; 
xmlHttp.open("GET", url, true); 
xmlHttp.send(null); 
} 
  
function createAddQueryString(name, title, department, action) { 
var queryString = "name=" + name 
+ "&title=" + title 
+ "&department=" + department 
+ "&action=" + action; 
return queryString; 
} 
  
function handleAddStateChange() { 
if(xmlHttp.readyState == 4) { 
if(xmlHttp.status == 200) { 
updateEmployeeList(); 
clearInputBoxes(); 
} 
else { 
alert("Error while adding employee."); 
} 
} 
}
function clearInputBoxes() { 
document.getElementById("name").value = ""; 
document.getElementById("title").value = ""; 
document.getElementById("dept").value = ""; 
} 
  
function deleteEmployee(id) { 
deleteID = id; 
var url = "EmployeeList?" 
+ "action=delete" 
+ "&id=" + id 
+ "&ts=" + new Date().getTime(); 
createXMLHttpRequest(); 
xmlHttp.onreadystatechange = handleDeleteStateChange; 
xmlHttp.open("GET", url, true); 
xmlHttp.send(null); 
} 
  
function updateEmployeeList() { 
var respon***ML = xmlHttp.respon***ML; 
var status = respon***ML.getElementsByTagName("status") 
.item(0).firstChild.nodeValue; 
status = parseInt(status); 
if(status != 1) { 
return; 
} 
var row = document.createElement("tr"); 
var uniqueID = respon***ML.getElementsByTagName("uniqueID")[0] 
.firstChild.nodeValue; 
row.setAttribute("id", EMP_PREFIX + uniqueID); 
row.appendChild(createCellWithText(name)); 
row.appendChild(createCellWithText(title)); 
row.appendChild(createCellWithText(department)); 
var deleteButton = document.createElement("input"); 
deleteButton.setAttribute("type", "button"); 
deleteButton.setAttribute("value", "Delete"); 
deleteButton.onclick = function () { deleteEmployee(uniqueID); 
}; 
cell = document.createElement("td"); 
cell.appendChild(deleteButton); 
row.appendChild(cell); 
document.getElementById("employeeList").appendChil  d(row); 
updateEmployeeListVisibility(); 
} 
  
function createCellWithText(text) { 
var cell = document.createElement("td"); 
cell.appendChild(document.createTextNode(text)); 
return cell; 
} 
  
function handleDeleteStateChange() { 
if(xmlHttp.readyState == 4) { 
if(xmlHttp.status == 200) { 
deleteEmployeeFromList(); 
} 
else { 
alert("Error while deleting employee."); 
} 
} 
}
function deleteEmployeeFromList() { 
var status = 
xmlHttp.respon***ML.getElementsByTagName("status") 
.item(0).firstChild.nodeValue; 
status = parseInt(status); 
if(status != 1) { 
return; 
} 
  
var rowToDelete = document.getElementById(EMP_PREFIX + 
deleteID); 
var employeeList = document.getElementById("employeeList"); 
employeeList.removeChild(rowToDelete); 
updateEmployeeListVisibility(); 
} 
  
function updateEmployeeListVisibility() { 
var employeeList = document.getElementById("employeeList"); 
if(employeeList.childNodes.length > 0) { 
document.getElementById("employeeListSpan").style.  display 
= ""; 
} 
else { 
document.getElementById("employeeListSpan").style.  display 
= "none"; 
} 
} 
</script> 
</head> 
<body> 
<h1>Employee List</h1> 
<form action="#"> 
<table width="80%" border="0"> 
<tr> 
<td>Name: <input type="text" id="name"/></td> 
<td>Title: <input type="text" id="title"/></td> 
<td>Department: <input type="text" id="dept"/></td> 
</tr> 
<tr> 
<td colspan="3" align="center"> 
<input type="button" value="Add" onclick="addEmployee();"/> 
</td> 
</tr> 
</table> 
</form> 
<span id="employeeListSpan" style="display:none;"> 
<h2>Employees:</h2> 
<table border="1" width="80%"> 
<tbody id="employeeList"></tbody> 
</table> 
</span> 
</body> 
</html>

EmployeeListServlet.java
اینو نفهمیدم چیه. بین این دو کد هم ظاهرا کدهای تحت سرور که فکر کنم php بوده و عملیات اتصال به دیتابیس را داشته حذف شده.

EmployeeListServlet.java

کد:

package ajaxbook.chap4; 
import java.io.*; 
import java.net.*; 
import java.util.Random; 
import javax.servlet.*; 
import javax.servlet.http.*; 
  
public class EmployeeListServlet extends HttpServlet { 
protected void addEmployee(HttpServletRequest request 
, HttpServletResponse response) 
throws ServletException, IOException { 
//Store the object in the database 
String uniqueID = storeEmployee(); 
//Create the response XML 
StringBuffer xml = new StringBuffer("<result><uniqueID>"); 
xml.append(uniqueID); 
xml.append("</uniqueID>"); 
xml.append("</result>"); 
//Send the response back to the browser 
sendResponse(response, xml.toString()); 
} 
  
protected void deleteEmployee(HttpServletRequest request 
, HttpServletResponse response) 
throws ServletException, IOException { 
String id = request.getParameter("id"); 
/* Assume that a call is made to delete the employee from the 
database */ 
//Create the response XML 
StringBuffer xml = new StringBuffer("<result>"); 
xml.append("<status>1</status>"); 
xml.append("</result>"); 
//Send the response back to the browser 
sendResponse(response, xml.toString()); 
} 
  
protected void doGet(HttpServletRequest request, HttpServletResponse 
response) 
throws ServletException, IOException { 
String action = request.getParameter("action"); 
if(action.equals("add")) { 
addEmployee(request, response); 
} 
 
else if(action.equals("delete")) { 
deleteEmployee(request, response); 
} 
} 
  
private String storeEmployee() { 
/* Assume that the employee is saved to a database and the 
* database creates a unique ID. Return the unique ID to the 
* calling method. In this case, make up a unique ID. 
*/ 
String uniqueID = ""; 
Random randomizer = new Random(System.currentTimeMillis()); 
for(int i = 0; i < 8; i++) { 
uniqueID += randomizer.nextInt(9); 
} 
return uniqueID; 
} 
private void sendResponse(HttpServletResponse response, String 
responseText) 
throws IOException { 
response.setContentType("text/xml"); 
response.getWriter().write(responseText); 
} 
}

مشکل با ajax و به روز رسانی!

rayanehkhabar

Member

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها