首页 > 代码库 > 如何使用Ajax从服务端获取数据

如何使用Ajax从服务端获取数据

2024-07-24 07:07:39   220人阅读

在本文中将给出一个例子来介绍使用 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方法的实现代码如下：

view source
 
print?
01// select表示<select>对象，xml表示XMLDocument对象
02function addOptions(select, xml)
03{   
04    if(select)
05    {
06        var options = "";
07        for(var i = 0; i < xml.childNodes[0].childNodes.length ; i++)
08        { 
09            if(xml.childNodes[0].childNodes[i].nodeName == "list")
10            {
11                var s = "";
12                if(isIE())              
13                    s = xml.childNodes[0].childNodes[i].text;        
14                else
15                    s = xml.childNodes[0].childNodes[i].textContent
16                options += "<option value=http://www.mamicode.com/‘" + s + "‘>" ;
17                options += s;
18                options += "</option>"
19            }
20        }
21           
22        var id = select.id;
23        if(isIE())
24            select.outerHTML = "<SELECT id=‘" + id + "‘ onchange=‘onChange(this)‘>" + options + "</SELECT>";
25        else
26            select.innerHTML = options;               
27       
28    }
29}

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

view source
 
print?
01// myRequest表示XMLHttpRequest对象，selectId表示<select>标签的id属性值
02function onReadyState(myRequest, selectId)
03{
04    if(myRequest.readyState == 4)   // 4表示成功获得相应信息
05    {             
06        try
07        {
08            var xml = myRequest.responseXML;   // 获得XMLDocument对象     
09            var kind = document.getElementById(selectId); // 获得<select>对象
10            addOptions(kind, xml);  // 向<select>标签中加入<option>标签
11        }
12        catch(e)
13        {
14            alert("onReadyState:" + e);
15        }
16    }
17}

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

view source
 
print?
01function getData(url, selectId)
02{
03    var myRequest = getXMLHTTPRequest();  // 获得一个XMLHttpRequest对象
04   
05    if(myRequest)
06    {
07        myRequest.onreadystatechange =  function() // 接收获得数据状态的事件函数
08        {                       
09            onReadyState(myRequest, selectId); 
10        }
11        
12        try
13        {
14            myRequest.open( "post", url, true);
15           
16        }
17        catch(e)
18        {
19            alert(e);
20        }
21        try
22        {
23            myRequest.send("");
24 
25        }
26        catch(e)
27        {
28            alert(e);
29        }
30 
31    }
32}

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

view source
 
print?
01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
02<html>
03    <head>
04        <title></title>
05        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
06        <script type="text/javascript" src="myscript.js">
07        </script>
08    </head>
09    <body>
10        <select id="bigKind" onchange="onChange(this)" >
11            
12        </select>
13        <select id="smallKind" >
14          
15        </select>
16    </body>
17</html>

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

view source
 
print?
01window.onload = onl oad
02function onLoad()
03{                        
04    try
05    {
06        getData("../GetXML", "bigKind");
07              
08    }
09    catch(e)
10    {
11        alert("onLoad:" + e);
12    }
13}

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

view source
 
print?
01package servlet;
02import java.io.*;
03import javax.servlet.*;
04import javax.servlet.http.*;
05import database.MyData;
06public class GetXML extends HttpServlet
07{
08    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
09            throws ServletException, IOException
10    {
11        response.setContentType("application/xml;charset=UTF-8");
12        PrintWriter out = response.getWriter();
13        try
14        {
15            String s = request.getParameter("kind");
16            out.println("<data>");
17            if (s == null)
18            {
19                for (String key : MyData.data.keySet())
20                {
21                    out.println("<list>" + key + "</list>");
22                }
23            } else
24            {
25                s = java.net.URLDecoder.decode(s, "UTF-8");
26                System.out.println(s);
27                java.util.List<String> smallKind = MyData.data.get(s);
28                if (smallKind != null)
29                {
30                    for (String kind : smallKind)
31                    {
32                        out.println("<list>" + kind + "</list>");
33                    }
34                }
35            }
36            out.println("</data>");
37        } finally
38        {
39            out.close();
40        }
41    }
42    protected void doGet(HttpServletRequest request, HttpServletResponse response)
43            throws ServletException, IOException
44    {
45        processRequest(request, response);
46    }
47    protected void doPost(HttpServletRequest request, HttpServletResponse response)
48            throws ServletException, IOException
49    {
50        processRequest(request, response);
51    }
52    public String getServletInfo()
53    {
54        return "Short description";
55    }
56}

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

view source
 
print?
1<data>
2  <list>data1</list>
3  <list>data2</list>
4</data>

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

view source
 
print?
01package database;
02import java.util.*;
03public class MyData {
04    public static Map<String, List<String>> data;   
05    static {
06       
07        data = http://www.mamicode.com/new HashMap<String, List<String>>();
08       
09        List<String> eProducts = new LinkedList<String>();
10        eProducts.add("手机");
11        eProducts.add("数码/IT");
12        eProducts.add("家电");
13        eProducts.add("电脑");
14               
15        data.put("消费电子", eProducts);
16       
17        List<String> goods = new LinkedList<String>();
18       
19        goods.add("化妆");
20        goods.add("健康");
21        goods.add("玩具");
22        goods.add("办公/文体 ");
23        goods.add("童装童鞋");
24        goods.add("其他");
25       
26        data.put("日用百货", goods);
27       
28        List<String> books = new LinkedList<String>();
29       
30        books.add("小说");
31        books.add("动漫");
32        books.add("经济");
33        books.add("法律");
34        books.add("计算机");
35        books.add("英语");
36        books.add("通讯");
37        books.add("其他");
38       
39        data.put("图书", books);                       
40    }
41}

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

view source
 
print?
01function onChange(obj)
02{
03    try
04    {
05        getData(encodeURI(encodeURI("../GetXML?kind=" +obj.options[obj.selectedIndex].value)), "smallKind");
06    
07    }
08    catch(e)
09    {
10        alert(e);
11    }
12}

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

view source
 
print?
1s = 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：

view source
 
print?
1response.setContentType("text/html;charset=UTF-8");

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

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

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

view source
 
print?
1var options = new Array();
2options.push(‘data1‘);
3options.push(‘data2‘);

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

view source
 
print?
01protected void processRequest(HttpServletRequest request, HttpServletResponse response)
02            throws ServletException, IOException
03    {
04        response.setContentType("text/html;charset=UTF-8");
05        PrintWriter out = response.getWriter();
06        out.println("var options = new Array();");
07        try
08        {
09            String s = request.getParameter("kind");
10            if (s == null)
11            {               
12                for (String key : MyData.data.keySet())
13                {
14                    out.println("options.push(‘" + key + "‘);");
15                }
16            } else
17            {
18                s = java.net.URLDecoder.decode(s, "UTF-8");
19                System.out.println(s);
20                java.util.List<String> smallKind = MyData.data.get(s);
21                if (smallKind != null)
22                {
23                    for (String kind : smallKind)
24                    {
25                        out.println("options.push(‘" + kind + "‘);");
26                    }
27                }
28            }
29        } finally
30        {
31            out.close();
32        }
33    }
34    客户端经过改进的addOptions函数如下：
35// javascript表示从服务端返回的javascript代码字符串
36function addOptions(select, javascript)
37{   
38    if(select)
39    {  
40        if(select.id == "smallKind")
41        {
42            if(isIE())
43                select.options.length = 0;
44        }
45        var myOptions = "";
46        eval(javascript);  //执行从服务端返回的javascript代码
47        for(var i = 0; i < options.length ; i++)  // 从options数组中取数据
48        {            
49            var s = "";
50            if(isIE())
51            {
52               
53                select.options[select.options.length] = new Option(options[i], options[i]);
54            }
55            else
56            {
57          
58                myOptions += "<option value=http://www.mamicode.com/‘" + options[i] + "‘>" ;
59                myOptions += options[i];
60                myOptions += "</option>"
61            }
62        }
63    }
64      
65    var id = select.id;
66    if(!isIE())   
67        select.innerHTML =  myOptions;          
68}

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

在firefox中使用innerHTML时，在html未装载完时，只要<select>标签被装载完（也就是调用了addOptions方法后），就可以访问<select>标签中的<option>了。个人感觉这一点要从IE做得好。顺便说一句，笔者使用的是IE6，不知道ie7会是什么效果。

简单来说，方法有以下几种：

  • 返回XML
  • 返回HTML
  • 返回Json
  • 返回一些javascript代码，在客户端执行

如何使用Ajax从服务端获取数据


联系
我们