jquery ajax 筆記

$(function(){
    //jquery ajax----> html xml javascript css json  php sql
    
    //*****************************************************************************************************
    //load局部方法:適用靜態文件異步獲取,須要包含元素的jquery對象做前綴
    
    // $(':button[name=test]').click(function(){
        //帶選擇器的url
        // $('.art').children('p').last().load('html/test.html .url')
        
        //不傳data，則默認get方式
        //$('.art').find('p').eq(1).load('php/get.php?url=baidu');
        
        //傳data的post方式
        /* $('.load').load('php/post.php',{
            url:'baidu'
        }) */
        
        //ajsx方法，第三個參數callback回調函數
        /* $('.load').load('php/post.php',{
            url:'baidu_ajax',
        },function(response,status,xhr){  //callback 回調函數
            $(this).html('返回值'+response+',狀態爲'+status+',狀態是'+xhr.statusText);
            //瀏覽器返回：返回值baidu_ajax,狀態爲success,狀態是OK,其中status==success能夠做判斷用
            //其中xhr包含response,status,xhr.statusText，只是其中經常使用且重要的2個參數，因此單獨提出來
            //xhr.responseText=response;xhr.status=200,http狀態碼200就是ok狀態字符串
        }); */
    // });
    
    //*****************************************************************************************************
    
    
    //get全局方法
    
    //問號傳參
    /* $(':button[name=test]').click(function(){
        $.get('php/get.php?url=baidu',function(response,status,xhr){
            $('.load').html(response);
        });
    }); */
    //字符串健值對，多個能夠用&鏈接符如url=baidu&a=b,其實最終仍是轉化爲問號傳參
    /* $(':button[name=test]').click(function(){
        $.get('php/get.php','url=baidu&a=b',function(response,status,xhr){
            $('.load').html(response);
        });
    }); */
    //對象鍵值對傳=>問號傳參
    /* $(':button[name=test]').click(function(){
        $.get('php/get.php',{
            url:'baidu',
            a:'b',
        },function(response,status,xhr){
            $('.load').html(response);
        });
    }); */
    
    
    //*****************************************************************************************************
    
    
    //post全局方法，只能用字符串、對象鍵值對這兩種方法，再也不累贅。且不會在瀏覽器返回的報文中顯示出來.
    
    // $.post()方法的使用和$.get()基本上一致，具體區別以下：
    // 1.GET 請求是經過URL 提交的，而POST 請求則是HTTP 消息實體提交的；
    // 2.GET 提交有大小限制（2KB），而POST 方式不受限制；
    // 3.GET 方式會被緩存下來，可能有安全性問題，而POST 沒有這個問題；
    // 4.GET 方式經過$_GET[]獲取，POST 方式經過$_POST[]獲取。
    
    
    
    
    //*****************************************************************************************************
    
    
    //$.get和$.post方法的第4個參數type即服務器返回的內容格式,包括xml、html、script、json、jsonp 和text。
    
    /* $(':button[name=test]').click(function(){
        $.post('php/post.php',{
            url:'baidu_post'
        },function(response,status,xhr){
            $('.load').html(response);
        },'html');//'html'是第四個參數，智能判斷，能夠省略，默認是html或text
    }); */
    
    //若是默認是xml或是json文件，強行設置type爲html，將會返回xml或json所有內容包含標籤
    
    //能夠先獲取全部內容，而後經過選擇器捕獲相關內容。例如
    /* $(':button[name=test]').click(function(){
        $.post('json/test.json',function(response,status,xhr){
            $('.load').html(response[0].url);
        });
    }); */
    
    
    //*****************************************************************************************************
    
    
    //特定異步加載方法$.getScript()和$.getJSON();此處沒有第4個參數type,接着上例
    /* $(':button').click(function(){
        $.getJSON('json/test.json?a=b&c=d',function(response,status,xhr){
            alert(response[0].url);
        });
    }); */
    //須要時加載js,例如實現某些功能的小插件
    /* $(':button').click(function(){
        $.getScript('js/test.js');
    }); */
    
    //*****************************************************************************************************
    
    
    
    
    //$.ajax方法，以上方法都是基於這個底層的封裝
    
    /* $(':submit').click(function(e){
        // e.preventDefault(); //會使html5智能表單失效
        // e.stopPropagation();
        $.ajax({
            url:'php/test.php',
            type:'POST',
            //傳統寫法
            // data:{
                // user:$(':text').val(),
                // email:$('input[name=email]').val()
            // },
            
            //表單序列化serilize()
            data:$('#ff').serilize(),
            success:function(response,status,xhr){
                $('.load').html(response);
            }
        });
        // return false;//表單序列化後阻止submit提交無效
    }); */
    
    
    //*****************************************************************************************************
    
    
    //.serialize()方法，直接獲取單選，多選和下拉列表等內容
    
    /*
    //單選
    
    $(':radio').click(function(){
        var content=$(this).serialize(),
            ctt=decodeURIComponent(content);//js解碼方法
        $('.load').html(ctt);
    });
    //多選
    
    $(':checkbox').click(function(){
        var content=$(this).serialize();
        $('.load').html(content);
    });
    
    
    //單獨獲取下拉列表變化後選中的值
    
    //js方法
    function select_fn(){
        var slct=document.getElementById("slct");
        var str=[];
        for(i=0;i<slct.length;i++){
            if(slct.options[i].selected){
                str.push(slct[i].value);
            };
        };
        alert(str);
    };
    $(':submit').on('click',function(e){
        select_fn();
        e.preventDefault();
    });
    
    //.serializeArray()方法，返回json數據
    $(':submit').click(function(e){
        // console.log($('#slct').serializeArray());
        var slct_json=$('#slct').serializeArray();
        alert(slct_json[0].value);
        alert(slct_json[1].value);
        alert(slct_json[2].value);
    });
    */
    
    
    //*****************************************************************************************************
    
    //ajaxSetup初始化重複的參數,type,url,data等
    /* $(':submit').click(function(){
        $.ajaxSetup({
            type:'POST',
            url:'php/test.php',
            data:{
                user:$(':text[name=user]').val(),
                email:$('input[name=email]').val(),
            }
        });
        $.ajax({
            success:function(response,status,xhr){
                alert(response);
            },
        });
        return false;
    }); */
    
    //*****************************************************************************************************
    
    //$.param(obj),解析對象形式的鍵值對轉爲url字符串鍵值對
    /* var obj={a:1,b:2,c:3};
    var ff=$.param(obj);
    alert(ff);
    
    //serialize對複雜的表單能力有限,可採用$.param(obj)
    $(':submit').click(function(){
        $.ajaxSetup({
            type:'POST',
            url:'php/test.php',
            data:$.param({
                user:$(':text[name=user]').val(),
                email:$('input[name=email]').val(),
            }),
        });
        $.ajax({
            success:function(response,status,xhr){
                alert(response);
            },
        });
        return false;
    }); */
    
    //*****************************************************************************************************
    //加載請求
    /* $(':submit').click(function(e){
        //done，fail,always將會替代.success()、.error()和.complete()連綴的方法
        // $.ajax({
            // url:'php/test.php',
            // type:'POST',
            // data:$('#ff').serialize(),
        // })
        // .done(function(response,status,xhr){
            // alert(response);
        // });
        //done連綴方法
        // $.post('php/test.php',$('#ff').serialize())
        // .done(function(response,status,xhr){
            // alert(response);
        // });
        //加載提示,url不存在，加載.loading友好提示「努力加載中...」,如本地測試一閃而過
        //全局方法綁定在document上, .ajaxStart()-->請求開始、.ajaxStop()-->請求結束
        $.ajax({
            url:'http://www.errorwebsiteffaewfaegawefafwefdsafe118155691.cn/php/test.php',
            type:'POST',
            data:$.param({
                user:$(':text[name=user]').val(),
                email:$('input[name=email]').val()
            }),
            timeout:500,//設置超時
            global:false,//取消全局事件,不顯示.loading內容
            success:function(response,status,xhr){
                alert(response);
            }
        });
        $(document).ajaxStart(function(){
            $('.loading').show();
        }).ajaxStop(function(){
            $('.loading').hide();
        });
        e.preventDefault();
    }); */
    
    //*****************************************************************************************************
    
    //錯誤處理
    //ajax屬性方法
    /* $(':submit').click(function(){
        $.ajaxSetup({
            type:'POST',
            url:'php/test_err.php',//不存在這個文件
            data:$('#ff').serialize(),
        });
        $.ajax({
            beforeSend:function(xhr,settings){              //請求以前
                alert(xhr.readyState+'-'+settings.url)
            },
            error:function(xhr,errorText,errorType){        //錯誤
                alert(xhr.status+':'+xhr.status.Text);
                alert(errorText+':'+errorType);
            },
            success:function(response,status,xhr){          //成功
                alert(response);
            },
            complete:function(xhr,status){
                alert(xhr.responseText+'-'+status)          //不論成功與錯誤都返回值
            }
            
        });
        e.preventDefault();
    });
     */
    
     //$.post連綴方法.fail(),而.error()已棄用
     /* $(':submit').click(function(){
         $.post('php/test_err.php').fail(function(xhr,errorText,errorType){
             alert(errorText+':'+errorType);
             alert(xhr.status+':'+xhr.statusText);
         });
         return false;
     }); */
    
     //$.post()使用全局.ajaxError()事件,綁定在document上
     /* $.post('php/test_err.php');
     $(document).ajaxError(function(event,xhr,settings,errorType){
        // alert(event.type);
        // alert(event.target);
        // for(var i in settings){
            // document.write(i+"<br>")
        // };
        // alert(settings.url+';'+settings.type);
        alert(errorType);
     }); */
    
    //*****************************************************************************************************
    
    //ajax全局方法--->局部方法
    /* .ajaxSend--->無(只有屬性beforeSend,見上文)
        .ajaxSuccess--->.done()
        .ajaxError--->.fail()
        .ajaxComplete()--->.always() */
        
    //局部
    /* $(':submit').click(function(){
        $.post('php/test_err.php')
        .done(function(response,status,xhr){
            alert('success!')
        })
        .fail(function(xhr,errorText,errorType){
            alert('error!')
        })
        .always(function(xhr,status){
            alert('complete!')
        });
        return false;
    }); */
    
    //全局
    /* $(':submit').click(function(){
        $.post('php/test_err.php',$('#ff').serialize())     //不存在這個文件test_err.php
    });
    
    $(document).ajaxSend(function(event,xhr,settings){      //請求以前
        alert('beforeSend!')
    })
    .ajaxError(function(event,xhr,settings,errorType){      //請求失敗
        alert('fail!')
    })
    .ajaxSuccess(function(event,xhr,settings){              //test_err.php換成test.php，請求成功
        alert('done!')
    })
    .ajaxComplete(function(event,xhr,settings){             //請求完成，不論成與敗都返回
        alert('always!')
    }); */
    
    //*****************************************************************************************************
    
    //$.ajax()加載JSON文件
    /* $(':submit').click(function(){
        $.ajax({
            type:'POST',
            url:'json/test.json',
            // dataType:'json',                                 //智能判斷，不設置也可
            // dataType:'html',                                 //強行設置html返回test.json全部內容
            success:function(response,status,xhr){
                // alert(response[0].url)
                // alert(response);
            }
        });
        
    }); */
    //本地$.ajax()加載JSONP文件
    /* $(':submit').click(function(){
        $.ajax({
            type:'POST',
            url:'php/jsonp.php',
            dataType:'json',                                       //必須設置，php≠json
            success:function(response,status,xhr){
                alert(response.a);                                 //返回"1"
                alert(response.b);                                 //"2"
                alert(response.c);                                 //"3"
            }
        })
    }); */
    //$.ajax()獲取遠程數據
    /* $(':submit').click(function(){
        $.ajax({
            type:'POST',
            url:'http://www.?.com/php/jsonp2.php?callback=?',      //必須設置callback=?
            dataType:'json',                                       //必須設置，php≠json
            success:function(response,status,xhr){
                // alert(response);                                 
                console.log(response);                                 
                alert(response.c);                                 //"3"
            }
        })
    }); */
    //$.ajax()獲取遠程數據,jsonp方式
    /* $(':submit').click(function(){
        $.ajax({
            type:'POST',
            url:'http://www.?.com/php/jsonp2.php',                  //不加"callback=?"
            // dataType:'json',
            dataType:'jsonp',                                       //只在此外修改爲'jsonp'便可
            success:function(response,status,xhr){
                // alert(response);                                 
                console.log(response);                                 
                alert(response.c);                                 //"3"
            }
        })
    }); */
    
    //*****************************************************************************************************
    
    //jqXHR＝>XHR超集,可擴展性強，互不干擾，依次執行
    /* $(':submit').click(function(){
        var jqXHR=$.ajax({
            type:'POST',
            url:'php/test.php',
            data:$('#ff').serialize(),
            });                                            //能夠連綴.done()
        jqXHR.done(function(response,status,xhr){          //依次執行
            alert(response+'------A');
        });    
        jqXHR.done(function(response,status,xhr){
            alert(response+'------B');
        });    
        return false;    
    }); */
    
    
    //jqXHR when方法
    /* $(':submit').click(function(){
        var jqXHR_1=$.ajax('php/t1.php');
        var jqXHR_2=$.ajax('php/t2.php');
         */
    //傳統寫法
        /* jqXHR_1.done(function(response){
            alert(response);
        });
        jqXHR_2.done(function(response){
            alert(response);
        });
         */
    //when方法    
        /* $.when(jqXHR_1,jqXHR_2).done(function(f1,f2){
            alert(f1);                                           
            alert(f2[0]);                                        //獲得第一條數據
        }); */
    

    //測試this指向
    var obj={
        name:'china',
        test:function(){
            alert(this.name)                   //彈出：btn
            
            //js解決方法
            // var _this=obj;
            // alert(_this.name);           //彈出:china
        }
    };
    
    // $(':button[name=btn]').click(obj.test);     
    $(':button[name=btn]').click($.proxy(obj,'test'));
    
        
        
        
    });