AJAX从服务端获取数据的三种方法
】在本文中将给出一个例子来介绍使用AJAX技术从服务端获得数据的三种方法。这个例子很简单，就是两个选择框（html中的<select>标签），通过选中第一个select的某一项后，会从服务端得到一些数据，并加载到第2个select中。
方法一、从服务端获得XML格式的数据
从服务端获得数据的最容易想到的方法就是在服务端反加一定格式的数据，一般是XML格式，然后在服务端使用XMLDocument或其他技术来读取这些数据，并生成＜select＞标签中选项的格式文本（＜option＞标签）。下面的addOptions函数是这个例子的核心函数，它负责根据从服务端获得的数据生成＜select＞标签中的＜option＞标签。在这里所使用的方法是利用了＜select＞标签的innerHTML属性(仅限于firefox)，如果是IE，要使用outerHTML属性（IE中＜select＞标签的innerHTML属性有一些小bug，读者可以试着在IE中使用innerHTML属性，看看会发生什么情况）。addOptions方法的实现代码如下：
// 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="myscript.js">
</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 javax.servlet.http.*;
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
{
String s = request.getParameter("kind");
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";
}
}
文章评论
共有 0位网翼网友发表了评论 查看完整内容