zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    理解inode
    贝叶斯公式与拼写检查器
    《C程序设计语言》第四章 函数和程序结构
    MIT《计算机科学与编程导论》课堂笔记
    很牛的牛顿迭代法
    开发一个小工具重温C#经典问题
    斯坦福《编程方法学》环境搭建及常见问题
    看Sybase官方手册学索引工作原理
    学习编程的方法、软件和工具
    大师里奇留给了我们什么
  • 原文地址:https://www.cnblogs.com/Alan2016/p/6600105.html
Copyright © 2011-2022 走看看