ajax如何获取数据库数据

ajax如何获取数据库数据

数据库（Database）是按照数据结构来组织、存储和管理数据的仓库，它产生于距今五十年前，随着信息技术和市场的发展，特别是二十世纪九十年代以后，数据管理不再仅仅是存储和管理数据，而转变成用户所需要的各种数据管理的方式。数据库有很多种类型，从最简单的存储有各种数据的表格到能够进行海量数据存储的大型数据库系统都在各个方面得到了广泛的应用。在信息化社会，充分有效地管理和利用各类信息资源，是进行科学研究和决策管理的前提条件。数据库技术是管理信息系统、办公自动化系统、决策支持系统等各类信息系统的核心部分，是进行科学研究和决策管理的重要技术手段。

ajax动态获取数据库中的数据

在本文中将给出一个例子来介绍使用AJAX技术从服务端获得数据的三种方法。这个例子很简单，就是两个选择框（html中的《select》标签），通过选中第一个select的某一项后，会从服务端得到一些数据，并加载到第2个select中。

方法一、从服务端获得XML格式的数据

// select表示《select》对象，xml表示XMLDocument对象

function addOptions（select， xml）

{

if（select）

{

var options = “”;

for（var i = 0; i 《 xml.childNodes［0］.childNodes.length ; i++）

{

if（xml.childNodes［0］.childNodes［i］.nodeName == “list”）

{

var s = “”;

if（isIE（））

s = xml.childNodes［0］.childNodes［i］.text;

else

s = xml.childNodes［0］.childNodes［i］.textContent

options += “《option value=‘” + s + “’》” ;

options += s;

options += “《/option》”

}

}

var id = select.id;

if（isIE（））

select.outerHTML = “《SELECT id=‘” + id + “’ onchange=‘onChange（this）’》” + options + “《/SELECT》”;

else

select.innerHTML = options;

}

}

onReadState函数将在XMLHttpRequest对象的异步访问服务端时调用。当readyState为4时表示成功从服务端返回XML数据。这个函数的实现代码如下：

// myRequest表示XMLHttpRequest对象，selectId表示《select》标签的id属性值

function onReadyState（myRequest， selectId）

{

if（myRequest.readyState == 4） // 4表示成功获得相应信息

{

try

{

var xml = myRequest.responseXML; // 获得XMLDocument对象

var kind = document.getElementById（selectId）; // 获得《select》对象

addOptions（kind， xml）; // 向《select》标签中加入《option》标签

}

catch（e）

{

alert（“onReadyState：” + e）;

}

}

}

getData函数负责向服务端发送请求，并设置异步事件。实现代码如下：

function getData（url， selectId）

{

var myRequest = getXMLHTTPRequest（）; // 获得一个XMLHttpRequest对象

if（myRequest）

{

myRequest.onreadystatechange = function（） // 接收获得数据状态的事件函数

{

onReadyState（myRequest， selectId）;

}

try

{

myRequest.open（ “post”， url， true）;

}

catch（e）

{

alert（e）;

}

try

{

myRequest.send（“”）;

}

catch（e）

{

alert（e）;

}

}

}

现在本例子的核心代码已经实现完成，下一步就是在html而加载时从服务端获得第1个《select》标签的数据，并将其加载到第1个《select》标签中。让我们先看一下这个静态的html代码。

《！DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”》

《html》

《head》

《title》《/title》

《/script》

《/head》

《body》

《select id=“bigKind” onchange=“onChange（this）” 》

《/select》

《select id=“smallKind” 》

《/select》

《/body》

《/html》

从上面代码可以看出，这两个《select》标签分别是bigKind和smallKind，里面并没有《option》标签，这是因为《option》标签要在javascript里动态加载。下面我们先来加载bigKind中的数据。

window.onload = onLoad

function onLoad（）

{

try

{

getData（“。。/GetXML”， “bigKind”）;

}

catch（e）

{

alert（“onLoad：” + e）;

}

}

其中GetXML是一个Servlet程序（读者可以将其换成其他的服务端程序，如asp.net、php的）。下面是这个GetXML程序的实现代码：

package servlet;

import java.io.*;

import javax.servlet.*;

import database.MyData;

public class GetXML extends HttpServlet

{

protected void processRequest（HttpServletRequest request， HttpServletResponse response）

throws ServletException， IOException

{

response.setContentType（“application/xml;charset=UTF-8”）;

PrintWriter out = response.getWriter（）;

try

{

out.println（“《data》”）;

if （s == null）

{

for （String key ： MyData.data.keySet（））

{

out.println（“《list》” + key + “《/list》”）;

}

} else

{

s = java.net.URLDecoder.decode（s， “UTF-8”）;

System.out.println（s）;

java.util.List《String》 smallKind = MyData.data.get（s）;

if （smallKind ！= null）

{

for （String kind ： smallKind）

{

out.println（“《list》” + kind + “《/list》”）;

}

}

}

out.println（“《/data》”）;

} finally

{

out.close（）;

}

}

protected void doGet（HttpServletRequest request， HttpServletResponse response）

throws ServletException， IOException

{

processRequest（request， response）;

}

protected void doPost（HttpServletRequest request， HttpServletResponse response）

throws ServletException， IOException

{

processRequest（request， response）;

}

public String getServletInfo（）

{

return “Short description”;

}

}

不管读者会不会java和servlet，从这个程序中的processRequest方法中都可以看出，首先会获得请求参数kind，如果这个参数不存在，则返回bigKind所需要的数据，以xml格式返回，类似于如下的格式：

《data》

《list》data1《/list》

《list》data2《/list》

《/data》

如果kind参数存在，则在MyData.data中查询第2个《select》标签（smallKind）所需要的数据。data是一个Map类型。为了方便起见，本例子并未使用数据库，而是在MyData类中定义了一个静态的Map类型变量。MyData的实现代码如下：

package database;

import java.util.*;

public class MyData {

public static Map《String， List《String》》 data;

static {

data = new HashMap《String， List《String》》（）;

List《String》 eProducts = new LinkedList《String》（）;

eProducts.add（“家电”）;

List《String》 goods = new LinkedList《String》（）;

goods.add（“化妆”）;

goods.add（“健康”）;

goods.add（“玩具”）;

goods.add（“办公/文体 ”）;

goods.add（“童装童鞋”）;

goods.add（“其他”）;

data.put（“日用百货”， goods）;

List《String》 books = new LinkedList《String》（）;

books.add（“小说”）;

books.add（“动漫”）;

books.add（“经济”）;

books.add（“法律”）;

books.add（“计算机”）;

books.add（“英语”）;

books.add（“通讯”）;

books.add（“其他”）;

data.put（“图书”， books） ;

}

}

其中data变量中的key值就是bigKind中的值，而每一个key对应的值（一个List《String》对象就是smallKind中值的列表）。下面我们来实现当第1个《select》标签bigKind变化时，更新smallKind标签。《select》的onchange事件函数的代码如下：

function onChange（obj）

{

try

{

getData（encodeURI（encodeURI（“。。/GetXML？kind=” +obj.options［obj.selectedIndex］.value））， “smallKind”）;

}

catch（e）

{

alert（e）;

}

}

这个函数是《select》标签的onchange事件函数。obj表示《select》标签本身。这个函数中只有一条有实际意义的语句，也就是调用了getData方法，这个方法人在onLoad方法中调用getData时差不多，只是在传送url时使用了两个encodeURI方法。由于XMLHttpRequest方法以utf-8向服务端发送数据，因此，要使用两个encodeURI向服务端发送%xx形式的utf-8编码，然后在服务端进行解析。我们在GetXML中的processRequest方法中可以找到如下的一条语句：

s = java.net.URLDecoder.decode（s， “UTF-8”）;

就是进行解码操作。

注：如果在IE中，客户端可以不使用encodeURI对带中文的URL进行编码，服务端也不用解码。在服务端仍然可以正常显示中文。但在firefox中就必须要进行编码和解码。因此，要想跨浏览器，就需要使用本文所述的方法。

方法二、直接获得《option》。。。《/option》内容的字符串

上面的获得数据的方法是从服务端获得了一个XML文档，并转换成XMLDocument对象，然后解析。这种方法虽然很好，但是操作XMLDocument对象还是有些麻烦，因此，我们可以在服务端直接反回《select》标签所需要的《option》标签字符串，然后将这些字符串传给《select》对象的innerHTML或outerHTML就可以了。服务端的代码和上面的实现代码类似，只需要将《data》去掉，然后将《list》改为《option》后，并使用如下的语句来设置ContentType：

response.setContentType（“text/html;charset=UTF-8”）;

客户端可通过XMLHttpRequest对象的responseText属性获得这些含有《option》的文本，并将其赋给innerHTML或outerHTML属性。这种方法虽然很方便，但并不灵活。如果客户端不使用《select》标签，而是使用《table》或其他的标签显示数据，那么返回的这些数据就没什么用处了。而即方便，又灵活的应该是下面要介绍的方法。

方法三、从服务端返回javascript代码，在客户端使用eval函数执行

我们可以在服务端返回类似于如下的字符串：

var options = new Array（）;

options.push（‘data1’）;

options.push（‘data2’）;

然后使用eval函数执行上面的字符串，这样我们在javascript中就可以使用options数组了。我个人认为，使用数组要比使用XMLDocument更容易，代码量也更少。如果要返回更为复杂的数据，也可以使用javascript中的类或其他数据结构。根据上面的思想，新的processRequest方法的代码如下：

protected void processRequest（HttpServletRequest request， HttpServletResponse response）

throws ServletException， IOException

{

response.setContentType（“text/html;charset=UTF-8”）;

PrintWriter out = response.getWriter（）;

out.println（“var options = new Array（）;”）;

try

{

String s = request.getParameter（“kind”）;

if （s == null）

{

for （String key ： MyData.data.keySet（））

{

out.println（“options.push（‘” + key + “’）;”）;

}

} else

{

s = java.net.URLDecoder.decode（s， “UTF-8”）;

System.out.println（s）;

java.util.List《String》 smallKind = MyData.data.get（s）;

if （smallKind ！= null）

{

for （String kind ： smallKind）

{

out.println（“options.push（‘” + kind + “’）;”）;

}

}

}

} finally

{

out.close（）;

}

}

客户端经过改进的addOptions函数如下：

// javascript表示从服务端返回的javascript代码字符串

function addOptions（select， javascript）

{

if（select）

{

if（select.id == “smallKind”）

{

if（isIE（））

select.options.length = 0;

}

var myOptions = “”;

eval（javascript）; //执行从服务端返回的javascript代码

for（var i = 0; i 《 options.length ; i++） // 从options数组中取数据

{

var s = “”;

if（isIE（））

{

select.options［select.options.length］ = new Option（options［i］， options［i］）;

}

else

{

myOptions += “《option value=‘” + options［i］ + “’》” ;

myOptions += options［i］;

myOptions += “《/option》”

}

}

}

var id = select.id;

if（！isIE（））

select.innerHTML = myOptions;

}

在上面的addOptions方法中还有一个不同是在IE中使用了《select》对象的options数组来添加选择项，而不是使用outerHTML。这么做的好处是可以在onLoad方法中就获得《select》的选项值。而如果使用outerHTML在html未装载完时，《select》标签中选择项仍然为0。这样在onLoad方法中就无法访问《select》中的被加入项了，当然，在onchange事件中可以。

在firefox中使用innerHTML时，在html未装载完时，只要《select》标签被装载完（也就是调用了addOptions方法后），就可以访问《select》标签中的《option》了。个人感觉这一点要从IE做得好。图1是本例的效果图

图1

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。