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

Question

首先，感谢这个社区。我正在慢慢地开始理解这个东西，我很欣赏所有的反馈。这就是说，我带来另一个问题。

现状： 我试图建立一个新的网站，我试图使用它作为一个学习经验使用一些PHP和教自己的JavaScript（注意，我想要坚持与JS现在并没有跳转到jquery，直到我更好地处理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 include，因此它加载了l AST但包含了所有我可能需要的图像：

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

...但是从我的理解，因为这仍然意味着该网页将加载所有将真正减慢页面的内容。所以我需要一个新的解决方案。

我的挑战： 首先，有没有一种方法可以在JavaScript中完成此操作？如果是这样，我很乐意这样做！

假设我不能，我已经开始研究AJAX，看看它是如何工作的，虽然它开始具有名义上的意义（对javascript仍然是新的，所以我只获得其中的一半），并且在w3schools.com和我认为的stackoverflow topic之间我对我需要做什么有一个总体的了解，但仍然无法实现。

问题： 基于上面的计算器评论我试图重新创建示例函数在我自己的例子，我已经将它设置为以下：

<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函数与我之前使用的脚本运行相同。我也保存了作为.asp页面的gallery.php页面，但我应该把它留在PHP？

它是否必须是.ashx？

而且由于我不知道它被调用的文件，我不知道原始示例中使用的'REASON'是什么意思。我试过了？身份证思考我正在告诉它寻找一个身份证。那是错的，还是不必要的？

谢谢！

-Chris

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，源被设置，以便图像被加载，当加载完成时，有一个事件处理程序将新图像附加到任何容器元素（可能是文档.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>