jQuery-ajax

/**
 *      Ajax技术
 *   Ajax主要应用在数据异步请求,局部更新数据,提升用户体验
 *   不用Ajax技术,如果要提交数据与服务器之间数据通信,会导致张页面提交,用户体验差
 *
 *   1.load(url,data,callback)方法
 *   2.get请求
 *   3.post请求
 */

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

        $('#box').load('test.html');
        //过滤
        $('#box').load('test.html.url');
    })
    $('input').click(function () {
        //第一个参数为跳转的url,第二个为数据,第三个为回调函数
        $('#box').load('test.php',{
            url:'baidu'
            //回调函数中的三个分别为,响应返回的值,状态,xhr为对象
        },function (response,stutas,xhr) {
            $('#box').html(response+123456);
            alert(xhr.status);//200 404
            alert(xhr.status);
        })
    })
    
    /*
            Ajax技术
    1.get(url,data,callback,type)方法
    2.post(url,data,callback,type)方法
    */
    $('input').click(function () {
        //此种方法data和url写在了一起(不建议使用),没有用第四个参数
        $.get('test.php?url=baidu',function (response, status, xhr) {
            $('#box').html(response);
        })
        //此种方法使用url和data分开的形式(不建议使用),没有使用第四个参数
        $.get('test.php','url=baidu',function (response, status, xhr) {
            $('#box').html(response)
        })
        //此种方法data使用键值对的方式(建议使用)
        $.get('test.php',{url:'www.baidu.com'},function (response,status,xhr) {
            $('#box').html(response)
        })
        //此种方式使用了第四个参数,第四个参数用来规定返回的参数类型,可以不写能够自动识别
        $.get('test.php',{url:'www.baidu.com'},function (response,status,xhr) {
            $('#box').html(response)
        },'xml')
        //此种方式只能操作Json数据文件没有第四个参数
        $.getJSON('test.josn',function (response, status, xhr) {
            alert(response);
            $('#box').html();//无法显示
            alert($(response).find('root').find('url').text());
            alert(response[0].url);
        })
        //只能操作javaScript
        $.getScript('test.js');
    })
    /**
     *          Ajax技术
     *    1.ajax({key:value})方法
     *    2.表单序列化
     *
     */
    $(function () {
        $('input').click(function () {
            $.ajax({
                //数据传递方式(默认为get)
                type:'POST',
                //请求页面
                url: 'text.php',
                //传递的参数,键值对的方式
                data:{
                    url:'baidu'
                },
                //请求成功的回调函数
                success:function (response) {
                    $('#box').html(response);
                }
            });
        })
    })
    $(function () {
        $('from input[type=button]').click(function () {
            $.ajax({
                type:'POST',
                url: 'text.php',
                data:{
                    user:$('form input[name=user]').val()
                },
                success:function (response) {
                    $('#box').html(response);
                }
            });
        })
        $('from input[type=button]').click(function () {
            $.ajax({
                type:'POST',
                url: 'text.php',
                //序列化,可以默认解析参数
                data:$('form').serialize(),
                success:function (response) {
                    $('#box').html(response);
                }
            });
        })
        $('form input[name=sex]').click(function () {
            //为了更安全的进行传输,serialize进行了转码(要进行解码)
            $('#box').html(decodeURIComponent($(this).serialize()));
            //以json方式来进行序列化
            var json=$(this).serializeArray();
            [{
                name:'sex',
                value:'女'
            }]
            //以json的方式来进行取值
            $('#box').html(json[0].name+':'+json[0].value);
        })
        $('from input[type=button]').click(function () {
            $.ajax({
                type:'POST',
                url: 'text.php',
                //推荐此种方式,效率更高
                data:$.param({
                  user:$('form input[name=user]').val()
                }),
                success:function (response) {
                    $('#box').html(response);
                }
            });
            })

        })
    /**
     *      Ajax技术
     *      1.错误请求
     *      2.错误处理
     */
    //第一种传递参数方式
    $('from input[type=button]').click(function () {
        $.ajax({
            type:'POST',
            url: 'text.php',
            //推荐此种方式,效率更高
            data:$.param({
                user:$('form input[name=user]').val()
            }),
            success:function (response) {
                $('#box').html(response);
            },
            //当请求超过1000毫秒时候会停止
            timeout:1000,
            //请求错误的回调方法
            error:function (xhr,errorText,errorType) {
                //alert(errorText+':'+errorType);
                alert(xhr.status+":"+xhr.statusText);
            }
        });
        //第二种方式
        $.post('test123.php').error(function (xhr, errorText, errorType) {
            alert(xhr.status+':'+xhr.statusText)
        });
    })
    //当发生错误的时候会触发该方法
    $(document).ajaxError(function (event,xhr,settings,info) {
        alert(settings.url+':'+settings.type+':'+info+":"+xhr.status);
    })
    //当请求开始的时候调用此方法
    $(document).ajaxStart(function () {
        $('.loading').show();
    })
    //当请求结束调用此方法
    $(document).ajaxStop(function () {
        $('.loading').hide();
    })
    //链式写法
    $.post('test123.php')
        .success(function () {
            alert('success')
        })
        .complete(function () {
            alert('complete')
        }).error(function () {

    })
    $(document).ajaxSend(function () {
        alert('发送之前');
    }).ajaxComplete(function () {
        alert('请求完成之后,不论失败或者成功')
    }).ajaxSuccess(function () {
        alert('请求成功调用');
    })

})