阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      AJAX ASP/PHP

      AJAX ASP/PHP 实例

      AJAX 用于创造动态性更强的应用程序。

      下面的例子将为您演示当用户在输入框中键入字符时,网页如何与 web 服务器进行通信: 请在下面的输入框中键入字母(A - Z)

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <script>
      function showHint(str)
      {
        var xmlhttp;
        if (str.length==0)
        { 
          document.getElementById("txtHint").innerHTML="";
          return;
        }
        if (window.XMLHttpRequest)
        {
          // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
          xmlhttp=new XMLHttpRequest();
        }
        else
        {
          // IE6, IE5 浏览器执行代码
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
          }
        }
        xmlhttp.open("GET","/gethint.asp?q="+str,true);
        xmlhttp.send();
      }
      </script>
      </head>
      <body>
      
      <h3>在输入框中尝试输入字母 a:</h3>
      <form action=""> 
      输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
      </form>
      <p>提示信息: <span id="txtHint"></span></p> 
      
      </body>
      </html>
      

      实例解析 - showHint() 函数

      当用户在上面的输入框中键入字符时,会执行函数 “showHint()” 。该函数由 “onkeyup” 事件触发:

      function showHint(str)
      {
          var xmlhttp;
          if (str.length==0)
          { 
              document.getElementById("txtHint").innerHTML="";
              return;
          }
          if (window.XMLHttpRequest)
          {
              // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
              xmlhttp=new XMLHttpRequest();
          }
          else
          {
              // IE6, IE5 浏览器执行代码
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange=function()
          {
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
              {
                  document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
              }
          }
          xmlhttp.open("GET","/gethint.asp?q="+str,true);
          xmlhttp.send();
      }
      

      源代码解析:

      如果输入框为空 str.length==0,则该函数清空 txtHint 占位符的内容,并退出函数。

      如果输入框不为空,showHint() 函数执行以下任务:

      • 创建 XMLHttpRequest 对象
      • 当服务器响应就绪时执行函数
      • 把请求发送到服务器上的文件
      • 请注意我们向 URL 添加了一个参数 q (带有输入框的内容)

      AJAX 服务器页面 - ASP 和 PHP

      由上面的 JavaScript 调用的服务器页面是 ASP 文件,名为 “gethint.asp”。

      下面,我们创建了两个版本的服务器文件,一个用 ASP 编写,另一个用 PHP 编写。

      ASP 文件

      “gethint.asp” 中的源代码会检查一个名字数组,然后向浏览器返回相应的名字:

      <%
      response.expires=-1
      dim a(30)
      'Fill up array with names
      a(1)="Anna"
      a(2)="Brittany"
      a(3)="Cinderella"
      a(4)="Diana"
      a(5)="Eva"
      a(6)="Fiona"
      a(7)="Gunda"
      a(8)="Hege"
      a(9)="Inga"
      a(10)="Johanna"
      a(11)="Kitty"
      a(12)="Linda"
      a(13)="Nina"
      a(14)="Ophelia"
      a(15)="Petunia"
      a(16)="Amanda"
      a(17)="Raquel"
      a(18)="Cindy"
      a(19)="Doris"
      a(20)="Eve"
      a(21)="Evita"
      a(22)="Sunniva"
      a(23)="Tove"
      a(24)="Unni"
      a(25)="Violet"
      a(26)="Liza"
      a(27)="Elizabeth"
      a(28)="Ellen"
      a(29)="Wenche"
      a(30)="Vicky"
      
      'get the q parameter from URL
      q=ucase(request.querystring("q"))
      
      'lookup all hints from array if length of q>0
      if len(q)>0 then
        hint=""
        for i=1 to 30
          if q=ucase(mid(a(i),1,len(q))) then
            if hint="" then
              hint=a(i)
            else
              hint=hint & " , " & a(i)
            end if
          end if
        next
      end if
      
      'Output "no suggestion" if no hint were found
      'or output the correct values
      if hint="" then
        response.write("no suggestion")
      else
        response.write(hint)
      end if
      %>
      
      

      PHP 文件

      下面的代码用 PHP 编写,与上面的 ASP 代码作用是一样的。

      <?php
      // Fill up array with names
      $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";
      
      //get the q parameter from URL
      $q=$_GET["q"];
      
      //lookup all hints from array if length of 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];
            }
          }
        }
      }
      
      // Set output to "no suggestion" if no hint were found
      // or to the correct values
      if ($hint == "")
      {
        $response="no suggestion";
      }
      else
      {
        $response=$hint;
      }
      
      //output the response
      echo $response;
      ?>
      
      目录
      目录