如何使用javascript（和AJAX？）调用外部对象

Question

首先，感谢这个社区。我慢慢开始理解这些东西，我感谢所有的反馈。也就是说，我提出了另一个问题。

情况： 我正在尝试建立一个新站点，并且正在尝试将其用作学习经验来使用一些 php 并自学 javascript（注意，我现在想坚持使用 js，直到我得到更好地处理js）。我创建了一个画廊，顶部有一系列缩略图，点击后会在下面的 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 包含，因此它最后加载但包含我可能需要的所有图像：

<div style="display:none;">
<?php include("gallery.php"); ?>
</div>

...但据我了解，这仍然意味着页面将加载所有会真正减慢页面速度的内容。所以我需要一个新的解决方案。

我的挑战： 首先，有没有办法专门在javascript中做到这一点？如果是这样，我很乐意这样做！

假设我不能，我已经开始研究 AJAX 以了解它是如何工作的，虽然它开始具有名义意义（对于 javascript 来说仍然是新的，所以我只了解它的一半）以及 w3schools.com 和 stackoverflow topic 我之间我想我对我需要做什么有一个大致的了解，但它仍然无法正常工作。

问题： 根据上面的 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”是什么意思。我试过 ?ID 以为我在告诉它寻找一个 ID。这是错误的，还是不必要的？

谢谢！

-克里斯

Answer 1

好的，很高兴（而且确实很勇敢）想在纯 JS 中做到这一点。老实说，这是一种古怪但有趣的语言。实现目标的最简单方法是使用 ajax 调用，尽管这不是必需的。
查看您的代码，您的调用可能会正常工作，但您忽略了其中最重要的部分：onreadystatechange 事件的回调

当您的脚本向服务器发送请求时，会检查该请求的状态。一旦服务器完成处理发送的请求并完成响应，readyState 应该是 4。（可以找到更多信息 here）。
基本上，尝试将其添加到您的 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 搏斗。它的异步性质可能很棘手。在小规模上，这也很容易实现和调试。缺点：维护是一场噩梦，并将所有功能转移到客户端。还有几个问题，但我有点生气和疲倦。 read more here。如果需要，我明天再看看。

哦，是的：欢迎来到 SO BTW。

Answer 2

好的，看下面的代码，你在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>