首先感谢这个社区。我慢慢开始理解这些东西，我很感激所有的反馈。话虽如此，我提出了另一个问题。
情况：我正在尝试建立一个新网站，并尝试将其作为一种学习体验，使用一些php并自学javascript（注意，我现在想坚持使用js，在更好地处理js之前不要跳到jquery）。我创建了一个库，它的顶部会有一系列缩略图，当点击时，它会在下面的div中填充艺术品、标题和描述。
设置：因为我想用名称而不是数字（比如数组）来调用这些组件，这样它们就可以互换，所以我将每个组件构建为包含所有组件的id的div，然后通过脚本将其调用到目标位置：
function changeDiv(id) {
var target = document.getElementById('generic');
var id = document.getElementById(id);
target.innerHTML = id.innerHTML;
}
在身体里，它看起来像：
<img src="images/thumbs/digital-art/thumb-space-oddity.jpg" id="thumb-space-odity" onclick="callDiv('space-oddity')"/>
...
<div class="gallery-frame" id="generic"></div>
目前这是可行的，但由于我必须有一个地方来调用所有的div，我在页脚中添加了一个php include，所以它最后加载，但包含我可能需要的所有图像：
<div style="display:none;">
<?php include("gallery.php"); ?>
</div>
但据我所知，因为这仍然意味着页面将加载所有内容，这将真正减慢页面的速度。所以我需要一个新的解决方案。
我的挑战：首先，有没有一种方法可以专门在javascript中实现这一点？如果是的话，我很乐意这么做！
假设我做不到，我已经开始研究AJAX，看看它是如何工作的，虽然它开始具有名义意义（对javascript来说仍然是新的，所以我只了解了一半），在w3schools.com和stackoverflow主题之间，我想我对我需要做什么有了大致的想法，但它仍然不起作用。
问题是：基于上面的stackoverflow评论，我试图在自己的实例中重新创建示例函数，并将其设置为：
<script type="text/javascript">
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();
}
catch (e)
{ alert('XMLHttpRequest not working'); }
try {
return new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{ alert('Msxml2.XMLHTT not working'); }
try {
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{ alert('Microsoft.XMLHTTP not working'); }
alert("XMLHttpRequest not supported");
return null;
}
function callDiv(id) {
var xmlHttpReq = createXMLHttpRequest();
var url = "gallery.asp?ID=" + id;
xmlHttpReq.open("GET", url, true);
xmlHttpReq.send();
}
</script>
根据我所读到的内容，我保留了第一部分，因为它设置了函数（删除了null和提示，因为我不需要它们），并试图让callDiv函数像我使用的上一个脚本一样运行。我还将gallery.php页面保存为.asp页面，但我应该将其保留为php吗？
一定是.ashx吗？
由于我不知道调用它的文件，我不知道是什么？原始示例中使用的REASON是指。我试过了？身份证以为我在告诉它找身份证。这是错的，还是没有必要？
谢谢！
-Chris
好的，很好（确实很勇敢）想在纯JS中做到这一点。老实说，这是一种古怪但有趣的语言。实现目标的最简单方法是使用ajax调用，尽管这不是必须的
查看您的代码，您的调用可能会正常工作，但您忽略了其中最重要的部分：onreadystatechange事件的回调
当脚本向服务器发送请求时，会检查该请求的状态。一旦服务器完成了对发送的请求的处理并且完成了响应，readyState应该是4。（更多信息可以在这里找到）
基本上，尝试将其添加到您的ajax对象中：
function callDiv(id)
{
var xmlHttpReq = createXMLHttpRequest();
xmlHttpReq.onreadystatechange = function()
{
if (this.readyState === 4 && this.status === 200)
{
//this === xmlHttpReq, "this" can be tricky, it refers to the calling obj.
console.log(this.responseText);//check your console, see what that tells you
}
};
var url = "gallery.asp?ID=" + id;
xmlHttpReq.open("GET", url, true);
xmlHttpReq.send();
}
就我个人而言，鉴于你是JS的新手，我也建议你以一种常规的方式预加载你的图像：
var nextImg = document.createElement('img');
nextImg.src = 'images/nextImage.jpg';
nextImg.onload = function()
{
//targetId
document.getElementById('wherever').appendChild(this);//this === nextImg
};
最后一个场景创建了一个新的DOM元素img，设置了源，以便加载图像，当加载完成时，有一个事件处理程序将新图像附加到您选择的任何容器元素（也可能是document.body元素）
这里的优点是您不必与AJAX作斗争。它的异步性质可能很棘手。在小规模上，这也很容易实现和调试。缺点是：维护起来简直是噩梦，而且会将所有功能转移到客户端。还有一些问题，但我有点生气和疲惫。点击此处阅读更多信息。如果必须的话，我明天再看一次。
哦，是的：欢迎来到SO BTW.
好的，请参阅下面的代码，在callDiv内执行请求，结果进入.foo元素：
function callDiv(id) {
var request; // Store AJAX request
// Here you verify browsers support, to create new Ajax request
try { // Opera, Firefox and Safari support
request = new XMLHttpRequest();
} catch (e) { // IE support
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Hide error, something goes wrong
}
}
}
// Show result inside .foo div
request.onreadystatechange = function() {
if(request.readyState == 4) { // Success
var element = document.getElementByClass('foo');
element.innerHTML = request.responseText;
}
}
// Here you send the request
request.open("GET", "gallery.php?id=" + id, true);
request.send(null);
}
<div class='foo'><!-- HERE WILL SHOW THE AJAX RESULT --></div>