[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / AJAX /

Подгрузка через AJAX HTML-кода, содержащего JavaScript

При разработке CMS S.Builder наша команда активно использовала AJAX. Теперь вот решили поделиться накопленным опытом. Начнем с этого хабратопика. Не буду здесь затрагивать различные фреймворки и библиотеки. Свой код всегда роднее. Для работы с AJAX-ом в S.Builder написана библиотека sbAJAX. Можете качать и пользоваться :). В этом файле есть функция sbEvalJS. Для тех, кто не знает, объясню. При подгрузке через AJAX и вставке на страницу HTML-кода, содержащего JavaScript, JavaScript выполняться не будет или полезут баги. Эта функция как раз решает поставленную задачу.

После загрузки, полученный код передается функции, она вырезает все что находится между тегами <script …> … </script> и, если это не вынесенный в файл JavaScript, прогоняет его через eval(), либо подгружает файл, содержащий JavaScript, и прогоняет через eval() полученный код. Все просто. Код функции приведен ниже:

 

  1. function sbExecScript(text)
  2. {
  3.    if (!text)
  4.       return;
  5.       
  6.    if (window.execScript)
  7.    {
  8.       window.execScript(text);
  9.    }
  10.    else
  11.    {
  12.       var script = document.createElement('script');
  13.       script.setAttribute('type', 'text/javascript');
  14.       script.setAttribute('language', 'JavaScript');
  15.       if (_isIE)
  16.          script.text = text;
  17.       else
  18.          script.appendChild( document.createTextNode( text ) );
  19.          
  20.       var head = document.getElementsByTagName("head")[0] || document.documentElement;
  21.       head.insertBefore( script, head.firstChild );
  22.       head.removeChild( script );
  23.    }
  24.    
  25.    return;
  26. }
  27.  
  28. var sbEvalJSSrcs = [];
  29. function sbEvalJS(s)
  30. {
  31.    var js_ScriptFragment = '(?:<script.*?>)((n|r|.)*?)(?:</script>)';
  32.    var js_ScriptSrcFragment = '<script.+(src[ ]*=[ ]*'(.*?)'|src[ ]*=[ ]*"(.*?)").+';
  33.  
  34. var matchAll = new RegExp(js_ScriptFragment, 'img');
  35.   var matchOne = new RegExp(js_ScriptFragment, 'im');
  36.   var matchSrc = new RegExp(js_ScriptSrcFragment, 'im');
  37.  
  38.   var arr = s.match(matchAll) || [];
  39.   var JSCode = [];
  40.    
  41.    for (var i = 0; i < arr.length; i++)
  42.   {
  43.     var srcMt = arr[i].match(matchSrc);
  44.     if (srcMt)
  45.     {
  46.       if (srcMt.length > 3)
  47.          srcMt = srcMt[3];
  48.       else
  49.          srcMt = srcMt[2];
  50.       
  51.       if (srcMt != '')
  52.       {
  53.          var found = false;
  54.          for (var j = 0; j < sbEvalJSSrcs.length; j++)
  55.          {
  56.             if (sbEvalJSSrcs[j] == srcMt)
  57.             {
  58.                found = true;
  59.                break;
  60.             }
  61.          }
  62.          
  63.          if (found)
  64.             continue;
  65.             
  66.          sbEvalJSSrcs[sbEvalJSSrcs.length] = srcMt;
  67.          var res = sbLoadSync(srcMt);
  68.          if (res)
  69.             JSCode[JSCode.length] = res;
  70.       }
  71.     }
  72.  
  73.     var mtCode = arr[i].match(matchOne);
  74.     if (mtCode && mtCode[1] != '')
  75.       JSCode[JSCode.length] = mtCode[1];
  76.   }
  77.   
  78.   s = s.replace(matchAll, '');
  79.    
  80.   for(var i = 0; i < JSCode.length; i++)
  81.    sbExecScript(JSCode[i]);
  82.   
  83.   return s;
  84. }
  85.  
* This source code was highlighted with Source Code Highlighter.


Функция возвращает HTML-код без JavaScript, его и вставляем в нужное место страницы, чтобы избежать повторного выполнения скриптов под IE, например.

Если будете пользоваться нашей библиотекой, то Вам могут оказаться полезными следующие функции:
sbLoadSync(url) – синхронно подгружает содержимое указанного URL-а и возвращает его.

sbLoadAsync(url, pfunction) – асинхронно подгружает содержимое указанного URL-а и передает его как параметр в функцию pfunction.

sbSendForm(form) – синхронно отправляет данные формы POST-запросом и возвращает результат скрипта, прописанного в action формы.

sbSendFormAsync(form, pfunction) – асинхронно отправляет данные формы POST-запросом и передает результат скрипта, прописанного в action формы, как параметр в функцию pfunction.

Замечу, что у всех функций sbEvalJS вызывается сразу при получении ответа от сервера, а возвращаемый ими результат не содержит JavaScript. Если логику надо изменить, уберите везде return sbEvalJS(res);.

Библиотека тестировалась в IE 6, IE 7, FireFox 2, FireFox 3, Opera 9.5, Safari 3.0, Google Chrome 0.3.

Ну вот и все, для первого раза достаточно :).
 

Источник: http://dnovikov.habrahabr.ru/




Комментарии

besserdca
05-01-2012   
Как подключать данную библиотеку?

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / AJAX /

Asynchronous JavaScript and XML
06-12-2009   

Когда существующих возможностей становиться мало, а совершенствовать существующее уже некуда, тогда и происходит технологический прорыв. Таким прорывом и есть AJAX (Asynchronous JavaScript and XML) - подход к построению пользовательских интерфейсов веб-приложений, при котором web-страница, не перезагружаясь, сама догружает нужные пользователю данные. AJAX - один из компонентов концепции DHTML... подробнее

Кол. просмотров: общее - 3244 сегодня - 0

AJAX. Взаимодействие с жизненным циклом страницы
06-12-2009   

Итак, запись в таблице отредактирована, осталось её сохранить. Первое, что приходит на ум - это целиком AJAX решение, когда данные собираются из редактируемой строки DataGrid, отправляются на сервер, и в случае успеха клиентская PostBack функция перерисовывает строку таблицы уже только для просмотра... подробнее

Кол. просмотров: общее - 3251 сегодня - 1

xAJAX: Легкий AJAX в массы
03-12-2009   

Не так давно я говорил, что буду предоставлять информацию относительно PHP и Ajax. На конференции которую я провел на прошлой неделе 10 ноября 2005г. Я также обещал людям что переведу все что я приготовил для публикации на моем блоге (автор так и не перевел все это дело на Голландский, тем самым очень мне облегчил перевод )... подробнее

Кол. просмотров: общее - 3396 сегодня - 0

«Hello, закладки!» - Добавить в закладки на AJAX
03-12-2009   

Давайте обсудим более рациональные и эффективные функции для нашего любимого сайта. Начнем с самой простой вещи - кнопки Добавить в закладки. По моему, это самое наболевшее место, которое так и просится чтобы его Ajax’стили... подробнее

Кол. просмотров: общее - 238188 сегодня - 0

Simple AJAX Code-Kit (SACK) и движок DataLife
03-12-2009   

Рыская в интернете в поисках Ajax-готового новостного движка, я наткнулся на давно всем известный . Хотя этот довольно продвинутый php ресурс и содержит элементы Ajax, они по-моему не до конца раскрыты и используются довольно скупо... подробнее

Кол. просмотров: общее - 3478 сегодня - 0



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects