客户端的web技术详解手机开发
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上去. 当然, 我们建议你也这么做. 代码很简单, 提供如下:
[java]
view plain
copy 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); }
相关文章
- 整合nacos及分布式事务了解(6)-1024电商平台项目技术选择和创 建聚合工程项目【工业级PaaS云平台+SpringCloudAlibaba+JDK11综合项目实战】
- IM跨平台技术学习(四):蘑菇街基于Electron开发IM客户端的技术实践
- ASP.NET Core技术--使用客户端凭证保护API接口
- 【rainbowzhou 面试17/101】技术提问--如何进行数据质量检查?
- 突然好奇,韩国技术面试卷不卷?
- 掌握Oracle 12c 多字符集技术(oracle12c字符集)
- 执行Linux上的文件:技术指南(执行文件linux)
- 新技术Web项目使用Redis实现高性能(web项目使用redis)
- Oracle 字段连接技术指南(oracle字段连接)
- 结合技术:JSP与Oracle(jsp与oracle)
- Linux移植:探索新技术的可能性(移植linux)
- 数据库优化SQL Server数据库的并行化技术(sqlserver并行)
- Linux分支:深入了解技术的奥秘(linux的分支)
- Linux内核:一首精致的技术之歌(linux内核设计的艺术)
- 面向Web的MS SQL数据库技术(web mssql)
- 使用Lang和Oracle技术探索软件系统(lang oracle)
- Oracle书籍教程学习全面深入的DBA技术(oracle书籍教程)
- 一键优化内存清理Redis技术(内存清理redis)
- 未来的挑战Oracle9i的AWR技术(oracle9i awr)
- 2021年8月18日,“AI这时代 星辰大海——百度世界2021”大会将在线上召开。将全面展示百度人工智能在出行、生活、产业、自主创新科技等领域的最新成果和应用,对人工智能技术进行一次创新式全民科普,并与各界共同探讨人工智能商业价值和社会价值等热点话题。 [14-15] 直播渠道包括央视新闻客户端、百度APP、央视新闻视频号以及央视新闻在微博、抖音、快手、B站的官方账号等。 百度世界2021 百度世界2021
- ASP网站生成静态html页面技术小结