jQuery中的Ajax使用方法

在jQuery中，封装了两种方式也提供了对Ajax的支持：

• 底层实现
• 高级实现

一、Ajax底层实现

jQuery.ajax(options) 或 $.ajax(options)

这个方法比较简单，只有一个options参数，要求是一个json格式的数据

options常用参数解析：

参数	说明
async	是否异步，true：异步，false：同步，默认为true
cache	是否缓存，（IE下的get请求才有缓存问题），true：缓存，false不缓存，默认为true
complete	当Ajax的状态码为4时所触发的回调函数
contentType	设置请求头
data	发送Ajax时所传递的参数，要求是一个字符串格式的数据
dataType	期待的返回值类型，text/xml/json
success	当Ajax状态码为4且响应状态码为200时所触发的回调函数
type	发送的http类型，get/post
url	请求的url地址

实现get请求

$(function(){
    $('#btn').bind('click',function(){
        $.ajax({
            type:'get',
            cache:false, // 解决Ajax在IE下get请求中的缓存问题
            url:'ajax.php',
            success:function(msg){
                alert(msg);
            }
        })
    })
});

<input type="button" id="btn" value="获取数据">

实现post请求

$(function(){
    $('#btn').bind('click',function(){
        var username = $('#username').val();
        $.ajax({
            type:'post',
            url:'ajax.php',
            data:'username='+username,
            success:function(msg){
                alert(msg);
            }
        })
    })
});

<input type="text" id="username">
<input type="button" id="btn" value="获取数据">

二、Ajax高级实现

jQuery.get(url,[data],[callback],tye) 或 $.get() ：发送Ajax中的get请求
jQuery.post(url,[data],[callback],type) 或 $.post() ：发送Ajax中的post请求

参数	说明
url	请求的url地址
data	发送Ajax请求时传递的参数，要求是一个字符串或json格式的数据
callback	当Ajax状态码为4且响应状态码为200时，所触发的回调程序
type	期待的返回值类型，text/xml/json，默认就是text

实现get请求

$(function(){
    $('#btn').bind('click',function(){
        $.get('ajax.php',function(msg){
            alert(msg);
        })
    })
});

运行后发现，虽然是ajax的高级实现，但是依然会执行缓存，可以通过如下方式解决：

$(function(){
    $('#btn').bind('click',function(){
        var data = {
            _:new Date().getTime() // 使用时间戳解决Ajax缓存
        };
        $.get('ajax.php',data,function(msg){
            alert(msg);
        })
    })
});

实现post请求返回xml格式数据

$(function(){
    $('#btn').bind('click',function(){
        // 接收参数
        var first = $('#first').val();
        var second = $('#second').val();
        var data = {
            first:first,
            second:second
        };
        $.post('ajax.php',data,function(msg){
            var jia = $(msg).find('jia').text();
            var jian = $(msg).find('jian').text();
            var cheng = $(msg).find('cheng').text();
            var chu = $(msg).find('chu').text();
            alert(jia+'->'+jian+'->'+cheng+'->'+chu);
        },'xml');
    })
});

第一个数：<input type="text" id="first">
第二个数：<input type="text" id="second">
<input type="button" id="btn" value="四则运算">

ajax.php

$first = $_POST['first'];
$second = $_POST['second'];

$jia = $first + $second;
$jian = $first - $second;
$cheng = $first * $second;
$chu = $first / $second;

$str = <<<EOT
    <root>
        <jia>$jia</jia>
        <jian>$jian</jian>
        <cheng>$cheng</cheng>
        <chu>$chu</chu>
    </root>
EOT;

header('Content-type:text/xml; charset=utf-8');
echo $str;

实现post请求返回jason格式数据

$(function(){
    $('#btn').bind('click',function(){
        $.post('ajax.php',function(msg){

            // 第一种遍历输出方式
            for(var i=0;i<msg.length;i++){
                alert(msg[i].name);
            }

            // 第二种遍历输出方式
            $(msg).each(function(i,item){
                alert(item.name);
            })
        },'json');
    })
});

<input type="button" id="btn" value="获取数据">

ajax.php

mysql_connect('localhost','root','123');
mysql_select_db('go');
mysql_query('set names utf8');

$sql = "select cid,name,url from go_navigation";
$res = mysql_query($sql);

$data = array();
while ($row = mysql_fetch_assoc($res)) {
    $data[] = $row;
}

echo json_encode($data);