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

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

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

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

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

三、接收數據
        ajax能夠接收字符串、html標籤、css樣式、xml、json
        經過監聽onreadystatechange事件。來接收ajax狀態的變化（readyState屬性） 
        readyState:
        -0:表示未初始化，對象已經創建，可是沒調用onen方法
        -1：對象已創建，可是未調用send方法
        -2：發送數據，已調用send方法，但當前狀態及http頭未知
        -3：已接收部分數據，可是數據不全
        -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)
            },
        })