原生js，jquery ajax請求以及jsonp的調用

ajax
    是用來處理前後端交互的技術，可以改善用戶體驗，其本質是
    XMLHttpRequest，非同步訪問伺服器併發送請求數據，伺服器返迴響應的數據，以頁面無刷新的效果改變頁面中的局部內容
    同步：任務一個一個的執行，只有前面的任務執行完才會執行下一個任務，如果前面的任務是耗時操作，則需要一直等待
    非同步：多條任務併發執行，也就是一個任務的開啟，不需要等待其他任務執行結束，效率較高

    ajax的語言載體是JavaScript，最大的特點是頁面不刷新

1、獲取ajax對象
        主流瀏覽器獲取方式:火狐、谷歌、safari、opera、IE7以上
        var xhr = new XMLHttpRequest();
        IE7以下
        var xhr = new ActiveXObject("microsoft.XMLHttp");

2、發起請求
        創建請求：xhr.open(請求方式get/post,請求地址);
        發送請求：xhr.send(post請求數據/get設置null);

3、接收數據
        ajax可以接收字元串、html標簽、css樣式、xml、json
        通過監聽onreadystatechange事件。來接收ajax狀態的變化（readyState屬性）
        readyState:
        -0:表示未初始化，對象已經建立，但是沒調用onen方法
        -1：對象已建立，但是未調用send方法
        -2：發送數據，已調用send方法，但當前狀態及http頭未知
        -3：已接收部分數據，但是數據不全
        -4：數據接收完畢

4、常用屬性和方法
        屬性：
        -responseText：將響應的數據作為字元串返回，只讀
        -responseXML:將響應的數據格式化為xml格式並返回，只讀
        -status：當前請求的http狀態碼
        方法：
        -open
        -send
        -setRequestHeader：設置請求頭

get請求

url以字元串形式傳遞數據，對中文、&、=需要特殊處理，可以使用encodeURIComponent()方法進行編碼，編碼後的內容在服務端不需要解碼，可以正常接收,get多個參數之間用&連接，參數名和參數值用=連接

            var xhr = null;
            //獲取ajax對象
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else{
                xhr = new ActiveXObject("Microsoft.XMLHttp");
            }
            xhr.onreadystatechange = function(){
                console.log(xhr.readyState);
                switch (xhr.readyState){
                    case 0:
                    console.log("尚未初始化");
                    break;
                    case 1:
                    console.log("尚未建立連接");
                    break;
                    case 2:
                    console.log("正在發送數據");
                    break;
                    case 3:
                    console.log("正在接受數據");
                    break;
                    case 4:
                    console.log("數據接收完成");
                    //處理接到的數據,這下麵是重點
                    var text = xhr.responseText;
                    break;
                }
            }
            //創建請求
            xhr.open('get','http://localhost/PHP/ajax01.php?sel=4');
            xhr.send(null);    

post請求

　-給伺服器傳參數，需要將參數寫在send方法中：參數1=值1&參數2=值2...
    -需要調用setRequestHeader()方法，把傳送的參數封裝成xml格式（模仿form表單提交數據：application/x-www-form-urlencoded）;
    -傳遞的中文、特殊符號都需要編碼

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if (xhr.readyState == 4) {
                    console.log("登陸成功:"+xhr.responseText);
                }
            }
            //等到輸入的用戶名和密碼，
            var uname = "uname="+ encodeURIComponent(document.getElementById("uname").value);
            var pwd = "pwd="+encodeURIComponent(document.getElementById("pwd").value);
            xhr.open("post","http://localhos/PHP/ajax01.php");
            //設置頭信息，需要在open方法之後設置
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            //設置參數
            var str = uname+"&"+pwd;
            xhr.send(str);

get/post的區別:

    -請求數據量，get最多2k，post沒有限制
    -安全方面，post更安全
    -傳遞數據的形式：get是url和參數一起發送，post是參數單獨發送

jquery ajax請求

//AJAX
        $.ajax({
            url:"data.txt",
            type:'get',
            dataType:'json',
            data:null,
            async:true,
            timeout:1000,//設定超時時間  一般都是3000毫秒
            cache:false,//設定GET請求的時候不走 緩存數據，原理其實就是在URL末尾加隨機數，預設是true
            success:function(data){
                console.log(data)
            },
        })
        //JSONP
        //JSONP都是GET和非同步請求的，不存在其他的請求方式和同步請求，而且jquery預設會給JSONP的請求清楚緩存
        $.ajax({
            url:"http://matchweb.sports.qq.com/kbs/calendar?columnId=100000",
            type:'get',
            dataType:'jsonp',
            jsonpCallback:"fn",//自定義傳遞給伺服器的函數名，而不是使用jquery自動生成的
            jsonp:'cb',//把傳遞函數名的那個形參callBack變為cb
            success:function(data){
                console.log(data)
            },
        })