jQuery -- AJAX

jQuery中的ajax非常简单，根据请求方式的不同可以分为两种，分别是get与post。

GET

get请求是最简单的方法，通常在初学web中使用的都是get请求的方式，这种请求方式的参数都跟在url地址的后面，简单易懂。
格式：

$.get(url,callback)

示例：

$(document).ready(function(){
    $("#b_ajax").click(function(){
        $.get("./index.class.php?name=LJL",function(data,status){
            if(status == "success"){
                $(".showA").html(data);
            }else{
                $(".showA").html("sorry,error...");
            }
        });
    });
});

请求的index.class.php文件内容为：

<?php
$name = $_GET['name'];
if(!empty($name)){
    echo 'hello,'.$name;
}else{
    echo 'welcome...';
}

这就是一个简单的GET方式请求，向服务器端发送了数据，接收&显示服务器端返回的信息。

POST

在工作中，get出现的频率相对少了许多，更多的还是使用post来进行，post相对于get来说，安全性好（至少参数看不到），并且可以传送远超get方式的大数据量的数据。
格式：

$.post(url,data,callback)

示例：

$(document).ready(function(){
    $("#b_ajax").click(function(){
        $.post("./index.class.php?",{"name":"LJL","addr":"BJ"},function(data,status){
            if(status == "success"){
                $(".showA").html(data);
            }else{
                $(".showA").html("sorry,error...");
            }
        });
    });
});

请求的index.class.php文件内容为：

$name = $_POST['name'];
$addr = $_POST['addr'];
if(!empty($name) && !empty($addr)){
    echo 'hello,address:'.$addr.';name:'.$name;
}else{
    echo 'welcome...';
}

和get相似，这是一个最基本的post方式请求。

JSON

现在前后端分离的大趋势之下，以及API接口的使用，不同环节之间的数据传输格式除了极简的数据还会用到这种无始数据传输的方式之外，大部份已经改用JSON的格式来进行数据传输。
jQuery中的ajax当然也可以处理json。
先看一下服务器端将要返回的json数据：

<?php
$buf = array(
    'data'=>array(
        'name'=>'LJL',
        'age'=>'27',
        'score' => array(
            99,96,92,94
        ),
        'birth'=>'1989'
    ),
    'status'=>0,
    'info'=>'It is success!'
);
echo json_encode($buf);

现在再看一下jQuery的请求：

$(document).ready(function(){
    $("#b_ajax").click(function(){
        $.getJSON("./index.class.php",function(data){
            var str = "";
            for(var i=0,l=data.data.score.length; i<l; i++){
                str += "<li>"+data['data']['score'][i]+"</li>";
            }
            str = "<ul>"+str+"</ul>";
            $(".showA").html(str);
            $(".showB").html(data.data.name+","+data.data.birth);
        });
    });
});

这段jQuery的请求处理代码，分别展示了如何处理返回的json数据中的对象属性、数组数据处理。