2013-04-10 175 views
0

以下是我的Ajax代码,它需要3分15秒才能加载。可能是什么问题呢?Ajax代码加载非常缓慢

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <Script type="text/javascript"> 
    function im() 
    { 
    alert('iam in'); 
      var Name=document.getElementById("Name").value; 
      var pointsize=document.getElementById("pointsize").value; 
      var bckclr=document.getElementById("bckclr").value; 
      var color=document.getElementById("color").value; 
      var bcolor=document.getElementById("bcolor").value; 
    var url='Name='+Name+'&pointsize='+pointsize+'&bckclr='+bckclr+'&color='+color+'&bcolor='+bcolor; 
    alert("srihost.com/2.php?"+ url); 
    alert(url); 
    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("Div_Im").innerHTML=xmlhttp.responseText; 
     document.getElementById("Div_Im").style.border="2px solid #A5ACB2"; 
     } 

     } 
    xmlhttp.open("GET","2.php?"+ url,true); 
    xmlhttp.send(); 
    } 
    </script> 
    </head> 
    <body> 
    Enter Name: <input type="text" id="Name" onchange="im()" value="yourname" name="Name" /> 
    pointsize: <input type="text" id="pointsize" onchange="im()" 
    value="50" name="pointsize" /> 
    BackGround Color: <input type="text" id="bckclr" value="red" 
    onchange="im()" name="bckclr" /> 
    FontColor: <input type="text" id="color" value="white" 
    onchange="im()" name="color" /> 
    Border Color: <input type="text" id="bcolor" value="blue" 
    onchange="im()" name="bcolor" /> 
    <div id="Div_Im"> 
    replace me 
    </div> 
    </body> 
    </html> 

,这里是我的服务器网页代码

$Name=$_GET["Name"]; 
$pointsize=$_GET["pointsize"]; 
$bckclr=$_GET["bckclr"]; 
$color=$_GET["color"]; 
$bcolor=$_GET["bcolor"]; 
$filename = 'im.png'; 
$font='Times-Roman'; 

$cmd = " -background $bckclr -pointsize $pointsize -font $font -fill $color ". 
       " -strokewidth 1 -stroke $bcolor label:\"$Name\" "; 

    exec("convert $cmd $filename"); 
    echo('<img src="'.$filename.'">'); 

它基本上是难懂的代码,通过创建图像工作正常,但是当我使用Ajax它需要很长的时间来加载。

+2

一个提示。使用jQuery来进行AJAX调用,而不是手动创建XMLHttpRequest/ActiveXObject。它将使你的代码更加可读和简洁,并且它将使整个AJAX调用脚本成为一行代码。 – 2013-04-10 11:58:33

+0

让我试试并回复你 – Friend 2013-04-10 12:02:30

+1

**危险** - 您正在执行未转义的用户输入!这可以让任何可以向您的服务器发出HTTP请求的人执行任意命令! 'Name =“\'rm -rf *''! – Quentin 2013-04-10 12:06:14

回答

2

好吧有两个原因可以做到。首先你正在执行文本框更改的Ajax。它一次又一次地发送ajax请求。只有在点击某个按钮/链接/提交时才应该调用ajax,以便只发送一个ajax调用。另外在PHP方面,如果第一种情况也是如此,那么使用exec和convert函数可能会非常沉重。

1

我假设你自己试过同样的命令,而且速度更快。

因此,确保在命令行上进行测试时,始终使用Debian中相同的用户“su www-data”。

然后总是有一个日志用于调试,所以你可以确保参数都设置好了。

[编辑] 你在哪个平台上运行?什么版本的PHP?什么版本的图像magik?

您应该添加一些更多的细节,以便让人们帮助您!

2

在服务器端执行可能非常慢。运行像Firebug这样的浏览器调试器,可以让您观看网络请求。确认问题是HTTP请求发送到服务器和接收到响应之间的时间。