Aptana Jaxer

Мы описывали ранее Open Source Ajax сервер - Jaxer. А вот и руководство от IBM по практическому программированию Jaxer. Вот модель, предлагаемая Jaxer:



Соответственно, код на сервере и клиенте может быть один и тот же код (JavaScript):

<script type="text/javascript" runat="both">
/*
* Easy access to a named element in the DOM
*/
function $(id)
{
return document.getElementById(id);
}

/*
*
*/
function addTaskToUI(description, id)
{
var newId = id || Math.ceil(1000000000 * Math.random());
var div = document.createElement("div");
div.id = "task_" + newId;
div.className = "task";

var checkbox = document.createElement("input");
checkbox.setAttribute("type", "checkbox");
checkbox.setAttribute("title", "done");
checkbox.setAttribute("id", "checkbox_" + newId);
Jaxer.setEvent(checkbox, "onclick", "completeTask(" + newId + ")");
div.appendChild(checkbox);

var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("size", "60");
input.setAttribute("title", "description");
input.setAttribute("id", "input_" + newId);
input.value = description;
Jaxer.setEvent(input, "onchange",
"saveTaskInDB(" + newId + ", this.value)");

div.appendChild(input);

$("tasks").insertBefore(div, $("tasks").firstChild);

if (!Jaxer.isOnServer)
{
saveTaskInDB(newId, description);
}
}
</script>

в одной части добавляется новый элемент (элементы) для ввода, в другой - еще и сохраняется в базе. А значение атрибута runat как раз и определяет, где исполнять код.

Работа с базой данных выглядит примерно так:

<script type="text/javascript" runat="server">

/*
* The SQL to create the database table we'll use to store the tasks
*/
var sql = "CREATE TABLE IF NOT EXISTS tasks " +
"( id INTEGER NOT NULL" +
", description VARCHAR(255)" +
", created DATETIME NOT NULL" +
")";

// Execute the sql statement against the default Jaxer database
Jaxer.DB.execute(sql);
</script>