zoukankan      html  css  js  c++  java
  • 本地测试AJAX请求

    要在本地测试AJAX,首先是环境的搭建,因为XHR对象的open方法中参数url是指文件在服务器上的文件。下面以WampServer为例。

    1. 下载wamp的安装包,下载地址为:http://221.181.72.84/softdl.360tpcdn.com/WampServer/WampServer_2.5.exe

    2.安装wamp。按照步骤安装即可。

    3.安装完wamp后,双击桌面上wamp的快捷方式启动wamp。

    如果wamp正常启动后,任务栏右下角有绿色的图标:

    接下来以W3C的几个完整的测试代码为例。

    测试实例1:

    ajax.html代码为:

    <html>
    <head>
    <script type="text/javascript">
    function showHint(str)//当用户在输入框中键入字符时,会执行函数“showHint()”,该函数由“onkeyup”事件触发;
    {
    var xmlhttp;
    if (str.length==0)
      { 
      document.getElementById("txtHint").innerHTML="";
      return;
      }//如果输入框为空(str.length==0),则该函数清空txtHint占位符的内容,并退出函数;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.open("GET","http://localhost/my/php/gethint.php?q="+str,true);
    xmlhttp.send();
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
      }
    
    }//如果输入框不为空,showHint()函数执行以下任务:1.创建XHR对象 2.把请求发送到服务器上的文件 3.当服务器响应就绪时执行函数 4.注意我们向url添加了一个函数q(带有输入框的内容);
    </script>
    </head>
    <body>
    
    <h3>请在下面的输入框中键入字母(A - Z):</h3>
    <form action=""> 
    姓氏:<input type="text" id="txt1" onkeyup="showHint(this.value)" />
    </form>
    <p>建议:<span id="txtHint"></span></p> 
    
    </body>
    </html>
    

    gethint.php代码为:

    <?php
    // 用名字来填充数组
    $a[]="Anna";
    $a[]="Brittany";
    $a[]="Cinderella";
    $a[]="Diana";
    $a[]="Eva";
    $a[]="Fiona";
    $a[]="Gunda";
    $a[]="Hege";
    $a[]="Inga";
    $a[]="Johanna";
    $a[]="Kitty";
    $a[]="Linda";
    $a[]="Nina";
    $a[]="Ophelia";
    $a[]="Petunia";
    $a[]="Amanda";
    $a[]="Raquel";
    $a[]="Cindy";
    $a[]="Doris";
    $a[]="Eve";
    $a[]="Evita";
    $a[]="Sunniva";
    $a[]="Tove";
    $a[]="Unni";
    $a[]="Violet";
    $a[]="Liza";
    $a[]="Elizabeth";
    $a[]="Ellen";
    $a[]="Wenche";
    $a[]="Vicky";
    
    //获得来自 URL 的 q 参数
    $q=$_GET["q"];
    
    //如果 q 大于 0,则查找数组中的所有提示
    if (strlen($q) > 0)
      {
      $hint="";
      for($i=0; $i<count($a); $i++)
        {
        if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
          {
          if ($hint=="")
            {
            $hint=$a[$i];
            }
          else
            {
            $hint=$hint." , ".$a[$i];
            }
          }
        }
      }
    
    // 如果未找到提示,则把输出设置为 "no suggestion"
    // 否则设置为正确的值
    if ($hint == "")
      {
      $response="no suggestion";
      }
    else
      {
      $response=$hint;
      }
    
    //输出响应
    echo $response;
    ?>
    

    最后把HTML文件和php文件保存在wamp安装目录下www文件夹下相同的目录下(我的是php文件夹):

     然后通过本地服务器打开html文件(比如我的是http://localhost/my/php/ajax.html):

    测试实例2:

    xml.html代码:

    <html>
    <head>
    <script type="text/javascript">
    function loadXMLDoc(url)
    {
    var xmlhttp;
    var txt,x,xx,i;
    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)
        {
        txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
        x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
        for (i=0;i<x.length;i++)
          {
          txt=txt + "<tr>";
          xx=x[i].getElementsByTagName("TITLE");
            {
            try
              {
              txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
              }
            catch (er)
              {
              txt=txt + "<td> </td>";
              }
            }
          xx=x[i].getElementsByTagName("ARTIST");
            {
            try
              {
              txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
              }
            catch (er)
              {
              txt=txt + "<td> </td>";
              }
            }
          txt=txt + "</tr>";
          }
        txt=txt + "</table>";
        document.getElementById('txtCDInfo').innerHTML=txt;
        }
      }
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
    }
    </script>
    </head>
    <body>
    
    <div id="txtCDInfo">
    <button onclick="loadXMLDoc('http://localhost/my/php/cd_catalog.xml')">获得 CD 信息</button>
    </div>
    
    </body>
    </html>
    

     cd_catalog.xml代码为:

    <CATALOG>
    <CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
    </CD>
    <CD>
    <TITLE>Hide your heart</TITLE>
    <ARTIST>Bonnie Tyler</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>CBS Records</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1988</YEAR>
    </CD>
    <CD>
    <TITLE>Greatest Hits</TITLE>
    <ARTIST>Dolly Parton</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>RCA</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1982</YEAR>
    </CD>
    <CD>
    <TITLE>Still got the blues</TITLE>
    <ARTIST>Gary Moore</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>Virgin records</COMPANY>
    <PRICE>10.20</PRICE>
    <YEAR>1990</YEAR>
    </CD>
    <CD>
    <TITLE>Eros</TITLE>
    <ARTIST>Eros Ramazzotti</ARTIST>
    <COUNTRY>EU</COUNTRY>
    <COMPANY>BMG</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1997</YEAR>
    </CD>
    <CD>
    <TITLE>One night only</TITLE>
    <ARTIST>Bee Gees</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>Polydor</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1998</YEAR>
    </CD>
    <CD>
    <TITLE>Sylvias Mother</TITLE>
    <ARTIST>Dr.Hook</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>CBS</COMPANY>
    <PRICE>8.10</PRICE>
    <YEAR>1973</YEAR>
    </CD>
    <CD>
    <TITLE>Maggie May</TITLE>
    <ARTIST>Rod Stewart</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>Pickwick</COMPANY>
    <PRICE>8.50</PRICE>
    <YEAR>1990</YEAR>
    </CD>
    <CD>
    <TITLE>Romanza</TITLE>
    <ARTIST>Andrea Bocelli</ARTIST>
    <COUNTRY>EU</COUNTRY>
    <COMPANY>Polydor</COMPANY>
    <PRICE>10.80</PRICE>
    <YEAR>1996</YEAR>
    </CD>
    <CD>
    <TITLE>When a man loves a woman</TITLE>
    <ARTIST>Percy Sledge</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Atlantic</COMPANY>
    <PRICE>8.70</PRICE>
    <YEAR>1987</YEAR>
    </CD>
    <CD>
    <TITLE>Black angel</TITLE>
    <ARTIST>Savage Rose</ARTIST>
    <COUNTRY>EU</COUNTRY>
    <COMPANY>Mega</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1995</YEAR>
    </CD>
    <CD>
    <TITLE>1999 Grammy Nominees</TITLE>
    <ARTIST>Many</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Grammy</COMPANY>
    <PRICE>10.20</PRICE>
    <YEAR>1999</YEAR>
    </CD>
    <CD>
    <TITLE>For the good times</TITLE>
    <ARTIST>Kenny Rogers</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>Mucik Master</COMPANY>
    <PRICE>8.70</PRICE>
    <YEAR>1995</YEAR>
    </CD>
    <CD>
    <TITLE>Big Willie style</TITLE>
    <ARTIST>Will Smith</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1997</YEAR>
    </CD>
    <CD>
    <TITLE>Tupelo Honey</TITLE>
    <ARTIST>Van Morrison</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>Polydor</COMPANY>
    <PRICE>8.20</PRICE>
    <YEAR>1971</YEAR>
    </CD>
    <CD>
    <TITLE>The very best of</TITLE>
    <ARTIST>Cat Stevens</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>Island</COMPANY>
    <PRICE>8.90</PRICE>
    <YEAR>1990</YEAR>
    </CD>
    <CD>
    <TITLE>Stop</TITLE>
    <ARTIST>Sam Brown</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>A and M</COMPANY>
    <PRICE>8.90</PRICE>
    <YEAR>1988</YEAR>
    </CD>
    <CD>
    <TITLE>Bridge of Spies</TITLE>
    <ARTIST>T'Pau</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>Siren</COMPANY>
    <PRICE>7.90</PRICE>
    <YEAR>1987</YEAR>
    </CD>
    <CD>
    <TITLE>Private Dancer</TITLE>
    <ARTIST>Tina Turner</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>Capitol</COMPANY>
    <PRICE>8.90</PRICE>
    <YEAR>1983</YEAR>
    </CD>
    <CD>
    <TITLE>Midt om natten</TITLE>
    <ARTIST>Kim Larsen</ARTIST>
    <COUNTRY>EU</COUNTRY>
    <COMPANY>Medley</COMPANY>
    <PRICE>7.80</PRICE>
    <YEAR>1983</YEAR>
    </CD>
    <CD>
    <TITLE>Pavarotti Gala Concert</TITLE>
    <ARTIST>Luciano Pavarotti</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>DECCA</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1991</YEAR>
    </CD>
    <CD>
    <TITLE>The dock of the bay</TITLE>
    <ARTIST>Otis Redding</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Atlantic</COMPANY>
    <PRICE>7.90</PRICE>
    <YEAR>1987</YEAR>
    </CD>
    <CD>
    <TITLE>Picture book</TITLE>
    <ARTIST>Simply Red</ARTIST>
    <COUNTRY>EU</COUNTRY>
    <COMPANY>Elektra</COMPANY>
    <PRICE>7.20</PRICE>
    <YEAR>1985</YEAR>
    </CD>
    <CD>
    <TITLE>Red</TITLE>
    <ARTIST>The Communards</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>London</COMPANY>
    <PRICE>7.80</PRICE>
    <YEAR>1987</YEAR>
    </CD>
    <CD>
    <TITLE>Unchain my heart</TITLE>
    <ARTIST>Joe Cocker</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>EMI</COMPANY>
    <PRICE>8.20</PRICE>
    <YEAR>1987</YEAR>
    </CD>
    </CATALOG>
    

     运行结果:

    以上。

  • 相关阅读:
    分布式唯一ID:雪花ID Snowflake .Net版
    jTopo HTML5 Canvas 画图组件
    运用四色建模法进行领域分析
    .netcore 分布式事务CAP2.6之控制台使用
    .netcore 分布式事务CAP2.6 快速入门
    .NetCore从零开始使用Skywalking分布式链路追踪系统
    Docker安装Skywalking APM分布式追踪系统
    ubuntu18.04安装docker
    github超级小白入门攻略
    记录AJAX充电点点滴滴
  • 原文地址:https://www.cnblogs.com/tinmh/p/6163464.html
Copyright © 2011-2022 走看看