开发教程

HTML/CSS 前端脚本服务器脚本编程 XML 网站建设参考手册

课程目录

JS 教程

JS 版本

JS 对象

JS 函数

JS 类

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs jQuery

JS 实例

JS 参考手册

建站手册

AJAX Database 实例

AJAX 可用于同数据库进行交互式通信。

AJAX Database 实例

下面的例子演示：网页如何通过 AJAX 从数据库中读取信息：

实例

客户信息将在此处列出。

亲自试一试

例子解释 - showCustomer() 函数

当用户在上面的下拉列表中选择一位客户后，执行名为 "showCustomer()" 函数。此函数被 onchange 事件触发：

showCustomer

function showCustomer(str) {
  var xhttp; 
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState  == 4 && this.status == 200) {
    document.getElementById("txtHint").innerHTML  = this.responseText;
    }
  };
  xhttp.open("GET",  "getcustomer.html?q=" + str, true);
  xhttp.send();
}

showCustomer() 函数进行如下：

检查是否选取客户
创建 XMLHttpRequest 对象
创建当服务器响应就绪时执行的函数
向服务器上的文件发送请求
请注意，参数 q 被添加到 URL（带有下拉列表的内容）

AJAX 服务器页面

被以上 JavaScript 调用的服务器页面是名为 "getcustomer.html" 的 ASP 文件。

使用 PHP 或其他服务器语言能够轻松重写该服务器文件。

请参见对应的 PHP 实例。

"getcustomer.html" 中的源代码中运行面向数据库的查询，并在 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("customers.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>")
%>

实用工具热门城市五险一金社保查询医保查询养老保险公积金查询社保机构缴费基数信用卡申请