OFF: предлагаю в эту тему складывать все варианты подгрузки данных на страницу без её перезагрузки.
Иногда появляется необходимость взаимодействия страницы с сервером, передача серверу определённых параметров, получение от него ответа, при этом задача стоит так, что нужно обновить только часть данных и без перезагрузки основной страницы.
Как я себе представляю подгрузку данных. Подгрузить данные в виде картинок, текста и т.п., в общем, не требующего при этом передачи серверу параметров - не представляет из себя никакой сложности. Сложность появляется тогда, когда нужно подгрузить данные на основе каких-либо критериев. Например, у вас есть БД, в которой в виде таблицы лежит информация по улицам, домам, квартирам (т.е., три связанных списка, от улицы зависят дома, которые на ней расположены, от домов - квартиры, которые находятся в этом доме). Передавать всю эту информацию на страницу может быть затруднительным, если, например, в этой таблице больше 100 000 записей. Тут нам может помочь следующий принцип: сначала передаём список улиц, потом, в зависимости от выбранной улицы, передаём список домов, потом, в зависимости от дома - список квартир. Соответственно, для получения списка домов на сервер нужно передать выбранную квартиру, а для списка квартир - выбранные дом и улицу.
Как можно решить подобные задачи? На мой взгляд, нужно с сервера нужно получать JavaScript'овые файлы, содержимое которых зависит от переданных параметров. Ведь если мы сможем получать JavaScript'овые файлы с зависимым от параметров содержимым - то мы можем получать что угодно: списки, новые функции, делать вызовы старых функций и т.п. - не говоря уже про получение статического контента.
Одно из возможных решений - использование метода appendChild, который будет добавлять в наш документ скрипт.
Особенности:
1. Данные пердаются методом GET, что накладывает размер на передаваемые параметры (4 кб по спецификации HTTP)
2. Можно передавать только текстовые параметры, нельзя передать бинарные (файлы, к примеру).
Ниже приведён код с комментариями. Обсуждение http://forum.vingrad.ru/index.php?showtopic=47923.
| Код |
// Создадим конструктор объектов для подгрузки JS файлов.
function clUploadData ( thesrc ) {
// При инициализации объекта указываем, откуда данные будут аплоадиться
this.src = thesrc || "/upload/";
this.src += "?";
// Тип замещаемого объекта будет "text/javascript"
this.type = "text/javascript";
// oldScript - элемент типа "text/javascript", который
// при каждом аплоаде будет замещаться новым
this.oldScript = document.createElement("SCRIPT");
this.oldScript.type = this.type;
// callId - число, которое при каждом аплоаде будет
// изменяться (и будет уникальным, естественно)
this.callId = 0;
document.body.appendChild(this.oldScript);
this.upload = function ( theparams ) {
// параметры передаются в виде словаря
// { ключ : значение , ... }.
// В качестве ключа не должны использоваться
// русские буквы и спец. символы.
var params = theparams || {};
// А теперь, собственно, разбираем словарь по кускам
var tParams = "";
for ( var key in params ) {
var value = params[key];
// Ну а теперь, хит сезона :)
// Заменяем в словаре все символы, которые не могут быть
// переданы в строке запроса ("+", "&", "=", "\", "#", ";", "\n")
// на %xx, где xx - число в шестнадцатеричной форме
// Достигается методом encodeURIComponent.
value = value.replace("+",encodeURIComponent("+"));
value = value.replace("&",encodeURIComponent("&"));
value = value.replace("=",encodeURIComponent("="));
value = value.replace("#",encodeURIComponent("#"));
value = value.replace(";",encodeURIComponent(";"));
value = value.replace("\\n",encodeURIComponent("\\n"));
value = value.replace("\\\\",encodeURIComponent("\\\\"));
tParams += String(key) + "=" + value + "&";
}
// теперь снова создаём элемент типа "text/javascript",
// который и заменит oldScript
var newScript = document.createElement("SCRIPT");
newScript.type = this.type;
// теперь ещё одна фишка от Alexey(eburg).
// Элемент, который обеспечивает нам уникальность запроса
// и, соответственно, некешируемость браузером подгружаемого
// скрипта, callId.
// Для того, что бы он действительно стал уникальным, добавим
// Math.random(). Зачем, спросите Вы? Ответ прост. Пользователь
// вполне может нажать в браузере F5, его страница обновится,
// callId снова установится в 0, и браузер перестанет аплоадить
// данные, потому что запросы будут закэшированы (за искл., Gecko).
this.callId += 1 + Math.random();
// Готовим "адрес" скрипта
newScript.src = this.src + "callid=" + String(this.callId) + '&' + tParams;
// Замещаем элемент oldScript на newScript
document.body.replaceChild(newScript,this.oldScript);
// Ну, и соответственно, прописываем вместо oldScript новый :)
this.oldScript = newScript;
}
}
|
Теперь подведу итоги, кратко.
1. Конструктор.
| Код |
function clUploadData ( thesrc ) {
this.src = thesrc || "/upload/";
this.src += "?";
this.type = "text/javascript";
this.oldScript = document.createElement("SCRIPT");
this.oldScript.type = this.type;
this.callId = 0;
document.body.appendChild(this.oldScript);
this.upload = function ( theparams ) {
var params = theparams || {};
var tParams = "";
for ( var key in params ) {
var value = params[key];
value = value.replace("+",encodeURIComponent("+"));
value = value.replace("&",encodeURIComponent("&"));
value = value.replace("=",encodeURIComponent("="));
value = value.replace("#",encodeURIComponent("#"));
value = value.replace(";",encodeURIComponent(";"));
value = value.replace("\\n",encodeURIComponent("\\n"));
value = value.replace("\\\\",encodeURIComponent("\\\\"));
tParams += String(key) + "=" + value + "&";
}
var newScript = document.createElement("SCRIPT");
newScript.type = this.type;
this.callId += 1 + Math.random();
newScript.src = this.src + "callid=" + String(this.callId) + '&' + tParams;
document.body.replaceChild(newScript,this.oldScript);
this.oldScript = newScript;
}
}
|
2. Кусок HTML кода с примером использования сего метода
| Код |
<body>
<script>
var uO = new clUploadData(); // uploadObject
</script>
<form>
<input type="text" name="key" size="30" value="">
<input type="button" value="Загрузить" onClick="uO.upload({'key':this.form.elements['key'].value})">
</form>
</body>
|
3. Ну, и наконец, кусок кода на PSP, обрабатывающий запрос и выдающий скрипт*.
К сожалению, подсветки под python не сделали (ех, какой большой минус), буду пользоваться подсветкой cpp.
| Код |
<%
#############################################################
from pyPgSQL import PgSQL
# type is "text/javascript"
req.content_type = "text/javascript"
# FieldStorage dictionary
fsdict = util.FieldStorage(req)
# Сам код
if fsdict.has_key('key'):
keyvalue = keyvalue.replace("\\", "\\\\")
keyvalue = fsdict['key'].replace("'","\\'")
keyvalue = keyvalue.replace("\n", "\\n")
%>
alert('<%= keyvalue %>');
<%
else:
pass
%>
alert('Не передано ничего!');
|
* Этот же код можно написать на чём угодно, включая php. Но я пишу на psp, так что эту часть доделывайте сами 
Пользуйтесь на здоровье.  |