jQuery Ajax基础应用【新手进】

Ajax在项目开发中是必不可少的一种创建交互式网页应用的网页开发技术。它包含了多种技术：

1、XHTML+CSS
2、DOM
3、XML 和 XSLT
4、XMLHttpRequest
5、使用 JavaScript 将所有的东西绑定在一起

上述可能对于新手来说是比较复杂，本文通过一个jQuery Ajax实例，可以让新手很快上手应用到项目中。

预览：

jQuery代码：

var tabs = $('.tabs_1');
var tabsCon = $('.tabs_con_1');
var _css = 'active';

tabs.click(function(){
    var $this = $(this);
    var ajaxUrl = $this.data('url');
    var index = tabs.index(this);
    var currentCon = tabsCon.hide().eq(index);
    tabs.removeClass(_css);
    $this.addClass(_css);
    currentCon.show();
    if(!currentCon.data('ajaxLock')) _ajax(ajaxUrl, currentCon);
});

$('.' + _css).trigger('click');

function _ajax(ajaxUrl, currentCon){
    $.ajax({
        url: ajaxUrl,
        beforeSend: function(){
            currentCon.html('正在努力加载...');
        },
        success: function(response){
            if(response) currentCon.html(response);
            currentCon.data('ajaxLock' ,true);
        },
        error: function(){
            currentCon.html('加载错误!');
            currentCon.data('ajaxLock', false);
        }
    });
}

jQuery Ajax核心：

$.ajax({
    url: ajaxUrl, //url为AJAX请求的地址。此地址是程序员提供，我们只需负责请求数据过来并显示数据就可以了。
    beforeSend: function(){ //beforeSend为AJAX请求之前执行的操作。本例输出了一句话：“正在努力加载...”
        currentCon.html('正在努力加载...');
    },
    success: function(response){ //success为AJAX请求成功后执行的操作。本例把返回的数据（HTML+内容）放到内容盒子（currentCon）中。
        if(response) currentCon.html(response);
        currentCon.data('ajaxLock' ,true);
    },
    error: function(){ //error为AJAX若请求失败执行的操作。本例输出了一句提示：“加载错误!”
        currentCon.html('加载错误!');
        currentCon.data('ajaxLock', false);
    }
});

看完上面的代码和注释，是不是觉得AJAX其实很简单？其实只要懂得了它的原理，写代码就会很顺手的。不过jQury确实是把AJAX的步骤简化了很多，用起来很方便。

当然，jQuery还提供了一些参数的配置，如type等等..大家可以在本站下载 jQuery参考手册 进行查阅。