Question

我正在尝试执行以下操作：当用户按下预览按钮时，使用AJAX显示语法突出显示的代码，但它无效。我究竟做错了什么？以下是三个代码： index.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript" src="preview.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title>Test Code Preview</title>
  </head>
  <body>
         <textarea id="pastecode" rows="20" cols="50" name="pastecode"></textarea>
         <br /><input type="text" id="language" name="language"/>
         <br /><input type="button" onclick="process()" value="Preview"/>
         <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
         <div id="previewcode"></div>
  </body>
</html>

preview.js：

var xmlHttp= createXmlHttpRequestObject();

function createXmlHttpRequestObject(){
   var xmlHttp;

   if(window.ActiveXObject){
      try{
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
         }catch(e){
            xmlHttp =false;
            }
      }else{
         try{
            xmlHttp= new XMLHttpRequest();
            }catch(e){
               xmlHttp =false;
               }
         }
      if(!xmlHttp)
            alert("cant create that object hoss!");
      else
            return xmlHttp;
   }

function process(){   
    if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
      code=encodeURIComponent(document.getElementById("pastecode").value);
      language=encodeURIComponent(document.getElementById("language").value);
      xmlHttp.open("POST", "preview.php", true);
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xmlHttp.onreadystatechange = handleServerResponse;
      xmlHttp.send("pastecode="+code+"&language="+language);
      }
   }


function handleServerResponse(){
   if(xmlHttp.readyState==4){
            if(xmlHttp.status==200){
               xmlResponse=xmlHttp.responseXML;
               xmlDocumentElement=xmlResponse.documentElement;
               code=xmlDocumentElement.firstChild.data;
               document.getElementById('previewcode').innerHTML=code;
         }
      }
   }

preview.php：

    <?php
header('Content-Type: text/xml');
 echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';

echo '<response>';
   $code=$_POST['pastecode'];
   $language=$_POST['language'];
   include("geshi/geshi.php");
     $path     = '';
     $geshi    = new GeSHi($code, $language, $path);
   $geshi->set_overall_style('background-color: #ffffee;', true);
   $out = $geshi->parse_code();
   echo htmlentities($out);
echo '</response>';
?>

发生了什么，我正在填写粘贴代码的文本框和语言的文本框，然后单击按钮但没有响应。我正在使用Firefox。

Answer 1

您应该使用像JQuery这样的库来处理Ajax请求。这样，您就不必担心不同浏览器和浏览器版本之间的差异。

preview.js的示例：

function process(){

    $.ajax({
      url: "preview.php",
      type: "post",
      data: {
          pastecode: $("pastecode").val(),
          language: $("language").val()
      },
      success: function(data){
           $("#previewcode").html(data);
           //Or handle data with jQuery.parseXML()
      },
      error:function(jqXHR, textStatus, errorThrown){
          alert("The following error occured: " + textStatus + " " + errorThrown);
      }   
    }); 

}

使用ajax无响应的代码预览

1 个答案: