客户端的web技术

简介: Web 技术糅合了太多内容,  总的来说Server 和 Client 技术基本上不划分。 因此当PHP, J2EE, Pyth 纷扰这web世界的时候,  我们还能看到JQuary, Node.js, 还能看到Sql的阴魂不散.  很多人就开始深陷技术无法自拔。 这篇文章中。 您完全不用费神费力。 这一切都跟服务端技术没有多大关系。 1. 服务端仅仅提供接口数据。 比如通过一个POST

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

  1.     private String getHttpContent(String rometURL, String encoding)  
  2.     {  
  3.         try {  
  4.              URL url = new URL (rometURL);  
  5.                 URLConnection uc = url.openConnection();  
  6.                 uc.setRequestProperty  ("Authorization""Basic " + encoding);  
  7.                 uc.setRequestProperty("User-Agent""Mozilla/5.0");  
  8.                     
  9.                 InputStream content = (InputStream)uc.getInputStream();  
  10.                 BufferedReader in = new BufferedReader (new InputStreamReader (content,encoding));  
  11.                 StringBuffer buffer = new StringBuffer();  
  12.                 while (in.ready()) {  
  13.                     String inString = in.readLine().trim();  
  14.                     if (inString.length() != 0)  
  15.                     {  
  16.                         buffer.append(inString);  
  17.                     }  
  18.                 }  
  19.                 return buffer.toString();  
  20.         } catch (Exception e) {  
  21.         }  
  22.        return null;  
  23.     }  
  24.       
  25.     @Override  
  26.     protected void service(HttpServletRequest req, HttpServletResponse resp)  
  27.             throws ServletException, IOException {  
  28.         // TODO Auto-generated method stub  
  29. //      super.doGet(req, resp);  
  30.         String partA = "http://dictionary.duapp.com/q?method=queryword&word=";  
  31.         String partB = "&type=1_00&name=test&pwd=test";  
  32.         String content = getHttpContent(partA + "about" + partB, "utf-8");  
  33.         resp.setContentType("text/plain");  
  34.         resp.setCharacterEncoding("utf-8");  
  35.         resp.getWriter().println(content);  
  36.     }  

这样转接代理服务完成.


接下来要做的工作, 就是显示一个页面: 测试链接如下:


Ajax测试链接


可以输入任意单词进行测试


js源码

相关文章
|
20天前
|
【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
70 20
【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
31 0
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
71 6
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
97 3
安全至上:Web应用防火墙技术深度剖析与实战
【10月更文挑战第29天】在数字化时代,Web应用防火墙(WAF)成为保护Web应用免受攻击的关键技术。本文深入解析WAF的工作原理和核心组件,如Envoy和Coraza,并提供实战指南,涵盖动态加载规则、集成威胁情报、高可用性配置等内容,帮助开发者和安全专家构建更安全的Web环境。
119 1
论负载均衡技术在Web系统中的应用
【11月更文挑战第4天】在当今高并发的互联网环境中,负载均衡技术已经成为提升Web系统性能不可或缺的一环。通过有效地将请求分发到多个服务器上,负载均衡不仅能够提高系统的响应速度和处理能力,还能增强系统的可扩展性和稳定性。本文将结合我参与的一个实际软件项目,从项目概述、负载均衡算法原理以及实际应用三个方面,深入探讨负载均衡技术在Web系统中的应用。
201 2
构建高效Web应用的五大关键技术
【10月更文挑战第42天】在数字化浪潮中,Web应用已成为企业与用户互动的重要桥梁。本文将深入探讨提升Web应用性能和用户体验的五项核心技术,包括前端优化、后端架构设计、数据库管理、安全性增强以及API开发的最佳实践。通过这些技术的应用,开发者可以构建出更快、更稳定且更安全的Web应用,满足现代网络环境的需求。
后端技术在现代Web开发中的实践与创新
【10月更文挑战第13天】 本文将深入探讨后端技术在现代Web开发中的重要性,通过实际案例分析展示如何利用先进的后端技术提升用户体验和系统性能。我们将从基础架构设计、数据库优化、安全性保障等方面展开讨论,为读者提供清晰的指导和实用的技巧。无论是新手开发者还是经验丰富的技术人员,都能从中获得启发和帮助。
94 2
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
122 0
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等