模仿百度新聞列表底部的「加載更多」

前言

  自從上個月來到了學校的信息化中心實習後自由安排的時間愈來愈少，遂很久沒來更新博客了。
  昨天在完成一個模仿手機端百度新聞列表底「點擊加載更多」的功能時，因爲第一次寫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的主題。