原生JS的xhr方法返回responseText的問題

這一篇主要是記錄作用，起因是昨天看到郵箱里有一封上周的郵件，被淹沒在了一堆垃圾郵件里，哈哈。這封郵件是一家IT公司發來的面試題，最近是有在投簡歷找工作啦，不過一般都是電話先聊聊，然后再約上門的，直接上郵件的，我還是第一次見。

郵件的內容大概就是：我們的需求是xxxxxxx，交互接口ajax是xxxxxx，xxxx,要做單手機版頁面，請完成后將文件發回到此郵箱，如果滿意的話會再郵箱通知。

本來我是不想理會的，但是想想需求又不難，之前也沒做過手機版的，而且現成的接口都給了，就拿來利用利用練練手。

好了，直接說回我的主題，寫好頁面模板，直接先跳過css，去js里寫邏輯的時候，我想了想，既然是面試，肯定要考原生js的，那我就干脆一點框架都不用，結果。。問題就來了。

照例寫

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status == 200){
            return xhr.responseText;
        }
    }
}

 

結果進行到responseText這一步的時候懵逼了，本來我的意圖是直接return 當參數的（似曾相識jQuery的套路），結果不對，我發現這個onreadystatechange只是封裝的啊，而且還是自動調用這個方法的，看來return回去的想法我還是太天真了，目前看只能直接在status這個判斷里面寫方法了，但是又想到有3個不同的接口要調，雖然都用get，但是還是有大量重復的代碼，

行吧，那還是再去封裝一個供調用的方法，把url和成功執行的函數都當做參數一樣傳進去，於是就有了它，其實就是仿jQuery里的，不過沒寫兼容啥的，這是參考某位博友寫的

var Ajax={
    get: function(url, fn) {
        var obj = new XMLHttpRequest();  // XMLHttpRequest對象用於在后台與服務器交換數據          
        obj.open('GET', url, true);
        obj.onreadystatechange = function() {
            if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) { // readyState == 4說明請求已完成
                fn.call(this, obj.responseText);  //從服務器獲得數據
            }
        };
        obj.send();
    }

到目前為止，我以為可以快快樂樂的開始調接口，寫邏輯了，結果接口是沒問題，成功返回后，並且我用console.log也看到一堆數據都是沒問題的。

問題出在我要去操作數據的時候，res.part   ( part是已說明的對象名稱)，結果是undefined，喔，應該是他返回的字符串，我應該轉成對象的，

好的，那就用   var data = json.parse(res);

結果直接報錯了，看了英文的翻譯，內容大概就是 readyState里沒有這個json方法，我一臉懵逼，不能用？這是什么鬼，那我還能通過什么手段呢，

但是也沒有多糾結，既然這樣的話，不如先換成jquery的API試試吧，畢竟在上面也花了太久時間了，不能一點效果也沒有，

結果在$.ajax里，我寫到下面這段的時候

success: function(res)

照常也寫一個console輸出來看看，恩，數據沒問題，直接寫剛才的 var data = data.part ，再輸出data看看，

還是undefined！！！

什么情況，datatype不是能根據json自動轉換對象的嗎？？？？

失效了？？

奇怪，好吧，為了看看是不是失效了，再去用Object.prototype.toString(data);

這是我能想到最嚴格的驗證方法了，結果就是String !

好吧，看來，這個面試題果然有坑，難的根本不是業務邏輯，而是處理這堆數據的方法，這也是我之前沒見到過的，只能百度一下看看有沒有這樣的朋友了

OK，找到並解決了，原來是用eval()！這里就不復制他的說法了，直接丟出他文章的鏈接：http://www.cnblogs.com/fenglie/articles/5010254.html

最后我的成品段落也就變成了這樣

success : function(res){
        var data=eval("("+res+")").SERVERPARTObject;
        var partArray = [];
        for(var i = 0;i<data.length;i++){
            partArray.push(data[i].SERVERPART_NAME);
        };
        var html = '<option>請選擇</option>';
        for(var a = 0; a<partArray.length;a++){
            html+='<option>'+partArray[a]+'</option>'
        };
        var select = document.getElementById('serverPart');
        select.innerHTML = html;
    }

 好吧，還是用了jquery，不過既然都已經有解決方案了，那回到原生的也沒問題，不過今天已經累了，就先不折騰了