jQuery 的Ajax应用（1）--学习篇，内附实例

Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="l6.aspx.cs" Inherits="jQuery.Learning.l6" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <script src="jquery.js" type="text/javascript"></script>

    <style type="text/css">
        .letters
        {
            float: left;
            width: 260px;
        }
        .letter
        {
            margin: 10px;
        }
        .letter h3
        {
            font-weight: bold;
        }
        .button
        {
            width: 100px;
            text-align: center;
            padding: 10px;
            background-color: #fff;
            border-top: 3px solid #888;
            border-left: 3px solid #888;
            border-bottom: 3px solid #444;
            border-right: 3px solid #444;
        }
        .letter ul
        {
            list-style: none;
            padding: 0;
            margin: 0 1em;
        }
        #dictionary
        {
            float: left;
            width: 500px;
        }
        .entry
        {
            padding: 1em 0em;
            border-bottom: 1px #555 solid;
        }
        .entry .term
        {
            display: inline;
            font-weight: bold;
        }
        .entry .part
        {
            padding: 0 1em;
            display: inline;
            font-style: italic;
        }
        .entry .definition
        {
            padding: .5em;
        }
        .entry .definition .quote
        {
            margin: .5em 2em;
            padding: 0 1em;
            color: #333;
            border-left: 2px #aaa solid;
        }
        .entry .definition .quote .quote-author
        {
            font-weight: bold;
            margin-left: 20em;
        }
        #loading
        {
            border: 1px #000 solid;
            background-color: #eee;
            padding: 20px;
            margin: 100px 0 0 200px;
            position: absolute;
            display: none;
        }
        .highlighted
        {
            background-color: #dfd;
            font-style: italic;
        }
    </style>

    <script type="text/javascript">
        // 从服务器异步加载htm到页面中的方法
        $(document).ready(function() {
            $('#letter-a .button').click(function() {
                //当单击时候首先隐藏目录div，然后加载htm，之后使用回调函数，以改变透明度的形式显示目录div
                $('#dictionary').hide().load('l6a.htm', function() { //成功回调函数，意思是说，成功了之后会出发的函数，下面应用的都是成功回调
                    $(this).fadeIn();
                });

            });
        });
        //加载json（javascript对象表示法）
        $(document).ready(function() {
            $('#letter-b .button').click(function() {
                //当点击按钮时候，使用全局函数$.getJSON获得指定文件的脚本对象数组结构，第一个参数是存储对象结构的文件名称，
                //是异步回调方法，其中的data参数是异步加载返回的对象结构
                $.getJSON('l6b.json', function(data) {
                    //彻底清空div内容
                    $('#dictionary').empty();
                    //$.each 函数和普通的each函数含义上相同，遍历，但第一个参数是数组，第二个参数是一个回调函数，每次获得一个新的数组元素的时候调用
                    //回调函数的参数分别代表，当前索引和当前项
                    $.each(data, function(entryIndex, entry) {
                        var html = '<div class="entry">';
                        html += '<h3 class="term">' + entry['term'] + '</h3>';
                        html += '<div class="part">' + entry['part'] + '</div>';
                        html += '<div class="definition">';
                        html += entry['definition'];
                        //如果当前项目存在quote键则执行
                        if (entry['quote']) {
                            html += '<div class="quote">';
                            //遍历quote数组
                            $.each(entry['quote'], function(lineIndex, line) {
                                html += '<div class="quote-line">' + line + '</div>';
                            });
                            //如果存在author键执行
                            if (entry['author']) {
                                html += '<div class="quote-author">' + entry['author'] + '</div>';
                            }
                            html += '</div>';
                        }
                        html += '</div>';
                        html += '</div>';
                        //向div中追加刚才拼接好的html内容
                        $('#dictionary').append(html);
                    });
                });
            });
        });

        //动态注入js，并执行他
        $(document).ready(function() {
            $('#letter-c .button').click(function() {
                //全局加载，加载后会拥有全局环境中变量和函数的访问权，加载的js脚本会自动运行，注：加载的文件扩展名不重要，主要是内容
                $.getScript('l6c.js');
            });
        });

        //动态加载XML文件
        $(document).ready(function() {
            $('#letter-d .button').click(function() {
                //get的功能是简单的通过url复制文本的内容，由于MIME，表示此扩展名为XML文件，所以会获得一个XML dom 树
                $.get('l6d.xml', function(data) {
                    $('#dictionary').empty();
                    //找到所有的entry，遍历每一个entry元素
                    $(data).find('entry').each(function() {
                        //复制当前entry项
                        var $entry = $(this);
                        var html = '<div class="entry">';
                        html += '<h3 class="term">' + $entry.attr('term') + '</h3>'; //获得指定属性的所对应的值
                        html += '<div class="part">' + $entry.attr('part') + '</div>';
                        html += '<div class="definition">'
                        html += $entry.find('definition').text();
                        var $quote = $entry.find('quote');
                        if ($quote.length) {
                            html += '<div class="quote">';
                            //遍历每一个quote元素中的line
                            $quote.find('line').each(function() {
                                html += '<div class="quote-line">' + $(this).text() + '</div>'; //获得这个元素的文本
                            });
                            //如果存在author属性
                            if ($quote.attr('author')) {
                                html += '<div class="quote-author">' + $quote.attr('author') + '</div>';
                            }
                            html += '</div>';
                        }
                        html += '</div>';
                        html += '</div>';
                        $('#dictionary').append($(html));
                    });
                });
            });
        });

        //Ajax，加载服务器生成的html Get请求
        $(document).ready(function() {
            $('#letter-e #get').click(function() {
                //获得当前页面的QueryString参数term 值为a标签的文本，第三个参数是回调函数，data是返回的值，
                $.get('?', { 'term': $(this).text() }, function(data) {
                    //将返回值以html方式，加入到div中
                    $('#dictionary').html(data);
                });
                //防止打开新的链接，不需返回false
                return false;
            });
        });

        //Ajax，加载服务器生成的html Post请求,注释看get
        $(document).ready(function() {
            $('#letter-e #post').click(function() {
                $.post('?', { 'term': $(this).text() }, function(data) {
                    $('#dictionary').html(data);
                });
                return false;
            });
        });

        //Load加载简化了操作，效果与上面一样，Load会默认以Post请求方法提交
        $(document).ready(function() {
            $('#letter-e #load').click(function() {
                $('#dictionary').load('?', { 'term': $(this).text() });
                return false;
            });
        });

        //表单提交操作的Ajax处理
        //1.串行化为QueryString的方法接收
        //        $(document).ready(function() {
        //            $('#letter-f form').submit(function() {
        //                $.get('?', $(this).find('input').serialize(), function(data) {
        //                    $('#dictionary').html(data);
        //                });
        //                return false;
        //            });
        //        });

        //2.Form方式接收，同上面的From相似
        $(document).ready(function() {
            $('#letter-f form').submit(function() {
                $('#dictionary').load('?', { 'info': $('input[name="info"]').val() });
                return false;
            });
        });

        //Ajax 为用户提供反馈，利用ajaxStart和ajaxStop 方法，演示ajax跟踪相关事件的回调，他们两个方法可以添加给jQuery对象在Ajax前后回调
        //但对与Ajax的监控，本身是全局性的
        $(document).ready(function() {
            $('#loading').ajaxStart(function() {
                $(this).show();
            }).ajaxStop(function() {
                $(this).hide();
            });
        });

        //为Ajax全局，包括后加载dictionary 的中的h3 绑定事件
        $(document).ready(function() {
            $('body').click(function(event) { //如果单击的是h3就切换，为body添加这个单击事件可以保证后加载部分的h3标签同样可以用，
                //如果为h3添加，就仅能对初始化时候的h3有效，这种对body添加的方法，使用了事件冒泡原理
                if ($(event.target).is('h3')) {
                    $(event.target).toggleClass('highlighted');
                }
            });
        });

        //如果直接为h3添加单击事件，动态的为新加载部分添加单击事件，而且需要限定绑定事件的作用域，否则会重复添加
        // $(document).ready(function() {
        //   var bindBehaviors = function(scope) {
        //     $('h3', scope).click(function() {
        //       $(this).toggleClass('highlighted');
        //     });
        //   }
        //  为这个方法传入当前This用来限定当前的范围
        //   bindBehaviors(this);
        //
        //   $('#letter-a .button').click(function() {
        //     $('#dictionary').hide().load('l6a.htm', function() {
        //       bindBehaviors(this);
        //       $(this).fadeIn();
        //     });
        //   });
        // });

        //        结尾：
        //        在浏览器使用Ajax，总是会遇到跨域访问权限的问题，解决的方法有这么几种思路，可以参考
        //        1.用服务器来预处理这些数据，并存储在服务器上供客户端调用
        //        2.将远程服务器脚本加载到本地，脚本要提供接口和指定操作,明确的像你的文档提供数据才行，这样通过这个脚本中提供的XMLHTTPRequest，
        //            可以获得指定服务器的数据，Google Map API 就是使用了这个道理，看下面
        //        $(document.createElement('script')).attr("src", 'http://www.finehappy.com/example.js').appendTo('head');
        //        3. <iframe>标签解决，思路和2条一样




    </script>

</head>
<body>
    <div id="container">
        <div id="header">
            <h2>
                新年祝福</h2>
            <div class="author">
                冯瑞涛</div>
        </div>
        <div class="letters">
            <div class="letter" id="letter-a">
                <h3>
                    异步加载 html</h3>
                <div class="button">
                    祝福</div>
            </div>
            <div class="letter" id="letter-b">
                <h3>
                    异步加载 json</h3>
                <div class="button">
                    祝福</div>
            </div>
            <div class="letter" id="letter-c">
                <h3>
                    异步注入 js</h3>
                <div class="button">
                    祝福</div>
            </div>
            <div class="letter" id="letter-d">
                <h3>
                    异步加载XML</h3>
                <div class="button">
                    祝福</div>
            </div>
            <div class="letter" id="letter-e">
                <h3>
                    jQuery Ajax for .Net
                </h3>
                <ul>
                    <li>Ajax加载<a id="get" href="">get</a>html文本</li>
                    <li>Ajax加载<a id="post" href="">post</a>html文本</li>
                    <li>Ajax加载<a id="load" href="">load</a>html文本</li>
                </ul>
            </div>
            <div class="letter" id="letter-f">
                <h3>
                    表单提交异步</h3>
                <form id="form1" runat="server">
                <input type="text" name="info" value="" id="info" />
                <input type="submit" name="submit" value="发送" id="submit" />
                </form>
            </div>
        </div>
        <div id="loading">
            服务器处理中，请稍后。
        </div>
        <div id="dictionary">
        </div>
    </div>
</body>
</html>

Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace jQuery.Learning
{
    public partial class l6 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //获取Get穿过来的参数
            if (Request.QueryString["term"] == "get")
            {
                string strReturn = "<div class='entry'>GET 请求异步Ajax调用html元素返回的值</div>";
                Response.Write(strReturn);
                Response.End();
            }

            //获取post传递过来的参数
            if (Request.Form["term"] == "post")
            {
                string strReturn = "<div class='entry'>Post 请求异步Ajax调用html元素返回的值</div>";
                Response.Write(strReturn);
                Response.End();
            }

            //获取post传递过来的参数 Load加载
            if (Request.Form["term"] == "load")
            {
                string strReturn = "<div class='entry'>Post 请求异步Ajax调用html元素返回的值 Load方法加载</div>";
                Response.Write(strReturn);
                Response.End();
            }

            //获取post传递过来的参数 Load加载
            if (Request.Form["info"] != null || Request.QueryString["info"] != null)
            {
                string strReturn = "<div class='entry'>你输入的是" + Request.Form["info"] + Request.QueryString["info"] + "</div>";
                Response.Write(strReturn);
                Response.End();
            }

        }
    }
}

Code
<div class="entry">
    <h3 class="term">
        动态加载html</h3>
    <div class="part">
        贺词</div>
    <div class="definition">
        <p>祝你一帆风顺，二龙腾飞，三羊开泰，四季平安，五福临门，六六大顺，七星高照，八方来财，九九同心，十全十美。</p>
        <p>新的1年开始，祝好事接2连3，心情4季如春，生活5颜6色，7彩缤纷，偶尔8点小财，烦恼抛到9霄云外！请接受我10心10意的祝福。祝新春快乐！</p>
        <p>春天的钟声响，新年的脚步迈，祝新年的钟声，敲响你心中快乐的音符，幸运与平安，如春天的脚步紧紧相随！春华秋实，我永远与你同在！</p>
    </div>
</div>

Code
//数组中包着数组，数组中再有几个键值对
//结构[{"a":'1',"b":["1","2"]},{}]不能出错
[
  {
    "term": "动态加载json",
    "part": "祝你",
    "definition": "在新的一年里",
    "quote": [
      "身体健康",
      "事事如意",
      "恭喜发财",
      "牛年大吉"
    ],
    "作者": "Jorace"
  },
  {
    "term": "佳月",
    "part": "祝你",
    "definition": "新年快乐"
  }
]

Code
//数组中包着数组，数组中再有几个键值对
//结构[{"a":'1',"b":["1","2"]},{}]不能出错
var entries = [
  {
    "term": "动态注入js",
    "part": "祝你",
    "definition": "在新的一年里",
    "quote": [
      "身体健康",
      "事事如意",
      "恭喜发财",
      "牛年大吉"
    ],
    "作者": "Jorace"
  },
  {
    "term": "佳月",
    "part": "祝你",
    "definition": "新年快乐"
  }
]
var html = '';

$.each(entries, function() {
  html += '<div class="entry">';
  html += '<h3 class="term">' + this['term'] + '</h3>';
  html += '<div class="part">' + this['part'] + '</div>';
  html += '<div class="definition">' + this['definition'] + '</div>';

  html += '</div>';
});

$('#dictionary').html(html);

Code
<?xml version="1.0" encoding="utf-8" ?>
<entries>
    <entry term="异步加载XML" part="祝福">
        <definition>
            新的一年里
        </definition>
        <quote author="冯瑞涛">
            <line>身体健康</line>
            <line>万事如意</line>
        </quote>
    </entry>
    <entry term="佳月" part="祝福">
        <definition>
            佳月的祝福
        </definition>
    </entry>

</entries>

YanYAN's Tech Space 没有人可以随随便便成功！

About