powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / AJAX: таблица не обновляется
25 сообщений из 26, страница 1 из 2
AJAX: таблица не обновляется
    #35437370
DmitryTS
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Начинаю осваивать AJAX. На странице есть таблица книг. По нажатию на кнопку с сервера приходит список книг, которые должны быть добавлены в таблицу. Я отлаживал скрипты с помощюью Firefor Firebug и все работает. Но работает ТОЛЬКО в режиме отладки скрипта. В обычном режиме Fireforx не обновляет таблицу, так же как и Opera и IE.
Код скрипта:

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
var req = false;
function newXMLHttpRequest() {
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e1) {
      try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
      }
    }
  }
}

function refreshTable() {
    newXMLHttpRequest();
    req.onreadystatechange=function() {
  		if (req.readyState ==  4 ) {
     		if(req.status ==  200 ) {
     			updateBooks(req.responseXML);
         	}
  		}
	};
    req.open("GET", "http://localhost:8080/BookClient/AjaxServlet?action=showbooks", true);
	req.send(null);
}

function updateBooks(booksXML) {
    var books = booksXML.getElementsByTagName("books")[ 0 ];

    var table = document.getElementById("booksTable");

    var items = books.getElementsByTagName("book");
    for (var I =  0  ; I < items.length ; I++) {
        var item = items[I];

        var id = item.attributes.getNamedItem("id").textContent; 
        var title = item.attributes.getNamedItem("title").textContent;
        var author = item.attributes.getNamedItem("author").textContent;
        var price = item.attributes.getNamedItem("price").textContent;

		var tr = document.createElement("tr");
		table.appendChild(tr);
		
		var tdId = document.createElement("td");
		tr.appendChild(tdId);
		tdId.appendChild(document.createTextNode(id));

		var tdTitle = document.createElement("td");
		tr.appendChild(tdTitle);
		tdTitle.appendChild(document.createTextNode(title));

		var tdAuthor = document.createElement("td");
		tr.appendChild(tdAuthor);
		tdAuthor.appendChild(document.createTextNode(author));

		var tdPrice = document.createElement("td");
		tr.appendChild(tdPrice);
		tdPrice.appendChild(document.createTextNode(price));
    }
}

Может я конечно сильно туплю, но не могу понять, почему таблица не обновляется.
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35437881
apapacy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Из подохрительных моментов кода - хранение req в глобальной переменной.

Вместо красивой конструкции
item.attributes.getNamedItem("id").textContent;
дучше использовать из DOM-1
item.getAttribute(name)
This method returns a DOMString. The name parameter is of type DOMString.

Где вызывается код? Сколько раз вызывается? Как задана в коде таблица?

Если до загрузки документа вызывается функция - таблица может быть недоступна еще.

Море вопросов.
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35437953
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Кривизна ясен перец. Как сказал apapacy , подохрительный момент заключается в строчке
Код: plaintext
req.open("GET", "http://localhost:8080/BookClient/AjaxServlet?action=showbooks", true);
. Никто же не знает как у тебя кот Том настроен.
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35437978
shiftee
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Чисто для интереса.

readyState=0 после создания объекта XMLHttpRequest, но до вызова метода open().

readyState=1 после вызова метода open(), но до вызова метода send().

readyState=2 после вызова метода send().

readyState=3 после того, как браузер соединится с сервером, но до завершения сервером ответа.

readyState=4 после завершения запроса и полного получения всех данных ответа с сервера.

А в коде выше получается что он вообще должен проскочить вот этот момент при первом вызове
Код: plaintext
1.
2.
3.
4.
if (req.readyState ==  4 ) {
          if(req.status ==  200 ) {
     	  updateBooks(req.responseXML);
         }
 }

Теоретически где-то должен быть сет таймаут чтобы она всетаки отработалась еще раз.

Я могу ошибаться и поэтому интересуюсь.
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35438134
LINUXER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
shiftee
Я могу ошибаться и поэтому интересуюсь.
Код: plaintext
1.
2.
3.
4.
5.
6.
req.onreadystatechange=function() {
  		if (req.readyState ==  4 ) {
     		if(req.status ==  200 ) {
     			updateBooks(req.responseXML);
         	}
  		}
	};
По-русски: при изменении состояния готовности(readyState) запроса(req) выполняется function(){...}
Каждый раз при изменении
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35438258
DmitryTS
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
apapacyИз подохрительных моментов кода - хранение req в глобальной переменной.

Вместо красивой конструкции
item.attributes.getNamedItem("id").textContent;
дучше использовать из DOM-1
item.getAttribute(name)
This method returns a DOMString. The name parameter is of type DOMString.

Где вызывается код? Сколько раз вызывается? Как задана в коде таблица?

Если до загрузки документа вызывается функция - таблица может быть недоступна еще.

Море вопросов.

Код вызывается по нажатию на кнопку Refresh:
Код: plaintext
1.
2.
<form>
    <button onclick="refreshTable();">refresh</button>
</form>
Все скрипты объявлены в разделе <head>. Таблица существует изначально.

Таблица на странице JSP задана слудующим образом:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
<table border="1" width="70%" id="booksTable">
	<tr bgcolor="#5577FF">
		<th>Book ID</th>
		<th>Title</th>
		<th>Author</th>
		<th>Price</th>
		<th>Action</th>
	</tr>
	<% for (Iterator iter = books.iterator(); iter.hasNext();) {
		BookBank element = (BookBank) iter.next(); %>
		<tr>
			<td><%=element.getId()%></td>
			<td><%=element.getTitle()%></td>
			<td><%=element.getAuthor().getName()%></td>
			<td><%=element.getPrice()%></td>
			<td align="center">
			<form action="MainServlet" method="POST">
				<input type="hidden" name="action" value="deletebook">
				<input type="hidden" name="id" value="<%=element.getId()%>">
				<input type="submit" value="delete">
			</form>
			<form action="MainServlet" method="POST">
				<input type="hidden" name="action" value="editbookpage">
				<input type="hidden" name="id" value="<%=element.getId()%>">
				<input type="submit" value="edit">
			</form>
			</td>
		</tr>
	<% } %>
</table>

ShSergeКривизна ясен перец. Как сказал apapacy , подохрительный момент заключается в строчке
Код: plaintext
req.open("GET", "http://localhost:8080/BookClient/AjaxServlet?action=showbooks", true);
. Никто же не знает как у тебя кот Том настроен.

Я использую JBOSS. Но суть не в этом. Я отлаживал на стороне сервера, там все нормально, отправляет валидную XML. На стороне клиента отлаживал firebug-ом, все данные из XML извлекает и записывает куда нужно. Проблема в том, что без режима отладки ничего не происходит.

shifteeЧисто для интереса.

readyState=0 после создания объекта XMLHttpRequest, но до вызова метода open().

readyState=1 после вызова метода open(), но до вызова метода send().

readyState=2 после вызова метода send().

readyState=3 после того, как браузер соединится с сервером, но до завершения сервером ответа.

readyState=4 после завершения запроса и полного получения всех данных ответа с сервера.

А в коде выше получается что он вообще должен проскочить вот этот момент при первом вызове
Код: plaintext
1.
2.
3.
4.
if (req.readyState ==  4 ) {
          if(req.status ==  200 ) {
     	  updateBooks(req.responseXML);
         }
 }

Теоретически где-то должен быть сет таймаут чтобы она всетаки отработалась еще раз.

Я могу ошибаться и поэтому интересуюсь.

Тут я что-то не понимаю. Мне же нужно обрабатывать только то состояние, когда ответ получен и его можно парсить. Зачем мне остальные?
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35438400
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Можно пойти другим путём. Послать куда подальше XmlHttpRequest и XML. Преобразовать XML в JSON (таких преобразователей очень много), превратить JSON в JSONP и в калбек функции updateBooks проаппендчилдить чего куда надо.
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35438434
DmitryTS
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Спасибо за совет. Но моя цель заключается в том, чтобы сделать все "классическим" путем, без применения дополнительных средств. Я просто хочу разобраться как AJAX работает сам по себе.
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35440039
vned
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
у тебя функция newXMLHttpRequest() ничего явно не возвращает, тоесть сделай
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
function newXMLHttpRequest() {
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e1) {
      try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
      }
    }
  }
  return req;
}
и так:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
function refreshTable() {
    req=newXMLHttpRequest();
    req.onreadystatechange=function() {
  		if (req.readyState ==  4 ) {
     		if(req.status ==  200 ) {
     			updateBooks(req.responseXML);
         	}
  		}
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35440087
DmitryTS
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Я сделал. Все равно не работает((
У меня получается выводить принятые данные в div с помощью innerHTML. То есть выходит, что браузер нормально принимает даные и корректно их парсит, но почему-то не может добавить новую строку в таблицу.
Кстати в Opera и Firefox, данные, которые я вывожу в div появляются и сразу изчезают, т е страница обновляется
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35440102
Шогал
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
А если строки и столбцы создавать через функции insertRow и insertCell ?
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35440104
vned
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Пы.Сы не помешало бы добавить проверку на доступность объекта XMLHttpRequest (тоесть значение параметра ReadyState должно быть 0 или 4) перед отправкой данных, а создавать его не в процедуре запроса а при инициализации страницы, тоесть сделать так:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
var req = newXMLHttpRequest();

function newXMLHttpRequest() {
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e1) {
      try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
      }
    }
  }
  return req;
}

function refreshTable() {
      if(req.readyState== 4 ||req.readyState== 0 ){
           req.open("GET", "http://localhost:8080/BookClient/AjaxServlet?action=showbooks", true);
           req.onreadystatechange=updateBooks;
           req.send(null);
      }
}
function updateBooks()
{
  if(req.readyState== 4 )
  {
    if(req.status== 200 )
    {
      readResponse();
    }
    else
    {
      alert(req.statusText);
    }
  }
}
function readResponse();
{
    var books = booksXML.getElementsByTagName("books")[ 0 ];

    var table = document.getElementById("booksTable");

    var items = books.getElementsByTagName("book");
    for (var I =  0  ; I < items.length ; I++) {
        var item = items[I];

        var id = item.attributes.getNamedItem("id").textContent; 
        var title = item.attributes.getNamedItem("title").textContent;
        var author = item.attributes.getNamedItem("author").textContent;
        var price = item.attributes.getNamedItem("price").textContent;

		var tr = document.createElement("tr");
		table.appendChild(tr);
		
		var tdId = document.createElement("td");
		tr.appendChild(tdId);
		tdId.appendChild(document.createTextNode(id));

		var tdTitle = document.createElement("td");
		tr.appendChild(tdTitle);
		tdTitle.appendChild(document.createTextNode(title));

		var tdAuthor = document.createElement("td");
		tr.appendChild(tdAuthor);
		tdAuthor.appendChild(document.createTextNode(author));

		var tdPrice = document.createElement("td");
		tr.appendChild(tdPrice);
		tdPrice.appendChild(document.createTextNode(price));
    }
}
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35440112
vned
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
DmitryTSЯ сделал. Все равно не работает((
У меня получается выводить принятые данные в div с помощью innerHTML. То есть выходит, что браузер нормально принимает даные и корректно их парсит, но почему-то не может добавить новую строку в таблицу.
Кстати в Opera и Firefox, данные, которые я вывожу в div появляются и сразу изчезают, т е страница обновляется
попробуй последний топ)
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35440167
DmitryTS
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ШогалА если строки и столбцы создавать через функции insertRow и insertCell ?

Спасибо!!!! Все заработало!
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35440181
DmitryTS
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Но работает только в IE ((
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35440257
vned
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
DmitryTSНо работает только в IE ((
Код: plaintext
1.
2.
3.
4.
5.
		var tr = document.createElement("tr");
		tr=table.insertRow(tr);
		
		var tdId = document.createElement("td");
		tdId=tr.insertCell(tdId);
                tdId.innerHTML=id;


попробуй таким образом. Проверил в IE и Мозиле
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35440281
DmitryTS
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Это не помогает. Зато я понял причину. Opera и Firefox почему-то перезагужают всю страницу полностью. Т. е. новые строки в таблицу добавляются, затем сразу же происходит обновление страницы и таблица возвращается в исходное состояние.
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35440289
vned
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Пы.Сы может, стоить заменить строки

Код: plaintext
1.
2.
3.
        var id = item.attributes.getNamedItem("id").textContent; 
        var title = item.attributes.getNamedItem("title").textContent;
        var author = item.attributes.getNamedItem("author").textContent;
        var price = item.attributes.getNamedItem("price").textContent;
на

Код: plaintext
1.
2.
3.
       var id = item.getElementsByTagName("id").firstChild.data; 
        var title = item.getElementsByTagName("title").firstChild.data;
        var author = item.getElementsByTagName("author").firstChild.data;
        var price = item.getElementsByTagName("price").firstChild.data;
если не ошибаюсь ;)
вообщем у меня так:


Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
function readResponse()
{
  booksXML=xmlHttp.responseXML;


    var books = booksXML.getElementsByTagName("response")[ 0 ];

    var table = document.getElementById("booksTable");

    var items = books.getElementsByTagName("result");
    for (var I =  0  ; I < items.length ; I++) {
        var item = items[I];

        var id = item.firstChild.data; 

		var tr = document.createElement("tr");
		tr=table.insertRow(tr);
		
		var tdId = document.createElement("td");
		tdId=tr.insertCell(tdId);
                tdId.innerHTML=id;

		var tdNum = document.createElement("td");
		tdNum=tr.insertCell(tdNum);
                tdNum.innerHTML="1";

    }
}
ответ сервера:

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
<?xml version=\"1.0\"?>
<response>
    <result>Kyiv</result>
    <result>Kirovograd</result>
    <result>Moskow</result>
    <result>Murmansk</result>
    <result>Washington</result>
    <result>Atlanta</result> 
    <result>London</result>
    <result>Manchester</result>
    <result>Toronto</result>
    <fieldid>insCountry</fieldid>
</response>  
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35440294
vned
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
и еще сама страница:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<!DOCTYPE html PUBLIC "=//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;
                                        charset=Windows-1251"/>
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE"/>
<script type="text/javascript" src="validate1.js"></script>
</head>
<table width="50%" id="booksTable">
<caption>Login</caption>
</table>
<button onclick="validate('::ALL::','insCountry')">OK</button>

...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35440302
vned
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
DmitryTSЭто не помогает. Зато я понял причину. Opera и Firefox почему-то перезагужают всю страницу полностью. Т. е. новые строки в таблицу добавляются, затем сразу же происходит обновление страницы и таблица возвращается в исходное состояние.
Я у себя так проделал и не перегружает О_о
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35440308
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Переходи с реквеста на калбек (это тоже аякс, но в стиле гугл).
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35440547
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
DmitryTSЭто не помогает. Зато я понял причину. Opera и Firefox почему-то перезагужают всю страницу полностью.

так может происходить из-за ошибки в яваскрипте или отстутствия строки return false в случае клика по кнопке. Т.е. чтобы не происходило перехода после нажатия на кнопку нужно написать примерно следующее: <button onclick="myFunc(); return false;"> , иначе ФФ делает сабмит формы, даже если кнопка - не submit (хз почему). Тоже самое происходит, если посреди myFunc() встречается ошибка и до строки return false дело не доходит.

Из сомнительного в Вашем скрипте: Вы делаете appendChild элементов в tr прямо в объект table. Это ошибка - строки tr таким образом можно добавлять только в tbody, thead или tfoot. Чтобы не заморачиваться с tbody/thead/tfoot, можно использовать insertRow и insertCell , но только не тем кривым макаром, каким "советовали" несколькими постами выше, а согласно спецификациям:
Код: plaintext
1.
2.
3.
4.
var tr = table.insertRow(- 1 );
tr.insertCell(- 1 ).appendChild(document.createTextNode(id));
tr.insertCell(- 1 ).appendChild(document.createTextNode(title));
...
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35440548
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ShSergeПереходи с реквеста на калбек (это тоже аякс, но в стиле гугл).
ты еще не замучался рекламировать?
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35440612
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
illionты еще не замучался рекламировать?
Замучался. Но какая классная мулька!
...
Рейтинг: 0 / 0
AJAX: таблица не обновляется
    #35440950
apapacy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Серж.
Существуент три способа загрузки контента Ajax: XMLHttpRequesr, IFRAME, SCRIPT.
У скрипта есть ровно одно положительное свойство - кросс-доменность.
Но есть и отрицательные - невозможность синхронной загрузки, невозможность работы с ответом как с текстом, невозможность работы с ответом как с ЧМД-документом.
Второй и боле существенный недостаток для крупных проектов заключается в так называемой жесткой связанности клиентсого и серверного кода, которую можно избежать при взаимодечтвии с запросами и фреймами используя XML или JSON.
...
Рейтинг: 0 / 0
25 сообщений из 26, страница 1 из 2
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / AJAX: таблица не обновляется
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]