Question

  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>Services</title>
  <link rel="shortcut icon" 
        type="image/x-icon" href="css/images/favicon.ico" />
  <script language="javascript">
  var XMLHTTPRequestObj=false;
  if(window.XMLHttpRequest)
  {
    XMLHttpRequestObj=new XMLHttpRequest();
  }
  else if(window.ActiveXObject)
  {
    XMLHttpRequestObj=new ActiveObject("Microsoft.XMLHTTP");
  }

  function getData(dataSource, divID)
  {
    if(XMLHttpRequestObj)
    {
      var obj=document.getElementById(divID);
      XMLHttpRequestObj.open("GET", dataSource);
      XMLHttpRequestObj.onreadystatechange = function() {
        if(XMLHttpRequestObj.readyState == 4 &&   
           XMLHttpRequestObj.status == 200) {

          alert("Inside the ready status "+dataSource);
          if(dataSource=="ajaximport/1.jpg") {
            alert("The if loop is working");  
            document.getElementById(
            "targetDiv").innerHTML = 
            XMLHttpRequestObj.responseText;
            var img = document.createElement('img');
            alert("Variable img Recorded "+img);
            img.onload = function (e){
              alert("Loading Image");
              document.getElementById(
              "imgHolder").width=this.width;
              document.getElementById(
              "imgHolder").height=this.height;
              document.getElementById(
              "imgHolder").src=this.src;
            }
            img.onerror = function(e){
              alert("Error processing Image.  Please try again."+e);
            }
            img.src = XMLHttpRequestObj.responseImage;
          }
          else
            obj.innerHTML=XMLHttpRequestObj.responseText;
        }
      }
      XMLHttpRequestObj.send(null);
    }
  }
  </script>
  <!--[if IE 6]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="all" />
  <![endif]-->
    </head>
    <body>
  <!-- Content -->
  <div id="content">
    <!-- Shell -->
    <div class="shell">
    <h2>We at Creative bits 5 are plegded to serve you our best in.......</h2>
      <table>
      <th>
      <div id="hold_left">
        <ul>
            <li><label>
            <a href="#" onmouseover="getData('ajaximport/1.jpg','targetDiv')">
            Graphic   Designing
            </a></label></li><br>
            <li><label>
            <a href="#" onmouseover="getData('text1.txt','targetDiv')">
            Web Devlopment
            </a></label></li><br>
            <li><label>
            <a href="#" onmouseover="getData('text1.txt','targetDiv')">
            Logo Designing
            </a></label></li><br>
            <li><label>
            <a href="#" onmouseover="getData('text1.txt','targetDiv')">
            3D Walk-Through
            </a></label></li><br>
            <li><label>
            <a href="#" onmouseover="getData('text1.txt','targetDiv')">
            3D Modelling
            </a></label></li><br>
            <li><label>
            <a href="#" onmouseover="getData('text1.txt','targetDiv')">
            2D Presentations
            </a></label></li><br>
      </ul>
    </div>
    </th>
    <th>
    <div id="targetDiv">
          This is target
      <img id="imgHolder" src="" alt="This is where image will load" />
      </div>
      </th>
      </table>
    </div>
    <!-- end Shell -->
  </div>
  <!-- end Content -->
    </body>
    </html>

您好我正在为我的网络项目使用ASP。但当我试图将图像加载到目标分区时，当鼠标悬停在描述该图像的文本上时，我遇到了问题。保留文本的部门位于左侧（描述加载图像）右侧是目标部门。

当我用它来加载.txt文件中的文本时，一切都很好但是当我尝试修改相同的代码以在同一个分区中加载图像而不是文本时，问题就开始了

我的代码如上

Answer 1

如果图像文件是存储在文件系统上的物理文件，那么XMLHttpRequest可能不是加载图像的好主意。

我建议您在javascript代码中创建图像并将src设置为图像路径。这将加载它，您的图像onload例程也可以运行。此外，您将获得浏览器缓存图像的好处。

使用XMLHttpRequest是有意义的，以防你的图像作为BLOB存储在某个地方而你需要一些机制来检索它。在这种情况下，请查看此链接。

Handling images from XMLHttpRequest (with HTML and Javascript)

希望这会有所帮助。

编辑1（回应评论）：您可以使用单独的方法通过JavaScript设置图像。这样可以通过单独的功能处理图像，同时可以处理通过XHR的动态数据分开。

<script language="javascript">
        var XMLHTTPRequestObj = false;
        if (window.XMLHttpRequest) {
            XMLHttpRequestObj = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            XMLHttpRequestObj = new ActiveObject("Microsoft.XMLHTTP");
        }

        function getData(dataSource, divID) {

            if (XMLHttpRequestObj) {
                var targetDIV = document.getElementById(divID);

                XMLHttpRequestObj.open("GET", dataSource);
                XMLHttpRequestObj.onreadystatechange = function () {
                    if (XMLHttpRequestObj.readyState == 4 &&
           XMLHttpRequestObj.status == 200) 
                    {

                        targetDIV.innerHTML = XMLHttpRequestObj.responseText;
                    }
                }
                XMLHttpRequestObj.send(null);
            }
        }
        function getImage(dataSource, divID) {
            //create image element
            var img = document.createElement('img');
            //assuming divID has the target div id
            img.onload = function (e) {
                alert("Loading Image");
                document.getElementById(
              divID).width = this.width;
                document.getElementById(
              divID).height = this.height;
            }
            img.onerror = function (e) {
                alert("Error processing Image.  Please try again." + e);
            }
            //set the path here
            img.src = dataSource;
            var targetDIV = document.getElementById(divID);
            //clear contents of target div
            if (targetDIV.hasChildNodes()) {
                while (targetDIV.childNodes.length >= 1) {
                    targetDIV.removeChild(targetDIV.firstChild);
                }
            }
            //finally add the image as a child control to the div.
            targetDIV.appendChild(img);
        }
    </script>

并通过onmouseover="getImage('Image/1.jpg','targetDiv')

调用此方法

请注意，这是纯粹的JavaScript代码。你总是可以使用像JQuery这样的JS库在很少的代码行中完成同样的工作。

在鼠标悬停文本上通过Ajax加载图像

1 个答案: