ajax 获取java数据_如何使用Ajax从服务端获取数据
在本文中將給出一個例子來介紹使用 Ajax 技術從服務端獲得數據的三種方法。這個例子很簡單，就是兩個選擇框(html中的標簽)，通過選中第一個select的某一項后，會從服務端得到一些數據，并加載到第2個select中。
從服務端獲得XML格式的數據
從服務端獲得數據的最容易想到的方法就是在服務端反加一定格式的數據，一般是XML格式，然后在服務端使用XMLDocument或其他技術來讀取這些數據，并生成標簽中選項的格式文本(標簽)。下面的addOptions函數是這個例子的核心函數，它負責根據從服務端獲得的數據生成標簽中的標簽。在這里所使用的方法是利用了標簽的innerHTML屬性(僅限于firefox)，如果是IE，要使用outerHTML屬性(IE中標簽的innerHTML屬性有一些小bug，讀者可以試著在IE中使用innerHTML屬性，看看會發生什么情況)。addOptions方法的實現代碼如下：
// 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 += "" ;
options += s;
options += ""
}
}
var id = select.id;
if(isIE())
select.outerHTML = "" + options + "";
else
select.innerHTML = options;
}
}
onReadState函數將在XMLHttpRequest對象的異步訪問服務端時調用。當readyState為4時表示成功從服務端返回XML數據。這個函數的實現代碼如下：
// myRequest表示XMLHttpRequest對象，selectId表示標簽的id屬性值
function onReadyState(myRequest, selectId)
{
if(myRequest.readyState == 4) // 4表示成功獲得相應信息
{
try
{
var xml = myRequest.responseXML; // 獲得XMLDocument對象
var kind = document.getElementById(selectId); // 獲得對象
addOptions(kind, xml); // 向標簽中加入標簽
}
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個標簽的數據，并將其加載到第1個標簽中。讓我們先看一下這個靜態的html代碼。
從上面代碼可以看出，這兩個標簽分別是bigKind和smallKind，里面并沒有標簽，這是因為標簽要在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("");
if (s == null)
{
for (String key : MyData.data.keySet())
{
out.println("" + key + "");
}
} else
{
s = java.net.URLDecoder.decode(s, "UTF-8");
System.out.println(s);
java.util.List smallKind = MyData.data.get(s);
if (smallKind != null)
{
for (String kind : smallKind)
{
out.println("" + kind + "");
}
}
}
out.println("");
} 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格式返回，類似于如下的格式：
data1
data2
如果kind參數存在，則在MyData.data中查詢第2個標簽(smallKind)所需要的數據。data是一個Map類型。為了方便起見，本例子并未使用數據庫，而是在MyData類中定義了一個靜態的Map類型變量。MyData的實現代碼如下：
package database;
import java.util.*;
public class MyData {
public static Map> data;
static {
data = new HashMap>();
List eProducts = new LinkedList();
eProducts.add("手機");
eProducts.add("數碼/IT");
eProducts.add("家電");
eProducts.add("電腦");
data.put("消費電子", eProducts);
List goods = new LinkedList();
goods.add("化妝");
goods.add("健康");
goods.add("玩具");
goods.add("辦公/文體 ");
goods.add("童裝童鞋");
goods.add("其他");
data.put("日用百貨", goods);
List books = new LinkedList();
books.add("小說");
books.add("動漫");
books.add("經濟");
books.add("法律");
books.add("計算機");
books.add("英語");
books.add("通訊");
books.add("其他");
data.put("圖書", books);
}
}
其中data變量中的key值就是bigKind中的值，而每一個key對應的值(一個List對象就是smallKind中值的列表)。下面我們來實現當第1個標簽bigKind變化時，更新smallKind標簽。的onchange事件函數的代碼如下：
function onChange(obj)
{
try
{
getData(encodeURI(encodeURI("../GetXML?kind=" +obj.options[obj.selectedIndex].value)), "smallKind");
}
catch(e)
{
alert(e);
}
}
這個函數是標簽的onchange事件函數。obj表示標簽本身。這個函數中只有一條有實際意義的語句，也就是調用了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中就必須要進行編碼和解碼。因此，要想跨瀏覽器，就需要使用本文所述的方法。
直接獲得...內容的字符串
上面的獲得數據的方法是從服務端獲得了一個XML文檔，并轉換成XMLDocument對象，然后解析。這種方法雖然很好，但是操作XMLDocument對象還是有些麻煩，因此，我們可以在服務端直接反回標簽所需要的標簽字符串，然后將這些字符串傳給對象的innerHTML或outerHTML就可以了。服務端的代碼和上面的實現代碼類似，只需要將去掉，然后將改為后，并使用如下的語句來設置ContentType：
response.setContentType("text/html;charset=UTF-8");
客戶端可通過XMLHttpRequest對象的responseText屬性獲得這些含有的文本，并將其賦給innerHTML或outerHTML屬性。這種方法雖然很方便，但并不靈活。如果客戶端不使用標簽，而是使用
從服務端返回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 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 += "" ;
myOptions += options[i];
myOptions += ""
}
}
}
var id = select.id;
if(!isIE())
select.innerHTML = myOptions;
}
在上面的addOptions方法中還有一個不同是在IE中使用了對象的options數組來添加選擇項，而不是使用outerHTML。這么做的好處是可以在onLoad方法中就獲得的選項值。而如果使用outerHTML在html未裝載完時，標簽中選擇項仍然為0。這樣在onLoad方法中就無法訪問中的被加入項了，當然，在onchange事件中可以。
在firefox中使用innerHTML時，在html未裝載完時，只要標簽被裝載完(也就是調用了addOptions方法后)，就可以訪問標簽中的了。個人感覺這一點要從IE做得好。順便說一句，筆者使用的是IE6，不知道ie7會是什么效果。
簡單來說，方法有以下幾種：
返回XML
返回HTML
返回Json
返回一些javascript代碼，在客戶端執行
總結
以上是生活随笔為你收集整理的ajax 获取java数据_如何使用Ajax从服务端获取数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java 检查bytebuf长度_Jav
- 下一篇： align_center在JAVA_ma