У меня есть файл index.php, который загружает другие php-файлы через этот код javascript / ajax:
function AJAX(elementID,url,showStatus){ var httpObject; if (window.ActiveXObject) { httpObject = new ActiveXObject("Microsoft.XMLHTTP"); } if (window.XMLHttpRequest){ httpObject = new XMLHttpRequest(); } else { alert("Your browser does not support AJAX."); } if (httpObject != null) { httpObject.onreadystatechange = function() { if (elementID != false){ if (httpObject.readyState == 4 && httpObject.status == 200) { document.getElementById(elementID).innerHTML= httpObject.responseText; } } } httpObject.open("POST",url,true); httpObject.send(null); } } поэтому, например, я бы загрузил файл inxex.php:
<script> AJAX("updateThisDiv", "/includes/contentpage.php", false) </script>
который вставляет содержимое «contentpage.php» в div «updateThisDiv», но теперь, если у меня есть javascript на «contentpage.php», он не будет работать, есть ли способ сделать это?
Я посмотрел на это: http://www.javascriptkit.com/script/script2/ajaxpagefetcher.shtml, но это не то, что я искал.
Я хочу иметь возможность обновлять раздел моей страницы без перезагрузки всей страницы, а javascript должен запускаться
Если вы хотите загрузить Javascript по требованию. Это можно сделать путем динамического создания тега скрипта. Этот рисунок иллюстрируется в книге Стояна Стефанова – Javascript Patterns
Это отрывалось из книги:
Напишите требуемую функцию. Затем назовите его так:
require("extra.js", function () { functionDefinedInExtraJS(); });
Функция запроса образца:
function require(file, callback) { var script = document.getElementsByTagName('script')[0], newjs = document.createElement('script'); // IE newjs.onreadystatechange = function () { if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') { callback(); } }; // others newjs.onload = function () { callback(); }; newjs.src = file; script.parentNode.insertBefore(newjs, script); }
Живой пример найден в http://www.jspatterns.com/book/8/ondemand.html
@Edit: более подробная информация о вашем случае. Я постараюсь сделать все просто:
Создание четырех файлов:
index.php
<html> <head> <script src="code.js"></script> </head> <body> <input type="button" onclick="Ajax('content.php', 'd_html');" value="Fill from content.php"/> <div id="d_html"></div> <br> <input type="button" onclick="Ajax('content.js', 'd_js');" value="Fill from content.js"/> <div id="d_js"></div> </body> </html>
content.php
<span>Hello, I am dynamic span came from content.php</span>
content.js
//Ana javascript code you want to run it by Ajax function should go inside this function function executeJS(element){ element.innerHTML = "<span>Hello, I am dynamic span came from content.js</span>"; }
code.js
//This function responsible for doing the ajax request for any file that will return pure HTML. function getHTML(url, element){ var i, xhr, activeXids = [ 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP' ]; if (typeof XMLHttpRequest === "function") { // native XHR xhr = new XMLHttpRequest(); } else { // IE before 7 for (i = 0; i < activeXids.length; i += 1) { try { xhr = new ActiveXObject(activeXids[i]); break; } catch (e) {} } } xhr.onreadystatechange = function () { if (xhr.readyState !== 4) { return false; } if (xhr.status !== 200) { alert("Error, status code: " + xhr.status); return false; } element.innerHTML += xhr.responseText; }; xhr.open("GET", url, true); xhr.send(""); } //This function will load javascript file on-demand and call executeJS function inside that file. function getJS(url, element, cb){ var newjs = document.createElement('script'); // IE newjs.onreadystatechange = function () { if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') { cb(); } }; // others newjs.onload = function () { cb(); }; newjs.src = url; element.appendChild(newjs); } //This is same as your function, but now can handle both PHP and JS files function Ajax(url, id){ var element = document.getElementById(id), regex = /\.js$/; if(!element){ alert("Invalid ID"); return false; } if(regex.test(url)){ //If url ends with JS, load using getJS getJS(url, element, function(){ executeJS(element); }); } else { getHTML(url, element); } }
Если вы динамически вставляете тег скрипта, код будет выполнен. НЕ ИСПОЛЬЗУЙТЕ ЭВОЛЮЦИЮ. Библиотеки знают это, они также не используют eval (если они не ужасны).
это работает на 100% ….. но я бы предпочел не использовать jquery
<!DOCTYPE html> <html dir=”ltr” lang=”en-US”> <head> <meta charset=”UTF-8” /> <title>AJAX Detection And Data Loading Using New School jQuery & HTML5:</title> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js” type=”text/javascript”></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function () { $("#mm").load("test.php"); }); }); </script> </head> <body> <button type=”button”>Load Some Copy!</button> <div id="mm"> </div> <section> </section> </body> </html>