阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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的教程都有!

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

      目录
      目录