Javascript-форум - Показать сообщение отдельно

Paguo-86PK · #1 (**permalink**) 20.10.2009, 00:38

Вот на скорую руку набросал то, о чём давно мечтал.

Примитивная демка для сайта, где страница - одна. А содержимое динамически меняется при кликах по ссылкам, не перезагружая страницу снова. Пытался когда-то чат и форум сделать так.
Короче...

Этот скрипт сначала даёт пустую страницу. Через секунду появляется весь PHP-скрипт. После этого - загружается Canvas-демка с павлином Гнездиловой.
В общем, если обычный юзер захочет сохранить содержимое страницы в файл, не получится. Это главная идея движка

<?php
require_once "lib/JsHttpRequest/JsHttpRequest.php";
$JsHttpRequest =& new JsHttpRequest("windows-1251");
if(isset($_REQUEST['str']) != "") {
    $str = $_REQUEST['str'];
//    $upl = $_FILES['upl'];
    if (false && @$upl['tmp_name']) { // Заглушено
        $GLOBALS['_RESULT'] = array(
          "str"   => 'file ' . $upl['name'],
          "md5"   => md5(file_get_contents($upl['tmp_name'])),
        );
    } else
      if($str != "canvas") { // Демо-загрузка #1: Вывод этого файла
        $filename = "index.php";
        $file = fopen($filename, "r");
        $content = fread($file, filesize($filename));
        fclose($file);
        $GLOBALS['_RESULT'] = array(
          "str"   => $str,
          "md5"   => md5($str),
          "src"   => $content
        );
    } else { // Демо-загрузка #2: Canvas графика
        $GLOBALS['_RESULT'] = array(
          "str"   => $str,
          "md5"   => md5($str),
          "src"   => 'document.body.innerHTML = "";
                      cnv = document.createElement("canvas");
                      cnv.id = "canvas";
                      cnv.width = 320; cnv.height = 200;
                      document.body.appendChild(cnv);
                      ctx = cnv.getContext("2d");
                      ctx.fillStyle = "#000";
                      ctx.fillRect(0,0,320,200);
                      ctx.strokeStyle = "rgb(255,0,0)";
                      for(i = 0; i < 320; ++ i) {
                          ctx.moveTo(i, 100);
                          ctx.lineTo(120 + 100 * Math.cos(i / 30), 90 - 100 * Math.sin(i / 30));
                      }
                      ctx.stroke();'
        );
    }
    echo "Печатаем произвольное отладочное сообщение. Не страшна даже фатальная ошибка!";
} else {
?>
<html><head><title>JsHttpRequest :: Test #1</title>
<script src="/lib/JsHttpRequest/JsHttpRequest.js"></script>
<script language="JavaScript">
  // Функция вызывается при нажатии на кнопку.
  function calculate_md5(index) {
    JsHttpRequest.query(
      'index.php', // путь к backend-скрипту
      {
        // передаем текстовые данные 
        'str': index, //document.getElementById("mystr").value,  
        // передаем файл для закачки
        'upl': null //document.getElementById("myupl")
      },
      // Функция-обработчик, вызывается при ответе сервера. 
      function(result, errors) {
        // Вывести отладочные сообщения (если нужно).
        document.getElementsByTagName("span")[0].innerHTML = "<hr width=75%/>Errors:<hr/>" + errors;
        // Вывести результат работы.
        if(index == "index") {
            document.getElementsByTagName("div")[0].innerHTML = 
//              'MD5("' + result["str"] + '") = ' + result["md5"]
              "Loaded:<hr/>" + result["src"].replace(/\x3C/g, "&lt;").replace(/\x0D/g, "<br/>").replace(/\s/g, "&nbsp;");
        } else {
          setTimeout(result["src"],1);
        }
      }
    );
  }
function Init() {
 document.getElementsByTagName("div")[0].innerHTML = "Loading...<hr/>";
 document.getElementsByTagName("span")[0].innerHTML = "Errors...<hr/>";
 calculate_md5("index");
 setTimeout('calculate_md5("canvas")',2500);
}
</script></head>
<body onload='setTimeout("Init()",1250)'>
<div>Please wait...</div><span>debug...</span>
</body>
<?
}

Проверил в FF, IE и Opera - работает.
Использовал Small HTTP server со всей PHP-библиотекой интерпретатора.
Файл называется index.php и должен быть доступен через http://127.0.0.1/ адрес. Вся JsHttpRequest-библиотека с DkLab размещена в /lib/

Однако есть вопросы...
Как можно заметить, скрипт написан очень неграмотно. Потому что с этой библиотекой я работаю второй раз за 5 лет методом Copy/Cut-'n'-Paste и теорию работы не совсем понимаю. Хотя отдельно тестил кусками.
Так вот. Что за md5($str) в php-скрипте? Для чего эта функция?
Как я понял, все обращения к ней можно исключить в моём случае на данном этапе.
Так вот. Как правильно и грамотно реализовать мой скрипт?

P.S.: Я нарочно тупо все контенты html, js и canvas поместил в один PHP-файл. На деле, всё будет по каталогам, аккуратно и организованно.

Плюс в идеале все версии ядра:

Для тех, у кого есть Canvas. Div-древо с иконками +/- и прочими мизерными - рисуются средствами Canvas;
Для тех, у кого нету его, версия с простыми картинками тупо;
Для тех, у кого отключён JS, версия с виртуальными каталогами. Как в Wikipedia...