用戶端的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

    另外溫馨提示一下, 千萬别拿我這個接口來做其他的事情, 因為我一段時間之後, 我會将這個接口封閉。 你完全可以部署一個免費的服務端應用。 這裡可以幫你找到一些線索:

    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);  

這樣轉接代理服務完成.

接下來要做的工作, 就是顯示一個頁面: 測試連結如下:

<a target="_blank" href="http://student.duapp.com/static/ajax.html">ajax測試連結</a>

可以輸入任意單詞進行測試

<a target="_blank" href="http://student.duapp.com/static/ajax.js">js源碼</a>