jeasyui制作计划-ajax学习

Ajax：可以无刷新状态更新页面，并且实现异步提交，提升了用户的体验。

1.load()函数的使用，可以三个参数：url(必须的参数，请求html文件的url地址，参数类型string）、date（可选，发送的key/value数据，参数类型Object）、callback（可选，成功或失败的回调函数，参数类型为函数Function）。

1）只有一个参数

//HTML

<input type="button" value="异步获取数据“ />

<div id="box"></div>

 //jQuery

$('input').click(function(){

    $('#box').load('test.html');　　　　//函数中只有一个参数url。

});

2）传递两个参数url和data。

//jQuery

$('input').click(function(){

    $('#box').load('test.php',{

            url:'parameter'

        });　　　　//函数中只有两个参数url和传进的data参数parameter。

});        

3）传递三个参数url和data和回调函数。

$('input').click(function () {
    $('#box').load('test.php', {
        url : 'parameter'
            }, function (response, status, xhr) {
            alert('返回的值为：' + response + '，状态为：' + status + '，状态是：' + xhr.statusText);
        });
});         

2、$.get和$.post方法
.load()方法是局部方法，必须包含一个元素作为jQuery对象作为前缀。而$.get()和$.post是全局方法，
不需要指定某个元素。就应用而言，.load()适合做静态文本的异步获取，而对于需要传递参数到服务其
页面的，$.get()和$.post()更加合适。
1)$.get()方法有四个参数，前三个参数和.load()一样，第四个参数为type，即服务器返回的内容格式：
包括xml、heml、script、json、jsonp和text。第一个参数为必选参数，后面三个为可选参数。

    //使用$.get()异步返回html类型
    $('input').click(function){
        $.get('test.php',{
            url:'parameter'
            },function(response,status,xhr){
            if(status =='success'){
                $('#box').html(response);
                }
            })
        });

说明：第四个参数type是指异步返回的类型。一般情况下type是智能判断的，不需要我们主动设置。
2)$.post()方法的使用和$.get()基本是一致的
使用时的主要区别：get方式通过$_GET[]获取，post方式通过$_POST[]获取。

//使用$.post()异步返回html
        $.post('test.php',{
            url:'parameter'
        },function(response,status,xhr){
                $('#box').html(response);
        });

3.$.getScript()和$.getJSON()

//点击按钮加载js文件        
$('input').click(function(){
            $.getScript('test.js');
        });
    
    //$.getJson()方法是专门加载JSON文件的，使用方法和之前的类似。
        $('input').click(function(){
            $.getJSON('test.json',function(response,status,xhr){
                alert(response[0].url);
                });
            });

4.$.ajax() 是所有ajax方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装。这个方法只有一个参数，传递一个各个功能键值对的对象。

　　

    //$.ajax使用
    $('input').click(function(){
        $.ajax({
            type:'POST',
            url:'test.php',
            data:{
                url:'parameter'
                },
            success:function(response,stutas,xhr){
            $('#box').html(response);
            }
        });
    });