客户端的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上去. 当然, 我们建议你也这么做. 代码很简单, 提供如下:

 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源码

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cloudskyme

axis2开发webservice(1)

开发webservice之前要先看一眼什么是webservice,并且了解一下webservice的概念。 SOAP SOAP(Simple Object...

42570
来自专栏cloudskyme

linux内存查看方式

如下显示free是显示的当前内存的使用,-m的意思是M字节来显示内容.我们来一起看看. $ free -m total ...

55040
来自专栏SEO

「SEO技巧」页面分页优化技巧

39170
来自专栏玄魂工作室

CTF实战32 综合实战和讲解二(讲解部分)

该培训中提及的技术只适用于合法CTF比赛和有合法授权的渗透测试,请勿用于其他非法用途,如用作其他非法用途与本文作者无关

9240
来自专栏Python中文社区

Scrapy详解之中间件(Middleware)

如上图标号4、5处所示,下载器中间件用于处理scrapy的request和response的钩子框架,可以全局的修改一些参数,如代理ip,header等

60520
来自专栏大史住在大前端

【Recorder.js+百度语音识别】全栈方案技术细节

技术栈:React+recorder-tool.js +recorder.js + Express + Baidu语音识别API

54830
来自专栏王清培的专栏

.NET程序员项目开发必知必会—Dev环境中的集成测试用例执行时上下文环境检查(实战)

Microsoft.NET 解决方案,项目开发必知必会。 从这篇文章开始我将分享一系列我认为在实际工作中很有必要的一些.NET项目开发的核心技术点,所以我称为...

21950
来自专栏DannyHoo的专栏

利用plist文件查看后台返回数据的数据类型

当看客看到标题的时候或许会有些疑惑,有的人甚至会鄙视写者。查看后台返回的数据类型为什么要用plist文件,这也太麻烦了吧。我既然写这篇博客,肯定是有一定的原因的...

11310
来自专栏Golang语言社区

golang websocket总结(问题贴)

因为工作的需要,接触了websocket,开始的一些很简单的代码,都不知道该怎样运行起来,所以,总是有一层神秘感,却没有太多的兴趣去研究它。不过,还是免不了要了...

43070
来自专栏程序员互动联盟

【一起学python】hello world

联盟有个小伙伴,为了督促自己学习进步,决定把自己以前学的python重新梳理下,并且以文章的方式展示出来,联盟专门做一起学python系列专栏,鼓励这位小伙伴学...

35580

扫码关注云+社区

领取腾讯云代金券