• <nav id="wkkge"><strong id="wkkge"></strong></nav>
  • <menu id="wkkge"></menu>
  • AJAX教程

    AJAX數據庫實例

     

     

    數據庫:數據庫可視為電子化的文件柜-存儲電子文件的處所,用戶可以對文件中的數據進行新增,截取,更新,刪除等操作。

     

    常見的型關系數據庫有MySQL,Mycat,Oracle,Redis等。

     

    AJAX 可用來與數據庫進行動態通信。

     

    通過本節內容,你將了解 AJAX 動態加載數據庫的相關知識。

     

     

    AJAX 數據庫實例

     

    下面的例子將演示網頁如何通過 AJAX 從數據庫讀取信息:請在下面的下拉列表中選擇一個客戶:

     

    Example

    Select a customer:Alfreds FutterkisteNorth/SouthWolski Zajazd
    Customer info will be listed here...

     

     

    實例解釋 - showCustomer() 函數

     

    當用戶在上面的下拉列表中選擇某個客戶時,會執行名為 "showCustomer()" 的函數。該函數由 "onchange" 事件觸發:

     

    function showCustomer(str)
    {
    var xmlhttp;
    if (str=="")
      {
      document.getElementById("txtHint").innerHTML="";
      return;
      }
    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)
        {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","getcustomer.asp?q="+str,true);
    xmlhttp.send();
    }

     

    showCustomer() 函數執行以下任務:

     

    • 檢查是否已選擇某個客戶

     

    • 創建 XMLHttpRequest 對象

     

    • 當服務器響應就緒時執行所創建的函數

     

    • 把請求發送到服務器上的文件

     

    • 請注意我們向 URL 添加了一個參數 q (帶有輸入域中的內容)

     

     

    AJAX 服務器頁面

     

    由上面的 JavaScript 調用的服務器頁面是 ASP 文件,名為 "getcustomer.asp"。

     

    用 PHP 編寫服務器文件也很容易,或者用其他服務器語言。

     

    "getcustomer.asp" 中的源代碼負責對數據庫進行查詢,然后用 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("<table>")
    do until rs.EOF
      for each x in rs.Fields
        response.write("<tr><td><b>" & x.name & "</b></td>")
        response.write("<td>" & x.value & "</td></tr>")
      next
      rs.MoveNext
    loop
    response.write("</table>")
    %>

     

     

    實例解釋 - AJAX從數據庫訪問信息

     

    為了清楚地說明使用AJAX從數據庫訪問信息很容易,我們將動態構建MySQL查詢并在“ajax.html”上顯示結果。在開始前,讓我們先做好基礎工作,使用以下命令創建表。

     

    注:我們假設您有足夠的權限執行以下MySQL操作。

     

    CREATE TABLE 'ajax_example' (
       'name' varchar(50) NOT NULL,
       'age' int(11) NOT NULL,
       'sex' varchar(1) NOT NULL,
       'wpm' int(11) NOT NULL,
       PRIMARY KEY  ('name')
    )

     

    現在使用以下SQL語句將以下數據轉儲到此表中:

     

    INSERT INTO 'ajax_example' VALUES ('Jerry', 120, 'm', 20);
    INSERT INTO 'ajax_example' VALUES ('Regis', 75, 'm', 44);
    INSERT INTO 'ajax_example' VALUES ('Frank', 45, 'm', 87);
    INSERT INTO 'ajax_example' VALUES ('Jill', 22, 'f', 72);
    INSERT INTO 'ajax_example' VALUES ('Tracy', 27, 'f', 0);
    INSERT INTO 'ajax_example' VALUES ('Julie', 35, 'f', 90);

     

    客戶端HTML文件

     

    現在讓我們擁有客戶端HTML文件,即ajax.html,它將具有以下代碼:

     

    <html>
       <body>
          <script language = "javascript" type = "text/javascript">
             <!-- 
             //Browser Support Code
             function ajaxFunction() {
                var ajaxRequest;  // The variable that makes Ajax possible!
                
                try {        
                   // Opera 8.0+, Firefox, Safari
                   ajaxRequest = new XMLHttpRequest();
                } catch (e) {
                   
                   // Internet Explorer Browsers
                   try {
                      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
                   } catch (e) {
                      
                      try {
                         ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                      } catch (e) {
                         // Something went wrong
                         alert("Your browser broke!");
                         return false;
                      }
                   }
                }
                
                // Create a function that will receive data
                // sent from the server and will update
                // div section in the same page.
                ajaxRequest.onreadystatechange = function() {
                
                   if(ajaxRequest.readyState == 4) {
                      var ajaxDisplay = document.getElementById('ajaxDiv');
                      ajaxDisplay.innerHTML = ajaxRequest.responseText;
                   }
                }
                
                // Now get the value from user and pass it to
                // server script.
                var age = document.getElementById('age').value;
                var wpm = document.getElementById('wpm').value;
                var sex = document.getElementById('sex').value;
                var queryString = "?age = " + age ;
                
                queryString +=  "&wpm = " + wpm + "&sex = " + sex;
                ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
                ajaxRequest.send(null); 
             }
             //-->
          </script>
    
          <form name = 'myForm'>
             Max Age: <input type = 'text' id = 'age' /> <br />
             Max WPM: <input type = 'text' id = 'wpm' /> <br />
             Sex: 
             
             <select id = 'sex'>
                <option value = "m">m</option>
                <option value = "f">f</option>
             </select>
             
             <input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
          </form>
          
          <div id = 'ajaxDiv'>Your result will display here</div>
       </body>
    </html>

     

    注:在Query中傳遞變量的方式是根據HTTP標準并具有formA。

     

    URL?variable1 = value1;&variable2 = value2;

     

    上面的代碼將為您提供如下界面:

     

     

    服務器端PHP文件


    您的客戶端腳本已準備就緒。現在,我們必須編寫我們的服務器端腳本,它將從數據庫中獲取age,wpm和sex,并將其發送回客戶端。

     

    將以下代碼放入文件“ajax-example.php”。

     

    <?php
    $dbhost = "localhost";
    $dbuser = "dbusername";
    $dbpass = "dbpassword";
    $dbname = "dbname";
    	
    //Connect to MySQL Server
    mysql_connect($dbhost, $dbuser, $dbpass);
    	
    //Select Database
    mysql_select_db($dbname) or die(mysql_error());
    	
    // Retrieve data from Query String
    $age = $_GET['age'];
    $sex = $_GET['sex'];
    $wpm = $_GET['wpm'];
    	
    // Escape User Input to help prevent SQL Injection
    $age = mysql_real_escape_string($age);
    $sex = mysql_real_escape_string($sex);
    $wpm = mysql_real_escape_string($wpm);
    	
    //build query
    $query = "SELECT * FROM ajax_example WHERE sex = '$sex'";
    
    if(is_numeric($age))
       $query .= " AND age <= $age";
    
    if(is_numeric($wpm))
       $query .= " AND wpm <= $wpm";
    	
    //Execute query
    $qry_result = mysql_query($query) or die(mysql_error());
    
    //Build Result String
    $display_string = "<table>";
    $display_string .= "<tr>";
    $display_string .= "<th>Name</th>";
    $display_string .= "<th>Age</th>";
    $display_string .= "<th>Sex</th>";
    $display_string .= "<th>WPM</th>";
    $display_string .= "</tr>";
    
    // Insert a new row in the table for each person returned
    while($row = mysql_fetch_array($qry_result)) {
       $display_string .= "<tr>";
       $display_string .= "<td>$row[name]</td>";
       $display_string .= "<td>$row[age]</td>";
       $display_string .= "<td>$row[sex]</td>";
       $display_string .= "<td>$row[wpm]</td>";
       $display_string .= "</tr>";
    }
    
    echo "Query: " . $query . "<br />";
    $display_string .= "</table>";
    
    echo $display_string;
    ?>

     

    現在嘗試在Max Age或任何其他框中輸入有效值(例如120),然后單擊Query MySQL按鈕。

     

    全部教程
  • <nav id="wkkge"><strong id="wkkge"></strong></nav>
  • <menu id="wkkge"></menu>
  • 面对面棋牌游戏