加载异步数据

   使用传统的javascript来解决加载异步数据，部分代码如下：

    <script type="text/javascript">
            var objXmlHttp = null;//空的XmlHttp变量
            //浏览器的不同返回该变量的实体对象
            function CreateXMLHTTP(){
                if(window.ActiveXObject){
                    objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }else if(window.XMLHttpRequest){
                    objXmlHttp = new XMLHttpRequest();
                }else{
                    alert("初始化HTTP错误！")
                }
            }
            function GetSendData(){
                document.getElementById("divTip").innerHTML = "<img alt='' title='正在加载.....' src='img/loading.gif'/>";
                //设置发送地址变量，赋值
                var strSendUrl = "b.html·data="+Date();//清空缓存中已经加载的变量数据信息
                CreateXMLHTTP();//实例化XMLHttpRequest对象
                //open方法初始化XMLHttpRequest
                objXmlHttp.open("GET","b.html",true);
                objXmlHttp.onreadystatechange = function(){
                    if (objXmlHttp.readyState == 4) {
                        //如果请求完成加载
                        if (objXmlHttp.status == 200) {
                            //如果响应已成功
                            //显示获取的数据
                            document.getElementById("divTip").innerHTML = objXmlHttp.responseText;
                        }
                    }
                }
                objXmlHttp.send();//发送设置的请求
            }  
        </script>

原生js代码容易理解，但代码不是很理想，不简洁。

jQuery的load()可以明了的表达以上功能，代码如下：

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#button").click(function(){
                    $("#divTip").load("b.html");
                });
            });
        </script>

一目了然，代码少了许多。使用load()可以快速加载数据到页面内，但有时候需要对获取得的数据进行处理，虽然load()可以将获取得内容进行遍历处理，但是获取的到的内容必须先插入页面内才能进行处理，因此执行效率不高。那么我们将获取得数据另存为一种轻量级的数据交互格式JSON。

在jQuery中有一个全局函数getJSON，用于调用JSON格式的数据。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#button").click(function(){
                    //打开文件，通过回调函数处理获得数据
                    $.getJSON("UserUrl.json",function(data){
                        $("#divTip").empty();//清空标记的内容
                        var strHTML = "";//初始化保存内容变量
                        //遍历获得数据
                        $.each(data, function(InfoIndex,Info) {
                            strHTML +="姓名："+Info["name"]+"<br/>";
                            strHTML +="性别："+Info["sex"]+"<br/>";
                            strHTML +="邮箱："+Info["email"]+"<hr/>";
                        });
                        $("#divTip").html(strHTML);
                    })
                })
            })
        </script>

转载于:https://my.oschina.net/u/3611791/blog/1476220