JavaScript Ajax

1、認識Ajax

1. AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。功能：在不刷新頁面的狀況下，實現與後臺的數據交互。
2. AJAX 不是新的編程語言，而是一種使用現有標準的新方法。 Ajax技術核心是XMLHttpRequest對象(簡稱XHR)。
3. Ajax不能跨域，瀏覽器的同源策略。要想跨域，可使用jsonp，或者後臺開放端口。

2、MLHttpRequest 對象方法

1. 新建一個Ajax對象：new XMLHttpRequest();。ie 6如下版本new ActiveXObject('Msxml2.XMLHttp.3.0')或 new ActiveXObject('Msxml2.XMLHTTP.6.0')。

new XMLHttpRequest() || new ActiveXObject('Msxml2.XMLHTTP.3.0')||new ActiveXObject('Msxml2.XMLHTTP.6.0'); 
複製代碼

2. 打開資源：open(method, url, asynch, [username],[password])。指定和服務器端交互的HTTP方法，URL地址，即其餘請求信息。method：http請求方法，通常使用」GET「,」POST「.。url：請求的服務器的地址。asynch：是否採用異步方法，true爲異步，false爲同步，默認是異步。後邊兩個能夠不指定，username和password分別表示用戶名和密碼，提供http認證機制須要的用戶名和密碼。
3. GET請求是最多見的請求類型，最經常使用於向服務器查詢某些信息。必要時，能夠將查詢字符串參數追加到URL的末尾，以便提交給服務器。URL的長度是有限制的，因此不能發送大量數據。特殊字符(eg:&等)，傳參產生的問題可使用encodeURIComponent()進行編碼處理，中文字符的返回及傳參，能夠將頁面保存和設置爲utf-8格式便可。或者使用提交url通用方法。

xhr.open('get', 'demo.php?rand=' + Math.random() + '&name=Koo', true);
複製代碼

4. POST請求能夠包含很是多的數據，咱們在使用表單提交的時候，不少就是使用的POST傳輸方式。 xhr.open(‘post’, ‘demo.php’, true);。而發送POST請求的數據，不會跟在URL的尾巴上，而是經過send()方法向服務器提交數據xhr.send(‘name=Lee&age=100’);。通常來講，向服務器發送POST請求因爲解析機制的緣由，須要進行特別的處理。由於POST請求和Web表單提交是不一樣的，須要使用XHR來模仿表單提交。

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
複製代碼

5. setRequestHeader(String header,String Value)若是是POST方式，須要設置請求頭。設置HTTP請求中的指定頭部header的值爲value。此方法需在open方法之後調用，通常在post方式中使用。

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
複製代碼

6. send(data)：向服務器發出請求，若是採用異步方式，該方法會當即返回。data能夠指定爲null表示不發送數據，其內容能夠是DOM對象，輸入流或字符串。
7. Abort()：中止當前http請求。對應的XMLHttpRequest對象會復位到未初始化的狀態。

3、XMLHttpRequest對象屬性

1. onreadystatechange：請求狀態改變的事件觸發器（readyState變化時會調用這個屬性上註冊的javascript函數）。
2. readyState：表示XMLHttpRequest對象的狀態。0：未初始化。XMLHttpRequest對象已建立，未調用open。1：open方法成功調用，但send方法未調用。2：send方法已經調用，還沒有開始接受數據。3：正在接受數據。Http響應頭信息已經接受，但還沒有接收完成。4：響應數據接受完成。
3. response | responseText | responseXML。response：後臺返回什麼就是什麼。responseText：responseType設置的是''或者'text'，服務器響應的文本內容。responseXML：服務器響應的XML內容對應的DOM對象。
4. status：服務器返回的http狀態碼。200表示「成功」， 404表示「未找到」， 500表示「服務器內部錯誤」等。經過xhr.getResponseHeader(「Content-Type」);能夠獲取單個響應頭信息 。xhr.getAllResponseHeaders();獲取整個響應頭信息。

var xhr = new XMLHttpRequest();//只能經過 new XMLHttpRequest
console.log(xhr);
console.log(xhr.readyState);

xhr.open("GET",'/test.php?user=emmmm&age=18');//打開一個鏈接
console.log(xhr.readyState);
//xhr.responseType = 'text';

xhr.onreadystatechange = function () {
    console.log(this.readyState);//準備狀態
    console.log(this.status);//http狀態碼
    console.log(this.response);//後臺給你返回的數據
    //數據傳輸完畢，能夠正常使用
    if(this.readyState === 4){
        if(this.status >= 200 && this.status < 300 || this.status === 304){
            console.log(this.response)
        }
    }
}
xhr.send();//發送
複製代碼

//test.php
<?php

//php 會把get的數據存在 $_GET
var_dump($_GET);
複製代碼

var _data = 'user=xxxx&age=18';//這是post須要發送的數據{ name:xxx, age:18 }須要本身打包數據
var xhr = new XMLHttpRequest();//實例化XMLHttpRequest請求

xhr.open('POST','/testpost.php');//打開一個鏈接

//設置請求頭信息
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

xhr.send(_data);//發送


xhr.onreadystatechange = function(){
    if(this.readyState === 4){
        if(this.status >= 200 && this.status < 300 || this.status === 304){
            console.log(this.response);
        }
    }
}
複製代碼

//testpost.php
<?php

//php會把post數據保存在$_POST裏面
var_dump($_POST);
複製代碼

4、Ajax封裝

//調用
ajax({
    url : '/test.php',
    type : 'post',
    data : {
        user : '韓梅梅',
        age : 18
    },
    success : function (data) {
        //JSON.parse 字符串轉 json數據
        //JSON.stringify
        //console.log(data);
        console.log(data)
    }
});


/* * ajax 方法 * options 配置信息 * */
function ajax(options) {

    //http 請求類型
    options.type = /post/i.test(options.type) ? 'POST' : 'GET';
    //console.log( options.type);

    //異步或者同步
    options.async = options.async===false ? false : true;
    /*console.log(options.async)*/

    var xhr = new XMLHttpRequest();//實例化一個XMLHttpRequest對象

    var data = '';//user=韓梅梅&age=18
    for(var k in options.data){
        data+=k+'='+ encodeURIComponent(options.data[k])+'&';
    }

    //console.log(data);
    //是get仍是post
    if(options.type === 'GET'){

        //get 參數是寫在url上面的
        if(!/\?/.test(options.url)){
            options.url+='?';
        }else{
            if(!/(&\s*)$/.test(options.url)){
                options.url+='&';
            }
        }

        //加上時間避免緩存
        options.url += data+'_='+new Date().getTime();
        data = null;
    }
    //console.log(options.url)

    //打開一個鏈接
    xhr.open(options.type,options.url,options.async);

    //請求頭
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');

    //監聽狀態發送改變
    xhr.onreadystatechange = function(){
        if(this.readyState === 4){//0 1 2 3 4
            if(this.status >= 200 && this.status < 300 || this.status===304){
                //成功函數
                options.success && options.success.call(this,strJsonCode(this.response));
            }else{
                //失敗函數
                options.error && options.error.call(this,this.status);
            }
        }
    };

    xhr.send(data);//發送 post須要傳到send
}


//將字符串打包成json數據，打包失敗，默認返回原字符串
function strJsonCode(str) {

    try {//寫有可能報錯的代碼
        return JSON.parse(str);
    }catch (e) {//報錯以後會執行的代碼
        return str;
    }
}
複製代碼

<?php

//$_GET
//exit(json_encode($_GET));
//exit('你好麼！');

exit(json_encode(array(
    'get' => $_GET,
    'post' => $_POST
)));
複製代碼

5、jsonp

1. jsonp是一種數據的傳輸技巧，解決Ajax跨域的問題，src沒有跨域問題。
2. p是填充的意思,json的填充。jsonp返回的數據形式是callback({age:30,name:'二狗'})而不是{age:30,name:'二狗'}是用括號包裹，前面的名稱就是‘填充’，也就是jsonp的p。由於script接受的數據若是是一個json沒辦法保存，而調用一個函數,{}數據做爲實參傳遞,這樣就能夠拿到json中的數據。

<script type="text/javascript"> function jQuery11020815081152774352_1530968010825(data){ console.log(data) </script>
<script type="text/javascript" src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=%E5%85%BB%E7%8C%AA%20&json=1&p=3&sid=1466_21100_20927&req=2&csor=3&pwd=%E5%85%BB%E7%8C%AA&cb=jQuery11020815081152774352_1530968010825&_=1530968010835"></script>
複製代碼

3. jsonp前端代碼看起來像這樣。

<script> function callback(data){ //定義接收數據的處理函數 console.log( data); } </script>
<script src='./jsonp.php?jsonp=callback'></script>
//我須要後臺返回一個callback({數據})這樣的一個值，實質就是調用上面的函數
複製代碼

4. jsonp中jsonp.php後臺中的代碼。

<?php
    $val = $_GET['jsonp'];//獲取jsonp的值：callback,
    $arr = array(
        "name"=>"二狗",
        "age"=>50
    );//php中的json
    echo $val."(".json_encode($arr).")";//JSON對象進行轉字符串處理
    //就是返回 callback({name:'二狗'，age:50})
?>
複製代碼