Question

此代码有什么问题或可能导致此问题的原因？它没有警告“你好”，但它正在用Hello和Bye World表填充div。我希望它提醒“你好”。我也不知道jquery。谢谢

FILE1

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){
     var reScript = /\<script.*?>(.*)<\/script>/mg;
     response = xmlhttp.responseText.replace(reScript, function(m,m1) {
     eval(m1);
     return "";
     });
    document.getElementById("div").innerHTML=response;
    }
  }
xmlhttp.open('GET','file2.php',true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send();

FILE2

  <table><tr><td>Hello World</td></tr></table>
  <script type="text/javascript">
  alert('hello');
  </script>
  <table><tr><td>Bye World</td></tr></table>

Answer 1

~~尝试不使用eval()：~~

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){ /*var reScript = /\<script.*?>(.*)<\/script>/mg; response = xmlhttp.responseText.replace(reScript, function(m,m1) { eval(m1); return ""; });*/ document.getElementById("div").innerHTML=xmlhttp.responseText; } } xmlhttp.open('GET','file2.php',true); //xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //unnecessary for GET calls xmlhttp.send(null);

~~Eval您的代码在<script...></script>内是不必要的，javascript代码将在添加到DOM后立即执行。~~

新修改：

您必须消除reponseText中的换行符\n\r，才能使您的脚本正确eval。此外，在第一个\之前还有一个额外的<转义字符，它会破坏您的代码。尝试：

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){
     var reScript = /<script.*?>(.*)<\/script>/mg;
     response = xmlhttp.responseText.replace(/\n|\r/g, " ").replace(reScript, function(m,m1) {
     eval(m1);
     return "";
     });
    document.getElementById("div").innerHTML=response;
    }
  }
xmlhttp.open('GET','file2.php',true);
//xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send(null);

我添加了一个.replace(/\n|\r/g, " ")，用responseText中的空格替换所有换行符，这样可以正确评估您的JS，并且不会对最终用户造成任何明显的变化。如果你的所有JS都是正确的分号，你也可以用空字符串" "替换空格""。

以上内容适用于简单的脚本，现在如果你在页面的head中包含JQuery lib：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

您的AJAX调用将非常简单：

<script type="text/javascript">
$(document).ready(function(){
    $('#div').load('file2.php');
});
</script>

JQuery会自动解析来自responseText的脚本，如链接答案中所述。

Answer 2

尝试一下：

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    var reScript = /<script.*?\>(.*)<\/script\>/mg.exec(xmlhttp.responseText)[1];
    var scriptElement = document.createElement('script');
    scriptElement.innerHTML = reScript;
    document.body.appendChild(scriptElement);
  }
}

将代码放入脚本元素，然后将该元素附加到正文应该使其执行。

通过AJAX调试执行Javascript

2 个答案: