客户端的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源码