客户端的web技术
来源:互联网 发布:国家大数据项目 编辑:程序博客网 时间:2024/05/16 07:25
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);
- }
这样转接代理服务完成.
接下来要做的工作, 就是显示一个页面: 测试链接如下:
Ajax测试链接
可以输入任意单词进行测试
js源码
- 客户端的web技术
- Web客户端编程技术的选择
- 第二章 Web客户端技术
- 第二章 Web客户端技术
- 下一代web富客户端技术
- SparkWeb-基于Web ajax技术的XMPP客户端
- Web Storage:简单强大的客户端数据存储技术
- 第二节 Web客户端基本技术
- web客户端的存储
- 在web客户端实现显示图片原图预览功能 ,采用的是jquery的lightbox_balupton_zh技术
- ClearCase的Web客户端使用指南
- metasploit的客户端WEB攻击
- 获取web客户端的IP
- WEB页面的客户端缓存
- 毕业设计,做的安卓客户端(web客户端)+web服务器
- Web技术的历史
- Web技术的“后现代主义”
- WEB开发的技术
- 45度地图遮挡问题解决方案(cocos2d-x)
- 关于phpstorm 对yii的代码提示
- 45度地图游戏的地图拖动和主角跟随
- JS 将数字类型转化为没3个一个逗号的金钱格式
- LaTeX新人教程,30分钟从完全陌生到基本入门
- 客户端的web技术
- 接口的显示实现,隐式实现区别
- 黑马程序员----简单的多线程聊天框的编写
- __super
- maven pom文件详解
- 开源网站
- 总结2012和2013,展望2014
- 【RAC】cssfatal缺少导致的节点1无法启动
- B/S和C/S