模仿百度新聞列表底部的“加載更多”

前言

  自從上個月來到了學校的信息化中心實習后自由安排的時間越來越少，遂好久沒來更新博客了。
  昨天在完成一個模仿手機端百度新聞列表底“點擊加載更多”的功能時，由於第一次寫ajax與后端交互，遇到了幾個坑，現在逐一來分享。

詳情

1. 后端提供給我的一個用json傳遞內容的接口，接口地址類似於
   http://xxxxxxxxx&category=xx&count=xx
     category代表新聞的類型，一共有三種，不同的類型對應的列表不同，而count代表當前的頁面上已有的新聞條數。
     在與寫后端的老師的交流中，得知了老師在新聞列表界面是通過將類型放入url來實現的，一共三種url，於是他的三種新聞的列表地址就是
   http://xxxxxxxx/getlist/x
     最后一個字符（1/2/3）代表類型。於是我想到了一個奇巧淫技，通過BOM獲取當前的瀏覽器的url，然后正則獲取url的最后一位，於是解決了分類的問題。
      當前頁面的新聞的形式是一個無序列表，於是通過DOM獲取無序列表里的li元素，得到的是一個數組，該數組的長度就是現在頁面上的新聞的條數。

2. 接下來的坑是ajax，jQuery將ajax封裝了一遍，又將用json交互的ajax封裝了一遍，即getJSON，感覺查到的手冊里關於這一方法講的並不是很好，於是在博客園中找到了這篇文章Jquery getJSON方法分析（一） - 梅樺 - 博客園，看完以后豁然開朗。
     我這次的案例中后端的json格式是這樣的，
   json [{"url":"url1","title":"title1","pub_date":"1"},{"url":"url2","title":"title2","pub_date":"2"}]
   於是我的核心部分代碼如下：

    $.getJSON("http://xxxxxxx/getmorenews?category=" + category + "&count=" + count,
    function(news) {  
    if (news == "") { //判斷是否有內容  
            $(".ui-refresh").html('已無更多');//提示沒內容  
    } else {  
    $.each(news, function(k, v) {  
            var addHtml = ""; //每個循環都單獨來一遍  
            $.each(v, function(kk, vv) {  
                            switch (kk) {  
                            case "url": addHtml += '<li class="am-g am-list-item-dated"><a href="' + vv +'" class="am-list-item-hd ">';break;  
                            case "title": addHtml += vv +'</a><span class="am-list-date">';break;  
                            case "pub_date": addHtml += vv + '</span></li>';break;  
                            }  
                    });  
            $(".am-list").append(addHtml);  
            $(".ui-refresh").html('點擊加載更多'); //按鈕提示還沒結束呢  
    });  
    }//判斷部分end  
    });
   

3. 在chrome里調試時，還遇到了一個問題，ajax跨域請求被chrome攔截，在xss鈎子遍地都是的網上，禁止ajax跨域確實能大幅提高安全，當然在開發和調試時會帶來一些小問題。chrome報錯信息如下：
   XMLHttpRequest cannot load http://xxxxxxxx/getmorenews?category=2&count=15. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
   解決方案也很簡單，修改chrome的快捷方式的屬性中的目標，假設原來是
   "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"
   在后面添加
   --disable-web-security
   添加后是
   "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security
   注意空格。然后重啟chrome，chrome提醒命令行標記不受支持，安全性會下降就成功了。建議平時不要使用這個快加方式啟動chrome，會降低chrome防止xss攻擊的能力。

尾聲

  唔，你可能已經發現了，我用了amaze ui，一個類似bootstrap的框架。在對bootstrap審美疲勞后，發現了amaze ui，還是挺喜歡它的ui的，等段時間來用amaze ui 做一個hexo的主題。