ajax數(shù)據解析及函數(shù)編程

1、函數(shù)式編程

//什么是函數(shù)編程由函數(shù)作為事件、功能、方法處理的中心(主要角色)。
//函數(shù)是js的一級公民:除了完成事件處理、基本運算,還可以作為另一個函數(shù)參數(shù)傳遞,返回值。

2、類庫的使用

// underscore類庫是一個擴展js函數(shù)功能類庫,通過調用這個類庫中的相關函數(shù),可以快
  捷的實現(xiàn)某些js原生函數(shù)不具備的功能。
        
underscore類庫把所有的功能函數(shù)當做“_”對象的方法。如果需要使用某一個功能函
數(shù),則必須通過訪問對象方法的形式獲取到該函數(shù)
//          var a = [1, 2, 3];
//          var b = _.each(a, function (num,a,b){console.log(num + 1)});
//          
//          console.log(b);

    
//      var a = [1, 2, 3];
//      var b = _.map(a, function(num){ return num * 3; });
//      
//      console.log(b);

    var a =  _.first([5, 4, 3, 2, 1], 3);
    console.log(a);

3、請求并解析JSON數(shù)據

<script type="text/javascript" src="ajax.js"></script>
    
<script type="text/javascript">
// 拼接請求參數(shù)
var obj = {
    method: 'GET',
    url: 'car.json',
    data: '',
    successFun: successFun,
    failFun: failFun
};

// 調用AJAX請求函數(shù)
ajax(obj);

// 請求成功的回調函數(shù)
function successFun (data) {

    // 解析請求下來的數(shù)據
    // 把返回的json數(shù)據轉換為js對象(對象可以通過屬性獲取到值)
    var resultObj = JSON.parse(data);

    // 獲取到listContents屬性下的數(shù)組(展示在頁面中的數(shù)據就保存在這個數(shù)組中)
    var contentsArray = resultObj.ListContents;
    console.log(contentsArray);
    
    // 在js中for...in...遍歷時,自定義的變量中保存的是數(shù)組下標
    var arr = new Array();
    // 拿到的是分組的汽車數(shù)據
    for (var i in contentsArray) {
        var sectionObj = contentsArray[i];
        
        // 繼續(xù)解析分組信息的對象,找到該分組下的汽車信息
        var carsArray = sectionObj.GroupInfo;
        // 繼續(xù)遍歷汽車信息的數(shù)組,拿到數(shù)組中的汽車對象
        for (var j in carsArray) {
            var carObj = carsArray[j];
            // 把解析出來的汽車數(shù)據轉存進大數(shù)組中
            arr.push(carObj);
        }
    }
    
    // 檢測arr數(shù)組中汽車信息的數(shù)量
    console.log(arr);
    
    // 解析arr數(shù)組,提取出汽車的信息
    for (var k in arr) {
        var busObj = arr[k];
        console.log(busObj);
        
        // 創(chuàng)建DOM節(jié)點,把數(shù)據拼接進對應的節(jié)點中
        // 創(chuàng)建‘行’節(jié)點,每循環(huán)一次新建一行
        var tr = document.createElement('tr');
        // 創(chuàng)建列節(jié)點
        var tdID = document.createElement('td');
        var tdName = document.createElement('td');
        var tdLogo = document.createElement('td');
        // 把解析出來的數(shù)據添加進對應的節(jié)點中
        tdID.textContent = busObj.BrandID;
        tdName.innerText = busObj.MainBrandName;
        
        // 創(chuàng)建出存放圖片的img標簽
        var img = document.createElement('img');
        img.src = busObj.imgURL;
        // 把圖片標簽拼接進tdLogo標簽中
        tdLogo.appendChild(img);
        
        // 把td標簽拼接進tr中
        tr.appendChild(tdID);
        tr.appendChild(tdName);
        tr.appendChild(tdLogo);
        
        // 把tr標簽拼接進文檔流(拼接進table標簽)
        var table = document.getElementById('table');
        table.appendChild(tr);
    }
}

// 請求失敗的回調函數(shù)
function failFun (data) {
    alert(data);
}

</script>

3、使用對象作為參數(shù)傳遞

<!-- 在script標簽中引入外部js文件,只有當這一對標簽執(zhí)行完畢后,外部文件才能被引入
(一個習慣:如果script標簽是用來引入外部文件的,則不要在這對標簽中寫任何代碼)-->
    <script type="text/javascript" src="ajax.js"></script>
    
    <script type="text/javascript">
        // 通過封裝的函數(shù)來進行ajax請求
        
        // 在創(chuàng)建請求函數(shù)多需要的對象時,對象中的屬性名、方法名必須要和函數(shù)
中使用的屬性名嚴格匹配,否則函數(shù)中將獲取不到正確的屬性值、方法函數(shù)
        var obj = {
            method: 'GET',
            url: 'index.xml',
            data: '',
            successFun: function  (data) {
//                  alert(data);
                var root = data.getElementsByTagName('roots')[0];
//                  console.log(root);
                
            },
            
            failFun: function (data) {
                alert(data);
            }
        };
        
        ajaxFun(abc);
    
    </script>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容