使用 jQuery 实现 Ajax

jQuery底层实现了XMLHttpRequest对象以及其包含的 open()、send()等方法，使用jQuery框架，可以很方便实现Ajax数据传输。

下面说下jQuery中与Ajax有关的三个方法：load(),get()/post(),getJSON().

由于URL目标文件格式的不同，可以分为三种传输格式类别：HTML、XML、JSON。可以参考上一篇博客： Ajax之三种数据传输格式
而对应的这三种方法分别解析这三种数据格式，根据回调函数中data返回的数据格式，进行不同的选择。其中load()由于没有回调函数，响应数据直接加载，适用于将HTML格式数据直接加载到DOM节点树上。get()/post()有回调函数，其响应数据格式为URL目标文件的源格式，适用于三种传输格式，一般传输格式为世界语XML时使用。getJSON()同样有回调函数，返回的data数据为JSON格式，因此在URL目标文件为JSON格式时适用。

此处只提了主要部分，更详细的说明请参见：jQuery API 中文文档 http://www.jquery123.com/

• load(url,args)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src="script/jquery-3.2.1.js"></script>
<script type="text/javascript">

    $(function(){
    // 使用load方法处理Ajax
        $("a").click(function(){
            var url = this.href + " h3";    // jQuery筛选器，可以在URL后面加上需要显示的DOM节点，用空格分开。
            var args = {"time":new Date()};     //
            $("#details").load(url,args);  // 带入参数，防止页面缓存的出现。load()方法带入参数，为该节点载入URL指定的结果
            return false;   // 禁止链接点击跳转
        });
    });
</script>
</head>
<body>
    <div align="center">
        <h1>People</h1>
        <ul>
            <li><a href="files/andy.html">Andy</a></li>
            <li><a href="files/richard.html">Richard</a></li>
            <li><a href="files/jeremy.html">Jeremy</a></li>
        </ul>
        <div id="details"></div>
    </div>
</body>
</html>

• $.get(url,args,function(data){})与$.post(url,args,function(data){})
  其中需要说明的是，第三个参数为回调函数，data表示当数据传输成功时，url目标结果的数据格式。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript" src="script/jquery-3.2.1.js"></script>

<script type="text/javascript">
    $(function(){
        $("a").click(function(){
            var url = this.href;
            var args = {"time":new Date()};

         // $.post(url,args,function(data){
            $.get(url,args,function(data){
                var name = $(data).find("name").text();  // 返回的data为XML格式，此处用$(data)将其封装为jQuery对象，再从该对象中找子节点的文本值。
                var email = $(data).find("email").text();
                var website = $(data).find("website").text();
                // 将提取出的属性值以特定的格式 添加到指定的DOM树中
                // <h2><a href="mailto:[email]">[name]</a></h2>
                // <a href="[website]">[website]</a>
                $("#details").empty()
                                .append("<h2><a href='mailto:"+ email +"'>"+ name +"</a></h2>")
                                .append("<a href='"+ website +"'>"+ website +"</a>");
            });

                // 返回的data为JSON格式时，同样可以适用
                /*
                $.get(url,args,function(data){     
                    var name = data.person.name;
                    var email = data.person.email;
                    var website = data.person.website;
                    // <h2><a href="mailto:[email]">[name]</a></h2>
                    // <a href="[website]">[website]</a>
                    $("#details").empty()
                                    .append("<h2><a href='mailto:"+ email +"'>"+ name +"</a></h2>")
                                    .append("<a href='"+ website +"'>"+ website +"</a>");
                },"JSON");   // 需指明其get到的数据格式为JSON
                */

            return false;
        });
    })
</script>
</head>
<body>
    <div align="center">
        <h1>People</h1>
        <ul>
            <li><a href="files/andy.xml">Andy</a></li>
            <li><a href="files/richard.xml">Richard</a></li>
            <li><a href="files/jeremy.xml">Jeremy</a></li>
        </ul>
        <div id="details"></div>
    </div>
</body>
</html>

• getJSON(url,args,function(data){}) data返回结果为JSON对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript" src="script/jquery-3.2.1.js"></script>

<script type="text/javascript">
    $(function(){
        $("a").click(function(){
            var url = this.href;
            var args = {"time":new Date()};

            // function:回调函数，当响应结束时，回调函数被触发，响应结果在data中。
            $.getJSON(url,args,function(data){     // 此处的data返回结果为JSON对象
                var name = data.person.name;   // 通过JSON对象直接调用属性值
                var email = data.person.email;
                var website = data.person.website;

                // <h2><a href="mailto:[email]">[name]</a></h2>
                // <a href="[website]">[website]</a>
                $("#details").empty()
                                .append("<h2><a href='mailto:"+ email +"'>"+ name +"</a></h2>")
                                .append("<a href='"+ website +"'>"+ website +"</a>");
            });
            return false;
        });
    })
</script>
</head>
<body>
    <div align="center">
        <h1>People</h1>
        <ul>
            <li><a href="files/andy.js">Andy</a></li>
            <li><a href="files/jeremy.js">Jeremy</a></li>
            <li><a href="files/richard.js">Richard</a></li>
        </ul>
        <div id="details"></div>
    </div>
</body>
</html>