阿西河

所有教程

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

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    AJAX 数据库

    AJAX Database 实例

    AJAX 可用来与数据库进行动态通信。

    AJAX 数据库实例

    下面的例子将演示网页如何通过 AJAX 从数据库读取信息: 请在下面的下拉列表中选择一个客户:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script>
    function showCustomer(str)
    {
      var xmlhttp;    
      if (str=="")
      {
        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","/getcustomer.php?q="+str,true);
      xmlhttp.send();
    }
    </script>
    </head>
    <body>
    
    <form action=""> 
    <select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
    <option value="APPLE">Apple Computer, Inc.</option>
    <option value="BAIDU ">BAIDU, Inc</option>
    <option value="Canon">Canon USA, Inc.</option>
    <option value="Google">Google, Inc.</option>
    <option value="Nokia">Nokia Corporation</option>
    <option value="SONY">Sony Corporation of America</option>
    </select>
    </form>
    <br>
      <div id="txtHint">客户信息将显示在这...</div>
    </body>
    </html>
    

    实例解释 - showCustomer() 函数

    当用户在上面的下拉列表中选择某个客户时,会执行名为 “showCustomer()” 的函数。该函数由 “onchange” 事件触发:

    function showCustomer(str) {
      var xmlhttp;    
      if (str=="")
      {
        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","/try/ajax/getcustomer.php?q="+str,true);
      xmlhttp.send();
    }
    

    showCustomer() 函数执行以下任务:

    • 检查是否已选择某个客户
    • 创建 XMLHttpRequest 对象
    • 当服务器响应就绪时执行所创建的函数
    • 把请求发送到服务器上的文件
    • 请注意我们向 URL 添加了一个参数 q (带有输入域中的内容)

    AJAX 服务器页面

    由上面的 JavaScript 调用的服务器页面是 PHP 文件,名为 “getcustomer.php”。

    用 PHP 编写服务器文件也很容易,或者用其他服务器语言。

    “getcustomer.php” 中的源代码负责对数据库进行查询,然后用 HTML 表格返回结果:

    <%
    response.expires=-1
    sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
    sql=sql & "'" & request.querystring("q") & "'"
    
    set conn=Server.CreateObject("ADODB.Connection")
    conn.Provider="Microsoft.Jet.OLEDB.4.0"
    conn.Open(Server.Mappath("/db/northwind.mdb"))
    set rs=Server.CreateObject("ADODB.recordset")
    rs.Open sql,conn
    
    response.write("")
    do until rs.EOF
      for each x in rs.Fields
        response.write("")
        response.write("")
      next
      rs.MoveNext
    loop
    response.write("" & x.name & "" & x.value & "")
    %>
    
    
    卖前端学习教程

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

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

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

    目录
    目录