我有一个index.php文件,可通过此javascript / ajax代码加载其他php文件:
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”中,但是现在如果我在“ contentpage.php”上有任何JavaScript,它将无法运行,有什么办法吗?
我已经看过了:http : //www.javascriptkit.com/script/script2/ajaxpagefetcher.shtml, 但它并不是我要找的东西。
我希望能够更新页面的一部分而无需重新加载整个页面,并且必须运行javascript
如果要按需加载Javascript。这可以通过动态创建脚本标签来完成。Stoyan Stefanov书-Javascript Patterns中说明了这种模式
这是从书中摘录的:
编写一个require函数。然后这样称呼它:
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:针对您的情况的更多详细信息。我将尝试使事情变得简单:
创建fours文件:
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); } }