none
xmlhttpRequest IE正常,Firefox显示不正常 RRS feed

  • 问题

  • <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>基于AJAX技术实现页面局部更新</title>
        <script type="text/javascript">
        var xmlhttp= false;
        function createHTTP()
        {
            // Create XMLHttpRequest object
            try
            {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e)
            {
                try
                {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e2)
                {
                    xmlhttp = false;
                }
            }

            if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
                xmlhttp = new XMLHttpRequest();
            }

        }
        function getData()
        {
            var sAnimal=document.getElementById("txt").value;
           createHTTP(); 
           xmlhttp.onreadystatechange=statechange;
           xmlhttp.open('GET',"datapage.aspx?sAnimal=" +sAnimal,true);
           xmlhttp.send(null);
    //        var sAnimal=document.getElementById("txt").value;
    //        createHTTP();
    //        xmlhttp.onreadystatechange=statechange;
    //        xmlhttp.open("POST","datapage.aspx?sAnimal=" +sAnimal,true);
    //        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    //        xmlhttp.setRequestHeader("Content-Length",0);
    //        xmlhttp.setRequestHeader("Connection","close");
    //        xmlhttp.send(null);
    //       if(xmlhttp.status==200)
    //        {
    //           FillData(xmlhttp.responseText);
    //        }
        }
        function statechange()
        {
          if(xmlhttp.readystate==4)
          {
            if(xmlhttp.status==200)
            {
               FillData(xmlhttp.responseText);
            }
          }
        }
        function FillData(sAnimal)
        {
          document.getElementById("DropDownList1").options.length=0;
           var index;
           var ani;
           //cut the passed string into pieces
           while(sAnimal.length>0)
           {
            //whether the last string
            index=sAnimal.indexOf(",");
            if(index >0)
            {
                ani=sAnimal.substring(0,index);
                sAnimal=sAnimal.substring(index+1);
                document.getElementById("DropDownList1").add(new Option(ani,ani));
            }
            else
            {
                lastAnimal=sAnimal.substring(0,2);
                document.getElementById("DropDownList1").add(new Option(lastAnimal,lastAnimal));
                break;
            }
           };
        }
        </script>
    </head>
    <body>
        <form id="form1" runat="server" method="post">
        <div>
            <table style="width: 469px; height: 150px" border="5" bordercolor="#ff9900">
                <tr>
                    <td colspan="2" style="font-weight: bold; color: #000099; text-align: center; font-size: 24px; height: 63px;">
                        基于AJAX技术实现页面局部更新</td>
                </tr>
                <tr>
                    <td style="width: 265px">
                        请输入你所喜欢的动物的种类(cat,dog,cow,parrot):</td>
                    <td>
                        <input type="text"  id="txt" style="width: 245px; height: 20px;"/>
                        </td>
                </tr>
                <tr>
                    <td style="width: 265px; height: 39px;">
                    </td>
                    <td style="height: 39px; text-align: center">
                        <input id="btnSearch" style="width: 104px; height: 32px;" type="button" value="开始搜索..." onclick="getData()" /></td>
                </tr>
                <tr>
                    <td style="width: 265px; height: 42px;">
                        请选择你所喜欢的动物:</td>
                    <td style="height: 42px">
                        <asp:DropDownList ID="DropDownList1" runat="server" Width="255px">
                        </asp:DropDownList></td>
                </tr>
            </table>
        </div>
        </form>
    </body>
    </html>

    datapage.aspx.cs    Page_Load中代码如下:

            string sAnimal = Request.QueryString["sAnimal"];
            Response.Clear();
            //According to the passed animal category users input to return the related animals
            switch (sAnimal.ToLower())
            {
                case "cat":
                    Response.Write( "Felix,John,Mary,Rossy");
                    break;
                case "dog":
                    Response.Write("Fido,Rover,Kissy");
                    break;
                case "cow":
                    Response.Write("Daisy,Mighty,Hassy,Hover");
                    break;
                case "parrot":
                    Response.Write("Polly,Curo,Paul,Pazz");
                    break;
            }
     
    请高手帮我调试一下,IE下是正常的Firefox却不正常不知道为什么
    function getData()
        {
    //        var sAnimal=document.getElementById("txt").value;
    //       createHTTP(); 
    //       xmlhttp.onreadystatechange=statechange;
    //       xmlhttp.open('GET',"datapage.aspx?sAnimal=" +sAnimal,true);
    //       xmlhttp.send(null);
            var sAnimal=document.getElementById("txt").value;
            createHTTP();
            xmlhttp.onreadystatechange=statechange;
            xmlhttp.open("POST","datapage.aspx?sAnimal=" +sAnimal,true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.setRequestHeader("Content-Length",0);
            xmlhttp.setRequestHeader("Connection","close");
            xmlhttp.send(null);
           if(xmlhttp.status==200)
            {
               FillData(xmlhttp.responseText);
           }
        }

    如果改成这个样子的话,xmlhttp.responseText是我想得到的内容,但下拉列表却没有数据,是不是FillData()这个函数有问题?
    2009年2月24日 1:39

答案

  • if(xmlhttp.status==200)
    {
     if(xmlhttp.readyState == 4)
     {
     FillData(xmlhttp.responseText);
    }
    }


    js严格区分大小写的

    另外,cs里面在输出前后加

    Response.Clear();

    ...

    Response.End()

    孟宪会
    • 已标记为答案 edula 2009年2月24日 3:25
    2009年2月24日 2:27
    版主
  • 楼主你好!建议用服务器端用 webservice 去做!
    • 已标记为答案 edula 2009年2月24日 3:25
    2009年2月24日 2:59
    版主
  • document.getElementById('<%=DropDownList1.ClientID%>').options[document.getElementById('<%=DropDownList1.ClientID%>').options.length] = new Option(ani,ani);
    孟宪会
    • 已标记为答案 edula 2009年2月24日 3:25
    2009年2月24日 3:19
    版主
  • 另外,你的FillData里面写的比较罗嗦,


    function FillData(sAnimal)
    {
      arr = sAnimal.split(",")
      var d = document.getElementById('<%=DropDownList1.ClientID%>')
       d.options.length=0;
    for(i = 0;i<arr.length;i++)
    {
     d.options[d.options.length] = new Option(arr[i],arr[i]);
    }
    }
    就可以了吧

    孟宪会
    • 已标记为答案 edula 2009年2月24日 3:26
    2009年2月24日 3:22
    版主

全部回复

  • if(xmlhttp.status==200)
    {
     if(xmlhttp.readyState == 4)
     {
     FillData(xmlhttp.responseText);
    }
    }


    js严格区分大小写的

    另外,cs里面在输出前后加

    Response.Clear();

    ...

    Response.End()

    孟宪会
    • 已标记为答案 edula 2009年2月24日 3:25
    2009年2月24日 2:27
    版主
  • 楼主你好!建议用服务器端用 webservice 去做!
    • 已标记为答案 edula 2009年2月24日 3:25
    2009年2月24日 2:59
    版主
  • 以前没有搞过ASP
    现在想学下ASP的
    孟老师您好,我刚才试啦你的方法改啦一下,接收的值是有的,
    但document.getElementById("DropDownList1").add(new Option(ani,ani)); 这句是不是有问题
    2009年2月24日 3:03
  • Daniel Chow 说:

    楼主你好!建议用服务器端用 webservice 去做!


    Daniel chow您好
    能不能给个例子给我,谢谢啦
    2009年2月24日 3:05
  • 孟宪会 说:

    if(xmlhttp.status==200)
    {
     if(xmlhttp.readyState == 4)
     {
     FillData(xmlhttp.responseText);
    }
    }


    孟宪会

    孟老师 这样改firebug 提示三个错误


    2009年2月24日 3:10
  • document.getElementById('<%=DropDownList1.ClientID%>').options[document.getElementById('<%=DropDownList1.ClientID%>').options.length] = new Option(ani,ani);
    孟宪会
    • 已标记为答案 edula 2009年2月24日 3:25
    2009年2月24日 3:19
    版主
  • 另外,你的FillData里面写的比较罗嗦,


    function FillData(sAnimal)
    {
      arr = sAnimal.split(",")
      var d = document.getElementById('<%=DropDownList1.ClientID%>')
       d.options.length=0;
    for(i = 0;i<arr.length;i++)
    {
     d.options[d.options.length] = new Option(arr[i],arr[i]);
    }
    }
    就可以了吧

    孟宪会
    • 已标记为答案 edula 2009年2月24日 3:26
    2009年2月24日 3:22
    版主
  • 孟宪会 说:

    另外,你的FillData里面写的比较罗嗦,


    function FillData(sAnimal)
    {
      arr = sAnimal.split(",")
      var d = document.getElementById('<%=DropDownList1.ClientID%>')
       d.options.length=0;
    for(i = 0;i<arr.length;i++)
    {
     d.options[d.options.length] = new Option(arr[i],arr[i]);
    }
    }
    就可以了吧


    孟宪会


    谢谢孟老师啦
    2009年2月24日 3:28