阿西河

所有教程

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

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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;
    ?>
    
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录