jQuery之ajax技术的详细介绍

什么是ajax

AJAX（Asynchronous JavaScript and XML）即异步JavaScript和XML，是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，就能在不更新整个页面的情况下更新部分网页内容。

ajax的优点

• 无刷新更新页面，可以优化用户体验，提高用户满意度；
• 节省带宽，只有部分内容需要更新，减轻服务器压力；
• 请求处理较为迅速，减少用户等待时间；
• 支持异步和同步两种请求方式，可根据需要选择；
• 支持多种数据格式（如：XML、HTML、JSON等）。

jQuery中ajax的使用

在jQuery中，我们可以使用以下方法来发送ajax请求：

$.ajax({
    url: "test.php",  //请求的url地址
    type: "GET",   //请求方式（POST或GET）
    data: {name:"张三", age:18},   //请求所传参数
    dataType: "json",   //返回的数据格式
    success: function(data){   //请求成功时调用的回调函数
        console.log(data);
    },
    error: function(err){    //请求失败时调用的回调函数
        console.log(err);
    }
});

以上代码表示发送一个GET请求到test.php页面，传入name和age两个参数，并期望返回的数据格式是json格式。如果请求成功，将打印返回的数据（即success回调函数所接收的参数），如果请求失败，将打印失败原因（即error回调函数所接收的参数）。下面是一个更加详细的实例：

// HTML
<button id="btn">点击获取数据</button>
<ul id="list"></ul>

// JavaScript
$("#btn").click(function(){
    $.ajax({
        url: "data.php",
        type: "POST",
        data: {page:1},
        dataType: "json",
        success: function(data){
            var html = "";
            $.each(data, function(index, item){
                html += "<li>" + item.title + "</li>";
            });
            $("#list").html(html);
        },
        error: function(err){
            console.log(err);
        }
    });
});

以上代码表示在点击按钮时发送一个POST请求到data.php页面，并传入page参数，期望返回的数据格式是json格式。如果请求成功，将遍历接收到的数据并将每条数据的标题渲染为一个列表项添加到id为list的ul元素中，如果请求失败，将打印失败原因。