AJAX數(shù)據(jù)庫實(shí)例

數(shù)據(jù)庫：數(shù)據(jù)庫可視為電子化的文件柜-存儲電子文件的處所，用戶可以對文件中的數(shù)據(jù)進(jìn)行新增，截取，更新，刪除等操作。

常見的型關(guān)系數(shù)據(jù)庫有MySQL，Mycat，Oracle，Redis等。

AJAX 可用來與數(shù)據(jù)庫進(jìn)行動態(tài)通信。

通過本節(jié)內(nèi)容，你將了解 AJAX 動態(tài)加載數(shù)據(jù)庫的相關(guān)知識。

AJAX 數(shù)據(jù)庫實(shí)例

下面的例子將演示網(wǎng)頁如何通過 AJAX 從數(shù)據(jù)庫讀取信息：請?jiān)谙旅娴南吕斜碇羞x擇一個(gè)客戶：

Example

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

實(shí)例解釋 - showCustomer() 函數(shù)

當(dāng)用戶在上面的下拉列表中選擇某個(gè)客戶時(shí)，會執(zhí)行名為 "showCustomer()" 的函數(shù)。該函數(shù)由 "onchange" 事件觸發(fā)：

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() 函數(shù)執(zhí)行以下任務(wù)：

• 檢查是否已選擇某個(gè)客戶

• 創(chuàng)建 XMLHttpRequest 對象

• 當(dāng)服務(wù)器響應(yīng)就緒時(shí)執(zhí)行所創(chuàng)建的函數(shù)

• 把請求發(fā)送到服務(wù)器上的文件

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

AJAX 服務(wù)器頁面

由上面的 JavaScript 調(diào)用的服務(wù)器頁面是 ASP 文件，名為 "getcustomer.asp"。

用 PHP 編寫服務(wù)器文件也很容易，或者用其他服務(wù)器語言。

"getcustomer.asp" 中的源代碼負(fù)責(zé)對數(shù)據(jù)庫進(jìn)行查詢，然后用 HTML 表格返回結(jié)果：

<%
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>")
%>

實(shí)例解釋 - AJAX從數(shù)據(jù)庫訪問信息

為了清楚地說明使用AJAX從數(shù)據(jù)庫訪問信息很容易，我們將動態(tài)構(gòu)建MySQL查詢并在“ajax.html”上顯示結(jié)果。在開始前，讓我們先做好基礎(chǔ)工作，使用以下命令創(chuàng)建表。

注：我們假設(shè)您有足夠的權(quán)限執(zhí)行以下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')
)

現(xiàn)在使用以下SQL語句將以下數(shù)據(jù)轉(zhuǎn)儲到此表中：

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文件

現(xiàn)在讓我們擁有客戶端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中傳遞變量的方式是根據(jù)HTTP標(biāo)準(zhǔn)并具有formA。

URL?variable1 = value1;&variable2 = value2;

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

服務(wù)器端PHP文件

您的客戶端腳本已準(zhǔn)備就緒?，F(xiàn)在，我們必須編寫我們的服務(wù)器端腳本，它將從數(shù)據(jù)庫中獲取age，wpm和sex，并將其發(fā)送回客戶端。

將以下代碼放入文件“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;
?>

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

AJAX ASP/PHP請求實(shí)例 AJAX XML實(shí)例

全部教程

大战熟女丰满人妻av-荡女精品导航-岛国aaaa级午夜福利片-岛国av动作片在线观看-岛国av无码免费无禁网站-岛国大片激情做爰视频

AJAX數(shù)據(jù)庫實(shí)例

AJAX 數(shù)據(jù)庫實(shí)例

AJAX 服務(wù)器頁面

視頻課程

2020Java零基礎(chǔ)教程

JQuery零基礎(chǔ)入門視頻

AJAX視頻教程全集

linux基礎(chǔ)視頻教程