閱讀701 返回首頁    go 京東網上商城

客戶端的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端應用. 非常簡單, 下麵的紅色字體, 就是輸入單詞的部分, 其他的幾個參數, 先忽視吧!

     https://dictionary.duapp.com/q?method=queryword&word=future&type=1_00&name=test&pwd=test

    當然你可以修改為其它任意的單詞, 這個也將是我們後麵會提供的內容。

    https://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 = "https://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源碼

最後更新：2017-04-03 12:54:49

  上一篇：go xmpp即時通訊詳解
  下一篇：go 舍不得花錢的心理分析