1

Тема: JavaScript: асинхронная загрузка содержимого без обновления страницы

Простейший пример.
Файл page.html:

<html>
<body>
<script id="get" type="text/javascript"></script>

<p id="x">text</p>
<br>
<input type=button value="TEST" onclick="document.getElementById('get').src='async.js'">

<body>
</html>

Файл async.js:

var x = document.getElementById('x');    // получаем параметр
x.innerHTML = new Date();                // отображаем результат

При нажатии на кнопку "Test" на html-странице текстовое содержимое тега "p" будет изменено, без обновления самой страницы.
В Opera это сработает только один раз, после чего она скеширует скрипт и больше его подгружать не будет.
Благодарность за разъяснения - fps.

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

2

Re: JavaScript: асинхронная загрузка содержимого без обновления страницы

В URL скрипта можно добавить мусор, чтобы он не мог скешироваться:

<input type=button value="TEST" onclick="document.getElementById('get').src='async.js'+'?rnd='+Math.random()">

Благодарность за разъяснения - fps.

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

3

Re: JavaScript: асинхронная загрузка содержимого без обновления страницы

Можно не прописывать скрипт "get" в html заранее, а создать его динамически:

<html>
<body>

<p id="x">text</p>
<input type=button value="TEST" onclick="get()">

<script id="get" type="text/javascript">
function get()
{
    var loader = document.createElement("script");
    loader.id = "loader";
    loader.type = "text/javascript";
    loader.src = "async.js" + "?rnd=" + Math.random();
    document.body.appendChild(loader);
}
</script>

<body>
</html>

Благодарность за разъяснения - fps.

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

4

Re: JavaScript: асинхронная загрузка содержимого без обновления страницы

Недостаток всех предыдущих примеров - код страницы "размазан" по обоим файлам - основному и подгружаемому.
Отладка и модификация затруднены.
Более удобно не отображать результат в подгружаемом скрипте, а просто вернуть значение обратно в основную страницу и продолжить работу и уже в ней.

Пример 4. Callback
(без веб сервера не заработает)
page4.htm

<html>
<body>

 <input type=text id="x" value="2" >
 <input type=button value="TEST" onclick="get()">

 <script id="get" type="text/javascript">

  function get()
  {
   var x=document.getElementById("x").value;    // получаем исходное значение
   var loader=document.createElement("script");    // создаем скрипт
       loader.id="loader";            // id понадобится чтобы потом удалить скрипт
       loader.type="text/javascript";
       // параметры: x=число для обработки, callback=имя функции возврата
       loader.src="calc.asp"+"?x="+escape(x)+"&callback=getEnd&rnd="+Math.random();
   document.body.appendChild(loader);
  }

  function getEnd(result)        // сюда попадем по окончании работы скрипта calc.asp
  {
   var x=document.getElementById("x");    // отображаем результат работы запроса к серверу
       x.value=result;

   var loader=document.getElementById("loader"); // удаляем отработавший скрипт
   document.body.removeChild(loader);
  }

 </script>
<body>
</html>

calc.asp

<%
 // эта часть исполняется на сервере

  var callback=Request.QueryString("callback")+"";    // получили имя функции возврата
  var x=Request.QueryString("x")+"";            // получили параметр x
  var result=x*2;                    // обработали его

%>

 // эта часть исполняется в браузере

 <%=callback%>("<%=result%>");     // ASP превратит это в: getEnd("4");