使用AJAX更改图像

Question

我想创建一个登录页面。 所以我把一个验证码图片中的登录表单与下面的HTML代码：

<img name="captcha" id="captcha" src="captcha/CaptchaSecurityImages.php?width=90&height=28&characters=5"/> 

，我把一个按钮，用户可以点击更改验证码，如果它是不可读如下：

<input type="button" name="new_Captcha_button" onClick="new_captcha()"/> 

我写了一个脚本遵循的工作只是在镀铬：

<script type="text/javascript"> 
function new_captcha() 
    { 
     document.images["captcha"].src = "captcha/CaptchaSecurityImages.php?width=90&height=28&characters=5"; 
    } 
</script> 

，但它并没有在其他浏览器工作，所以我用以下内容替换以前的代码：

<script type="text/javascript"> 
function new_captcha() 
    { 
     var xmlhttp; 
     if (window.XMLHttpRequest) 
      {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
      } 
     else 
      {// code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
     xmlhttp.onreadystatechange=function() 
      { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
       document.getElementById("captcha").src = xmlhttp.responseText; 
       } 
      } 
     xmlhttp.open("GET","captcha/CaptchaSecurityImages.php?width=90&height=28&characters=5",true); 
     xmlhttp.send(); 
    } 

所以，请告诉我什么样的变化，我需要在我的代码做，使之正确。我想我需要改变一下行：

document.getElementById("captcha").src = xmlhttp.responseText; 

非常感谢。

Answer 1

<script type="text/javascript"> 
function new_captcha() 
    { 
     document.getElementById('captcha').src = 'captcha/CaptchaSecurityImages.php?width=90&height=28&characters=5&_t=' + Math.random(1); 
    } 
</script> 

不需要使用ajax，函数new_captcha（）就可以。

Answer 2

你可以尝试这样做

的login.php

<div id="captcha_container"></div> 
<input type="button" id="btn_recaptcha" value="Recaptcha"> 

<script> 
function ajax_loadpage(loadUrl,output_container) 
    { 
     $.post 
     (
      loadUrl, 
      {language: "php", version: 5},function(responseText){$(output_container).html(responseText);},"html" 
     ); 
    } 

ajax_loadpage("captcha_page.php","#captcha_container"); 

$('#btn_recaptcha').click(function(){ 
    ajax_loadpage("captcha_page.php","#captcha_container"); 
}) 
</script> 
______________________________________________________________________________________ 
captcha_page.php 
<img width="212" height="53" src="captcha.php"> 

captcha.php包含我的图形验证码，它包含了一个header ("Content-type: image/gif");代码，所以我需要在那里我可以节省额外的PHP文件图像文件，从而使用我的captcha_page.php。 为我工作:)