原生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，不过既然都已经有解决方案了，那回到原生的也没问题，不过今天已经累了，就先不折腾了