jQuery中的AJAX

主要分三部分讨论jQuery中的AJAX:

1, 加载异步数据,即如何从服务器上取得静态的数据.

2, 请求服务器数据,服务器动态数据的请求,实现数据的双向传递.

3, $.ajax() 方法.

加载异步数据

1,Load()方法

比如在文件一中想要在某个id为divTip的DIV域里调用文件二的数据,那么就可以:

$("#divTip").load("b.html");

当然,这个动作往往是要绑定到一个事件里的,比如.click();

2,getJSON()

比如在一个json文件里有一组数据:

{

        "name":"howk",

        "sex":"男",

        "email" : "example@qq.com"

}

那么就可以利用getJSON() 和 each() 来遍历它:

                $.getJSON("info.json", function(data) {
                        $("#divTip").empty();
                        var strHTML = "";
                        $.each(data, function(infoIndex, info) {
                                strHTML += infoIndex + "<br />";
                                strHTML += "姓名:" + info["name"] + "<br />";
                                strHTML += "性别:" + info["sex"] + "<br />";
                                strHTML += "邮箱:" + info["email"] + "<br />";
                        })
                        $("#divTip").html(strHTML);
                })

$.getScript()不能这样使用,他后面的函数是一个回调函数,例如:

$.getScript('example.js', function(){alert("successful!");});

而,$.getJSON()的第三个参数才是回调函数.

请求服务器数据

真正的AJAX就是体现在可以无刷新的动态请求服务器数据上,而这正是有意思的地方.

1,$.get()

还是直接拿例子说话,我们在一个静态页面上写一段JS脚本:

        $("#button1").click(function() {
                $.get(
                        "get_server.php",
                        {name: encodeURI($("#txtName").val())},
                        function(data) {
                                $("#divTip").empty().html(data);        
                        }
                )
        })

在服务器端的PHP文件:

$name = urldecode($_REQUEST['name']);
$html = '<div>';
if($name == 'howk') {
        $html .= '姓名:HOWK<br />';
        $html .= '职业:ITS.<br />';
} else {
        $html .= 'So what?';
}
$html .= '</div>';
echo $html;

参数简要说明: $.get('url', '向服务器发送的数据', '处理返回的数据').

好好理解一下,不多说明,往往就是这样,要靠自己去理解. 这样,知识就转化成你的了.

2,$.post()

$.post()也是带参数向服务器发送数据请求. 它和$.get()很多共同点,区别就是,GET方式不能传递大数据量,而且不是很安全.

格式和$.get()完全相同: $.post(url, [data], [callback], [type])

3,serialize()

像第一个例子中的{name: encodeURI($("#txtName").val())},这种方式比较直观,但是如果参数过多,就比较麻烦了,这时就该用serialize()序列化表单传送数据:

$("#txtName").serialize(),

而在服务器端还是要用urldecode()来接收的,不能用unserialize()函数, 另外接受时要对应表单中的name值.

$.ajax()方法

$.ajax()是jQuery中最底层的方法,也是功能最强的方法,前面介绍的全局函数都是在此基础上建立的.

现在做一个登录功能页面:

<div class="divFrame">
     <div class="divTitle">
          <span>用户登录</span>
     </div>
     <div class="divContent" id="divContent">
          <div class="clsShow">
               <div id="divError" class="clsError"></div>
               <div>名称：<input id="txtName" type="text" class="txt" /></div>
               <div>密码：<input id="txtPass" type="password" class="txt" /></div>
               <div>
                   <input id="btnLogin" type="button" value="登录" class="btn" />  
                   <input id="btnReset"  type="reset" value="取消" class="btn" />
               </div>
           </div>
      </div>
</div>

在另一个页面中请求他的数据,并且置入表单中:

$(function() {
        $.ajax({                                // 请求静态登录页面
                url: "main.html",
                dataType: "html",               
                success: function(HTML) {
                        $("#frmLogin").html(HTML);                                //将页面内容置入表单
                        $("#btnLogin").click(function() {                // 登录按钮单击事件
                                var strName = encodeURI($("#txtName").val());         // 获取用户名
                                var strPass = encodeURI($("#txtPass").val());        // 获取密码
                                // 开始发送数据
                                $.ajax({
                                        url: "login.php",
                                        dataType: "html",
                                        date: {txtName:strName, txtPass:strPass},        // 发送请求数据
                                        success: function(strValue) {                                // 成功登录后返回的数据
                                                if(strValue == "True") {
                                                        $(".clsShow").html("successful!");
                                                } else {
                                                        $("#divError").show().html("failed!");
                                                }
                                        }
                                })

                        })
                }
        })
})
</script>
</head>
<body>
<div>
<form id="frmLogin"></form>

Php页面就不再贴代码了. 就是返回一个标识.

这里可见,先加载了一个静态页面,又把静态页面数据传送到PHP, 然后接收返回值作出相应动作.

我们可以使用$.ajaxSetup() 来设置全局的$.ajax() 参数类型:

$.ajaxSetup({

Type: "get",                // 数据请求方式

Url: "info.xml",        

dataType: "xml"        // 服务器返回的数据类型

})

在后面的$.ajax()就可以使用上面这些统一的参数,而只设置success:等参数.

另外还有两个ajax全局事件:

$("#start").ajaxStart(function() {
                                        $(this).show();
                                });
                                $("#start").ajaxStop(function() {
                                        $(this).html("获取数据成功!").hide();
                                })

可设置发送时和成功后的动作.