XMLHttpRequest ajax 随笔

 

原生ajax 请求：

function loadXMLDoc() {
    var xhr;
    var myJson = "";
    var html = "";
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            myJson = xhr.responseText;
            // var my = eval('(' + myJson + ')');
            var my = JSON.parse(myJson);
            for (var i = 0; i < my.myData.sites.length; i++) {
                html += "<p>" + my.myData.sites[i].name + my.myData.sites[i].url + "</p>";
            }
            document.getElementById('myDiv').innerHTML = html;
        }
    }
    xhr.open("GET", 'js/myData.json', true);
    xhr.send();
}

//jQuery插件支持的转换方式：

$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象

浏览器支持的转换方式(Firefox，chrome，opera，safari，ie9，ie8)等浏览器：

JSON.parse(jsonstr); //可以将json字符串转换成json对象
JSON.stringify(jsonobj); //可以将json对象转换成json对符串

Javascript支持的转换方式：

eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号
注：ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象，但不推荐这些方式，这种方式不安全eval会执行json串中的表达式。

 

jquery ajax 请求：

$(document).ready(function() {
    var myBtn = $("#myBtn");

    myBtn.on('click', function(data) {
        $.ajax({
            url: 'js/myData.json',
            type: 'GET',
            dataType: 'json',
            data: {},
            beforeSend: function() {
                $("#loading").show();
            },
            success: function(data) {
                var json = eval(data.myData);
                var html = "";
                $.each(json, function(index, val) {
                    console.log(index);
                    for (var i = 0; i < val.length; i++) {
                        html += "<p>" + val[i].name + val[i].url + "</p>";
                    }
                });

                $('.myContent').html(html);
            },
            complete: function() {
                $("#loading").hide();
            },
            error: function(json) {
                alert("加载失败");
            }
        });
    });
});

// myData.json

{
    "myData": {
        "sites": [{
            "name": "菜鸟教程",
            "url": "www.runoob.com"
        }, {
            "name": "google",
            "url": "www.google.com"
        }, {
            "name": "微博",
            "url": "www.weibo.com"
        }]
    }
}

 http://blog.csdn.net/zhoucheng05_13/article/details/53609952