Web 技术糅合了太多内容, 总的来说Server 和 Client 技术基本上不划分。 因此当PHP, J2EE, Pyth 纷扰这web世界的时候, 我们还能看到JQuary, Node.js, 还能看到Sql的阴魂不散. 很多人就开始深陷技术无法自拔。 这篇文章中。 您完全不用费神费力。 这一切都跟服务端技术没有多大关系。
1. 服务端仅仅提供接口数据。 比如通过一个POST请求，服务端把数据传给我们。 我们这里将采用JSON的格式【XML大娘的标签太罗嗦】
2. 客户端通过XMLHTTPRequest这个浏览器著名的实例, 和服务端交互, 然后把数据拿回来, JS能做到
3. 客户端开始通过DOM进行展示. 展示非常灵活, 你想把文本变成红的绿的, 都行, 同样JS也能做到
4. 很显然, JS在处理请求的时候, 还处理了HTML的UI, 也就是逻辑和UI的揉合. 这里, 要给出解决方案, 让代码不那么糟糕, 因为我们还需要让别人看懂, 让别人维护.
环境准备:
1. 服务端, 一个查单词的Server端应用. 非常简单, 下面的红色字体, 就是输入单词的部分, 其他的几个参数, 先忽视吧!
http://dictionary.duapp.com/q?method=queryword&word=future&type=1_00&name=test&pwd=test
当然你可以修改为其它任意的单词, 这个也将是我们后面会提供的内容。
http://dictionary.duapp.com/q?method=queryword&word=have&type=1_00&name=test&pwd=test
如果您一直关注我的博客, 显然, 这是【凡尘英语】部署的一个应用. 当然你无需关注, 我们这里是关注客户端的技术, 千万别迷恋服务端! 否则你会离题太远!
另外温馨提示一下, 千万别拿我这个接口来做其他的事情, 因为我一段时间之后, 我会将这个接口封闭。 你完全可以部署一个免费的服务端应用。 这里可以帮你找到一些线索:
百度的 java BAE, 建立一个Java Servlet为主要技术的应用.
2. 客户端. 组装一个POST请求, 对返回的字段进行解析, 将其嵌入到我们的HTML5的各种标签中, 以第一个链接请求future的查询为例:
{"key":"future","pron":"ˈfju:tʃə---ˈfjutʃɚ---","meanings":[{"type":"adj.","trans":"将来的，未来的；[语法学]将来时的；"},{"type":"n.","trans":"前途；[美国俚语]未婚妻；期货；"}],"shorts":"[for the future, in future, in the future]","usages":[{"eng":"I am on my way to future, where you are there.","cn":"我要去有你的未来","type":-1,"remark":"优美英文"},{"eng":"If my future has you in it, I'm not afraid of the rest.","cn":"如果我的未来有你在，那其他的什么我都不怕了。","type":-1,"remark":"优美英文"},{"eng":"Every hour of lost time is a chance of future misfortune.","cn":"一寸光阴一寸金，寸金难买寸光阴。","type":-1,"remark":"优美英文"},{"eng":"We'd better struggle for the future rather than regret for the past.","cn":"后悔过去，不如奋斗将来。","type":-1,"remark":"优美英文"}]}
目标:
1. 生成两个页面, 将上述JSon数据进行展示
2. 分离UI处理和逻辑处理, 采用先分层、后模块化的方式. 保证框架代码的容易维护
特别提醒:
1. 由于存在跨域问题, 所以, 本文的客户端代码和服务端代码需要共同部署在同一个服务器上.
2. 我们Sevlet转发的方式, 将dictionary.duapp.com的查询, 转迁到student.duapp.com上去. 当然, 我们建议你也这么做. 代码很简单, 提供如下:
- private String getHttpContent(String rometURL, String encoding)
- {
- try {
- URL url = new URL (rometURL);
- URLConnection uc = url.openConnection();
- uc.setRequestProperty ("Authorization", "Basic " + encoding);
- uc.setRequestProperty("User-Agent", "Mozilla/5.0");
- InputStream content = (InputStream)uc.getInputStream();
- BufferedReader in = new BufferedReader (new InputStreamReader (content,encoding));
- StringBuffer buffer = new StringBuffer();
- while (in.ready()) {
- String inString = in.readLine().trim();
- if (inString.length() != 0)
- {
- buffer.append(inString);
- }
- }
- return buffer.toString();
- } catch (Exception e) {
- }
- return null;
- }
- @Override
- protected void service(HttpServletRequest req, HttpServletResponse resp)
- throws ServletException, IOException {
- // TODO Auto-generated method stub
- // super.doGet(req, resp);
- String partA = "http://dictionary.duapp.com/q?method=queryword&word=";
- String partB = "&type=1_00&name=test&pwd=test";
- String content = getHttpContent(partA + "about" + partB, "utf-8");
- resp.setContentType("text/plain");
- resp.setCharacterEncoding("utf-8");
- resp.getWriter().println(content);
- }
这样转接代理服务完成.
接下来要做的工作, 就是显示一个页面: 测试链接如下:
可以输入任意单词进行测试
