淘宝开放平台API 小试牛刀
本应用是基于淘宝开放平台（TOP）API以及Google Map JavaScript API的基础上实现的一个自用型淘宝买家应用。
实现的功能：
在浏览器端，展示淘宝用户作为买家，所买到的商品（通过在地图上展示，商品的收获地址以及商品图片）。
如图：
实现过程：
在浏览器上显示地图 --> 通过TOP API查询用户的交易记录 --> 返回XML数据 -->
解析xml，获得收获地址、商品图片地址 --> 调用Google Map API 在地图上显示 --> 完毕。
主要技术：
Java ， TOP API，Google Map API， DWR
源码：
APITest.java
1 package aa;
2
3 import java.text.ParseException;
4 import java.text.SimpleDateFormat;
5 import java.util.Date;
6
7 import com.taobao.api.ApiException;
8 import com.taobao.api.Constants;
9 import com.taobao.api.DefaultTaobaoClient;
10 import com.taobao.api.TaobaoClient;
11 import com.taobao.api.request.TradesBoughtGetRequest;
12 import com.taobao.api.response.TradesBoughtGetResponse;
13
14 public class APITest {
15 protected static String testUrl = "http://gw.api.tbsandbox.com/router/rest";// 沙箱环境调用地址
16 protected static String Url = "http://gw.api.taobao.com/router/rest";//正式环境调用地址
17 /**
18 * 说明：沙箱环境是模拟淘宝网上交易的，开发人员可以在此先测试自己的应用，然后才能申请到正式环境测试
19 */
20
21 // 申请的测试账号 appkey 及 secret
22 protected static String myappkey = " ";
23 protected static String mysecret = " ";
24 protected static String sandboxSecret = " "; // 沙箱环境测试下的 AppSecret
25 /**
26 * 说明：开发者申请开发应用的时候，系统给你的appkey与secret是和你的应用唯一对应的，同时，
27 * 它会绑定你的淘宝账户（现实环境的账户以及申请的沙箱账户），当需要调用到用户隐私数据的时候，
28 * 调用的即是所关联的账户的数据。
29 * 例如本例调用到的monkey823用户即是我在沙箱申请的账户，里面的交易数据是在mini淘宝模拟的。
30 */
31
32 /**
33 * 测试 TradesBoughtGet
34 *
35 * 调用了top SDK
36 *
37 */
38 public static String testTradeGet() throws ApiException, ParseException {
39
40 // 可以在client 构造函数里 设置返回的数据格式 xml or json
41 TaobaoClient client = new DefaultTaobaoClient(testUrl, myappkey,
42 sandboxSecret, Constants.FORMAT_XML);
43 TradesBoughtGetRequest req = new TradesBoughtGetRequest();
44 req.setFields("seller_nick,buyer_nick,title,type,create,orders.pic_path,orders.price,orders.num,receiver_city");
45 Date dateTime = SimpleDateFormat.getDateTimeInstance().parse(
46 "2011-03-09 05:15:27");
47 Date dateTime2 = SimpleDateFormat.getDateTimeInstance().parse(
48 "2011-04-09 23:15:27");
49
50 req.setStartCreated(dateTime);
51 req.setEndCreated(dateTime2);
52
53 TradesBoughtGetResponse response = client.execute(req);
54
55 System.out.println("------>> " + response.getBody());
56
57 return response.getBody();
58 }
59
60 public static void main(String[] args) {
61
62 try {
63 APITest.testTradeGet();
64 } catch (Exception e) {
65 e.printStackTrace();
66 }
67 }
68 }
执行这个测试时，返回的XML数据（为方便查看，以图片形式展示）：
Web.xml
1 <?xml version="1.0" encoding="UTF-8"?>
2 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
3 <display-name>DwrTest</display-name>
4 <servlet>
5 <servlet-name>dwr-invoker</servlet-name>
6 <!--<display-name>DWR Servlet</display-name>-->
7 <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
8 <init-param>
9 <param-name>debug</param-name>
10 <param-value>true</param-value>
11 </init-param>
12 </servlet>
13
14 <servlet-mapping>
15 <servlet-name>dwr-invoker</servlet-name>
16 <url-pattern>/dwr/*</url-pattern>
17 </servlet-mapping>
18 <welcome-file-list>
19 <welcome-file>test.jsp</welcome-file>
20 </welcome-file-list>
21 </web-app>
Dwr.xml
1 <!DOCTYPE dwr PUBLIC
2 "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
3 "http://getahead.org/dwr/dwr30.dtd">
4
5 <dwr>
6 <allow>
7
8 <create creator="new" javascript="APITest">
9 <param name="class" value ="aa.APITest" />
10 </create>
11
12 </allow>
13 </dwr>
test.jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <title>DWR Test</title>
8 <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
9 </head>
10 <!--引入dwr的js脚本-->
11 <script src="dwr/interface/APITest.js"></script>
12 <script src="dwr/engine.js" /></script>
13
14 <!-- 下面是谷歌地图API的调用 -->
15 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=cn"></script>
16 <script type="text/javascript">
17 function initialize() {
18
19 //初始化地图界面
20 var myLatlng = new google.maps.LatLng(37.230,106.083); //中国地图的坐标中心
21 var myOptions = {
22 zoom: 4, //缩放级别
23 center: myLatlng, //设定中心坐标
24 mapTypeId: google.maps.MapTypeId.ROADMAP //地图样式：卫星，地图
25 };
26
27 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
28
29 //获取后台数据, 并实时显示在地图上。
30 APITest.testTradeGet(callback); //执行top API 生成xml数据, 并绑定 回调方法处理
31
32 //回调函数
33 function callback(response){ //response为执行 APITest.testTradeGet方法返回的值(xml格式的String)
34 var xmlDoc = loadXMLStr(response);
35
36 //其他 步骤
37 //获得图片路径 数组
38 var picturePaths = xmlDoc.getElementsByTagName("pic_path");
39 //获得所在城市 数组
40 var citys = xmlDoc.getElementsByTagName("receiver_city");
41 //alert("pic:" +picturePaths[0].text +" city :"+ citys[0].text);
42 //alert("pic:" +picturePaths[0].text);
43 if(picturePaths[0]!=null){ //如果返回的数据不为空
44 //根据图片地址 生成自定义图片文件
45 var image = new google.maps.MarkerImage(
46 picturePaths[0].text,
47 new google.maps.Size(80, 60), //缩放后的大小
48 new google.maps.Point(0, 0), //原始点
49 new google.maps.Point(40, 0), //锚点
50 new google.maps.Size(800, 600) //图片原始大小（缩放图片时必须要填写）
51 ); //缩放了大小的图片
52 //var image = new google.maps.MarkerImage(picturePaths[0].text); //原始大小的图片
53
54 var address = citys[0].text;
55 //var address = "长沙";
56 codeAddress(address); //解析地址， 并往地图上添加图片
57
58 }
59
60 //解析地址的函数
61 function codeAddress(address) {
62 var ll;
63 var geocoder = new google.maps.Geocoder();
64
65 if (geocoder) {
66 geocoder.geocode( { 'address': address},getLL);
67 }
68 var re = function getLL(results, status) {
69 if (status == google.maps.GeocoderStatus.OK) {
70
71 ll = results[0].geometry.location;
72
73 //在所解析的地址处， 添加一个标记（用自定义图片）
74 var marker = new google.maps.Marker({
75 map: map,
76 position: ll,//results[0].geometry.location,
77 icon: image //自定义的icon
78 });
79
80 //信息窗口选项
81 var infoOption = {
82 content: address,
83 position: ll//results[0].geometry.location
84 };
85 //添加 信息窗口
86 var info = new google.maps.InfoWindow(infoOption);
87 info.open(map); //显示标注信息窗口
88 //alert("mark 5555555555 success!!!");
89
90 } else {
91 alert("Geocode was not successful for the following reason: " + status);
92 }
93 };
94 }
95
96 }
97
98 //加载 xml 格式的字符串的函数
99 function loadXMLStr(text){ //text为xml格式的String
100 var xmlDoc;
101 try //Internet Explorer
102 {
103 xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
104 xmlDoc.async="false";
105 xmlDoc.loadXML(text);
106 }
107 catch(e)
108 {
109 try //Firefox, Mozilla, Opera, etc.
110 {
111 parser=new DOMParser();
112 xmlDoc=parser.parseFromString(text,"text/xml");
113 }
114 catch(e) {alert(e.message);}
115 }
116 return xmlDoc;
117 }
118
119 }
120
121 </script>
122 </head>
123 <body onload="initialize()">
124
125 <!-- 显示地图的div -->
126 <div id="map_canvas" style="width: 1000px; height: 800px; align:center;"></div>
127 </body>
128 </html>
当然，dwr的包、 TOP的SDK是不能忘记的。O(∩_∩)O~
好了，希望本文能引起你对于TOP的兴趣，更希望对于刚要着手开发淘宝应用的同志 能够有点帮助。
错误之处，还望不吝赐教。
