HTML+CSS+JavaScript

Если кто помнит то полтора года назад я слепил простенький скриптик игры морской бой.
Одним из замечаний была перезагрузка страницы.
Подскажите с чего начать и в каком направлении двигаться.
Имеем таблицу ячейки которой являются картинками-ссылками.
Нужно отправить на сервер номер ячейки и соответственно получив результат с сервера обновить содержимое ячейки.
Так же хотелось бы что-бы при отсутствии JS код сохранял функциональность (естаственно уже с перезагрузкой страницы)
___
Для начала хотелось бы все это организовать без применения библиотек типа JQuery
Не могу найти книгу в которой азы AJAX, куда-то пропала, а та что от меня не спряталась еще сложновата для меня.

вот так формируется табличка

<div> <?php $j=0; echo "<table border=1 cellpadding=0 cellspacing=0>"; for($y=0; $y<30; $y++)   {   echo "<tr>";    for($x=0; $x<30; $x++)     {     if($zn==0) echo "<td><a href=hod.php?p=$j><img src='img/clear.gif' width=11 height=11 border=0></a></td>";     if($zn==1) echo "<td><a href=hod.php?p=$j><img src='img/blue.png' width=11 height=11 border=0></a></td>";     if($zn==2) echo "<td><a href=hod.php?p=$j><img src='img/delete.gif' width=11 height=11 border=0></a></td>";     if($zn==3) echo "<td><a href=hod.php?p=$j><img src='img/green.png' width=11 height=11 border=0></a></td>";     if($zn==4) echo "<td><a href=hod.php?p=$j><img src='img/orange.png' width=11 height=11 border=0></a></td>";     $j++;     }   echo "</tr>";   } echo "</table>"; ?> </div>

http://javascript.ru/ajax/intro

А вот в таблице это излишки, не зачем на каждую картинку ставить ссылку, да и вообще их можно удалить, и сделать проще, по образу примера:

<script> var url = "hod.php?p=" function getSource(e) {   return (e.target) ? e.target : e.srcElement; } function showVal(e) {  alert(url + e.innerHTML) } </script> <table width="60" bgcolor="#000000" cellspacing="1" cellpadding="3"  onclick="showVal(getSource(event))"> <tr bgcolor="#ffffff">  <td>1</td><td>2</td><td>3</td> </tr> <tr bgcolor="#ffffff">  <td>4</td><td>5</td><td>6</td> </tr> <tr bgcolor="#ffffff">  <td>7</td><td>8</td><td>9</td> </tr> </table>

То есть, передаем для ajax параметр (номер ячейки), что собственно и требуется.

при отключенном JS это тоже будет работать?
а тем более попробуйте убрать единичку из первой ячейки, что Вы передадите в этом случае?

При отключенном JS ничего не будет работать, и ajax тоже, так что предупреждайте пользователя (которых, если и есть, то мизер). Либо выводите альтернативный вариант. А вы как хотите, гибрид "два в одном"?
Это пример, совсем не означающий, что я вас заставляю вписывать номера в ячейки - у любого html-тега есть атрибуты, которые могут содержать необходимое уникальное значение.
Собственно и сам ваш код:
if($zn==0) echo ...
if($zn==1) echo ...
if($zn==2) echo ...
if($zn==3) echo ...
if($zn==4) echo ...
это уже, на мой взгляд, излишек. Надо полагать, что это кораблик на 5 клеток. Но ведь можно присваивать параметры ячейке только по одному условию - "занята ли ячейка корабликом?", и если да, то ячейке (изображению) присваивается, например, id равный ключу массива соответствующего кораблика, плюс индекс этого массива как номер клетки, а на сервере удаляем соответствующий ключ соответствующего массива. Ячейки не занятые корабликом передают на сервер пустые значения.

это все далеко не так как Вы себе это представляете
это не кораблик на 5 клеток, это вывод картинки в соответствующей клетке
пусто
промах
ранен
убит
живой
если это однопалубный кораблик то одна клетка - это кораблик
если это четырех палубный кораблик, то это 4 клетки подряд по горизонтали или вертикали
http://valick.110mb.com/mb/start.php

Вывод, это уже результат на запрос, и такой клетке как промах, не трубется передача значения - эта клетка пуста. Все занятое под кораблик, это уже координаты, а как отображать ранен, убит, это уже детали, которые будут определять способ отображения содержимого массива. Но ранен или убит, это опять таки повтор координаты.

вывод это не только результат на запрос, но и первоначальный вывод в браузер (когда все поле девственно чисто) тоже вывод
здесь в цикле перебирается каждая ячейка таблицы, и в соответствии с условием в эту клетку будет выводится одна из пяти картинок.
зачем вы учите как нужно делать, если совершенно не понимаете как делаю я?

Боже мой, да делайте как хотите, я просто высказал свое мнение и предложил как. Вы же вольны выбирать и делать так, как вам нравится - на каждую ячейку по ссылке, с параметрами описывающими все возможные состояния, по щелчку которой вызывать ajax, и т.д.... Я против разве?

я задавал вопрос с целью получить ответ как грамотно дать имена таблице (ячейкам) чтобы потом сменить картинку в любой из ячеек в соответствии с ответом с сервера
причем в последствии мне нужно будет иметь возможность заменить от одной до всех ячеек таблицы

Поясняю, я исхожу из следующего:
1. Я не считаю разумным всем ячейкам таблицы (или элементам в ней) давать ссылки или назначать обработчик событий, которые будут обрабатываться одной функцией. Гораздо разумнее назначить обработчик события самой таблице. В реальности нужно только учесть, что и тег TR тоже может быть выбран мышкой (граница между клетками), поэтому нужно проверять имя тега источника события, и если это TD, значит это искомое значение.
2. Ячейка корабля может иметь только два состояния - "цела/ранена", а третье состоятние вытекает автоматически, если все ячейки корабля ранены, значит состояние всех равно "потоплено". То есть, не требуется передавать на сервер особого параметра характеризующего состояние клетки.
3. Ячейка корабля, это массив описывающий его координаты (массив клеток). Состояние этих клеток содержит массив на сервере, например, раненая ячейка имеет отрицательное значени. Значит серверу важно знать только то, что щелкнута координата занятая кораблем, а какое изображение выдать, определяется пунктом 2.
4. Все ячейки не занятые кораблями отправляют на сервер пустоту - координату не занятую кораблем (отсутсвующую в массивах), и такую ячейку просто подсвечивам каким либо цветом, при этом не важно, была ли она ранее подсвечана уже.

Но коли вам нужно нечто иное, тогда я не знаю.

Ячейка корабля, это массив описывающий его координаты
нет, в моей реализации нет такого понятия
есть понятие ячейка таблицы и у каждой ячейки есть свой ID, на сервер передается только номер этой ячейки и ничего более, в ответ сервер передает один или более ID ячеек состояние которых нужно изменить ну и соответственно само состояние которое нужно отобразить.
В логике которую я собираюсь реализовать с применением MySQL вообще не будет массивов (точнее массив будет одномерным) будет таблица.
Даже сейчас скрипт который у меня работает принимает от браузера координаты XY и работает только с ними, расположение корабля и все возможные варианты вычисляются только по одной координате в двумерном массиве.
2. Ячейка корабля может иметь только два состояния - "цела/ранена", а третье состоятние вытекает автоматически, если все ячейки корабля ранены, значит состояние всех равно "потоплено". То есть, не требуется передавать на сервер особого параметра характеризующего состояние клетки.
абсолютно верно никакого состояния на сервер передавать не нужно... только ID клетки
состояние нужно только для того чтобы пользователь видел что он успел натворить

Да какая разница, массив, не массив, в любом случае достаточно знать, занято id корблем или нет, так что ничего в принципе это не меняет.
А вот карты военнные разбивают не по XY, а как раз на квадраты, потому как это удобнее, да и вы строите таблицу не по координатам, а по числу ячеек горизонталь/вертикаль, нумеруя каждую по возрастанию. И заморачиваться с координатми XY от браузера, это лишняя головная боль.

Сим, Вы уже битый час пытаетесь впиндюрить в ячейку таблицы корабль.
Я вам уже сказал, что если это однопалубный корабль то да - это одна ячейка.
Если это многопалубный корабль, то одна ячейка это всего-лишь фрагмент корабля корабль может быть от двухпалубного до бесконечнопалубного
И даже более того игровое поле это не 10х10 или 30х30, оно может быть абсолютно любым хоть 349х216
Никакой головной боли я себе не придумываю
сейчас ссылка имеет вид <a href=hod?x=3&y=5></a>
а будет иметь вид <a href=hod?p=35></a>
Я не виноват, что Вы выдумали головную боль

Да дейлайте как хотите. Вы представили изначально таблицу, я вам ответил. Все, OFF.