jQuery中异步加载XML文档（ajax在jQuery中的运用学习第五天）

        有时我们会遇到使用XML文档保存数据的情况，对于这种格式的数据，jQuery中使用全局函数$.get()进行访问，其调用语法格式为：$.get(url,[data],[callback],[type])

       其中，参数url表示等待加载的数据地址，可选项[data]参数表示发到服务器的数据，其格式为key/value，可选项[callback]参数表示加载成功时执行的回调函数，可选项[type]参数表示为key/value，可选项[type]参数表示返回数据的格式，如HTML,XML,JS,JSON,TEXT等。

        （1）功能描述

           将人员资料信息保存到一个XML格式文档UserInfo.xml中，另外新建一个页面，在页面里单击“获取数据”按钮，通过全局函数$.get()打卡XML格式的文档UserInfo.xml，并获取文档中的全部数据，显示在页面中。

        （2）实现代码

          新建一个HTML文件xxx.html（get实现异步获取XML文档数据）

          <script type="text/javascript">src="Jscript/jquery"</script>

          <script    type="text/javascript">

                  $(function(){

                                $("#Button1").click(function(){    //按钮单击事件

                                            //打开文件，并通过回调函数处理获取的数据

                                           $.get("UserInfo.xml",function(data){

                                                    $("#divTip").empty();                //先清空标记中的内容

                                                    var strHTML = "";                    //初始化保存内容变量

                                                    $(data).find("user")

                                                        .each(function(){        //遍历获取的数据

                                                                    var  $strUser  =  $(this);

                                                                    strHTML  +=  "姓名："  +  $strUser.fin("name").text()  +  "<br>";

                                                                    strHTML  +=  "性别："  +  $strUser.fin("sex").text()  +  "<br>";

                                                                    strHTML  +=  "邮箱："  +  $strUser.fin("email").text()  +  "<br>";

                                                        })

                                                        $("#divTip").html(strHTML);    //显示处理后的数据

                                            })

                                })

                    })

          </script>

另外，新建一个XML文件UserInfo.xml,该文件的代价内容如下所示：

           <?xml    version="1.0"    encoding="utf-8"    ?>

           <Info>

                    <User    id="1">

                                <name>tgr</name>

                                <sex>man</sex>

                                <email>tao_guo_rong@163.com</email>

                    </User>

                    

                    <User    id="2">

                                <name>ljz</name>

                                <sex>woman</sex>

                                <email>xiaoli@163.com</email>

                    </User>

           </Info>

代码分析：

            在示例的JS代码中，先通过each（）方法遍历文档中的User节点，然后在遍历的过程使用find方法，查询该节点中的name，sex，email选项，并通过text（）方法获取各选项的值，最后，将各值以叠加的形势保存到变量strHTML，并显示在页面里。