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('请求成功调用');    })})