js中ajax的認識運用與封裝__js

1.認識ajax(ajax的操作必須在伺服器上運行，並且不能跨域，只能訪問同網域名稱下的其他檔案) ajax基本格式 ↓↓

 <script>    //ajax基本格式        var xhr = new XMLHttpRequest();        xhr.open('get' , '01-test.txt' , true);        xhr.send();        xhr.onreadystatechange = function () {            if (xhr.readyState == 4){                alert( xhr.responseText );            };        };    /*註解    1. var xhr = new XMLHttpRequest();        建立一個ajax對象，ajax的實現都是要通過這個對象    2. xhr.open(); 準備發送請求        三個參數：            第一個：通過什麼方式                'get'                'post'            第二個：訪問誰                url路徑            第三個：是否非同步                true                false     3. xhr.send(); 發送請求        get方式時不需要參數     4.xhr.onreadystatechange = function () {         if (xhr.readyState == 4){             執行函數         };       };         .onreadystatechange 當readystate發生改變的時候觸發         .readyState 狀態代碼            0 ：請求還沒有建立（open執行之前）；            1 ：請求建立了，但是還沒有發送（open剛執行）；            2 ：請求正式發送了（send執行了）；            3 ：請求已經受理，有一部分資料已經可用，但是還沒有完全處理完；            4 ：請求完全處理完成。         .responseText 請求的頁面返回的字串資料     */</script>

form表單中get和post方法的區別↓↓ 1.get

<form action="get.php" method="get">    <input type="text" placeholder="請輸入您的使用者名稱" name="user"> <br>    <input type="text" placeholder="請輸入您的密碼" name="pwd"><br>    <input type="submit"></form>

使用get方法進行表單提交，提交的資訊會在url連結中顯示出來，並且頁面變成了一個新的頁面。 2.post

<form action="post.php" method="post">    <input type="text" placeholder="請輸入您的使用者名稱" name="user"> <br>    <input type="text" placeholder="請輸入您的密碼" name="pwd"><br>    <input type="submit"></form>

使用post方法，雖然提交的資訊沒有在url中顯示出來，但依然跳到了新的頁面。 而在平時，有的頁面中，我們要實現的效果是在不重新整理頁面不跳轉頁面的情況下進行頁面中某一塊資訊的更新，這就要用到ajax。 2.ajax中get和post方法的寫法以及運用 1.get ↓↓

var xhr = new XMLHttpRequest();xhr.open('get' , 'get.php?user=afei&pwd=789' , true);    //使用get方法時，需要把要傳的資料以user=afei&pwd=789的方式寫在url?後面xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');xhr.send();                    //get方法時，send()可以不填參數xhr.onreadystatechange = function () {    if (xhr.readyState == 4){        alert( xhr.responseText );    };};

2.post ↓↓

 var xhr = new XMLHttpRequest();xhr.open('post' , 'post.php' , true);           //post方法url後面不需要寫資料xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');xhr.send('user=afei&pwd=456');                 //post方法把要傳的資料寫在send()中xhr.onreadystatechange = function () {    if (xhr.readyState == 4){        alert( xhr.responseText );    }};

3.ajax運用（擷取數組、json資料） ↓↓

setInterval(function () {    var xhr = new XMLHttpRequest();    xhr.open('get' , 'data.txt' , true);       //data.txt是我提前寫好的json檔案，裡面放著要擷取的資料    xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');    xhr.send();    xhr.onreadystatechange = function () {        if (xhr.readyState == 4){            var data = eval( xhr.responseText );     //eval在這裡會把擷取到的json當做是js代碼來讀轉成數組            var oUl =document.querySelector('#box ul');  //將擷取的數組追加到新增的ul，li中            oUl.innerHTML = '';            for (var i=0; i<data.length; i++){                var oLi = document.createElement('li');                oLi.innerHTML = '姓名：'+ data[i].name +'，年齡：' + data[i].age;                oUl.appendChild(oLi);            }        }    };},3000)

data.txt內容 ↓↓

[{    "name" : "第一個",    "age" : "20"},{    "name" : "第二個",    "age" : "20"},{    "name" : "第三個",    "age" : "19"},{     "name" : "第四個",     "age" : "24"},{    "name" : "第五個",    "age" : "22"},{    "name" : "第六個",    "age" : "21"}]

效果圖（不重新整理頁面的情況下，每三秒更新一次） ↓↓

上面提到eval()方法，他會把傳給他的所有參數都當成js代碼來讀，包括非json部分，這樣不安全，可能會把不需要的內容轉成全域變數，對我們的代碼會有影響。 同樣的還有一個方法，JSON.parse()，如果傳入的不是json就不會轉，並且傳入的json中，屬性和值都必須用‘’‘’雙引號。 這兩種方法均相容IE9及以上，要相容IE9以下，需下載json2.js進行引用。 3.ajax的封裝

<script>     /*      xhr.status   http狀態代碼     */     ajax({         url : 'get.php',         data : 'user=heihei&pwd=111',         success : function ( msg ) {             alert( msg );         },         error : function (std) {             alert('訪問出錯，錯誤碼：' + std);         }     });/*    ajax函數接受一個json參數，該json可以有一下屬性：        type : string 選填，發送請求的方式，預設'get'，        url : string 必填，訪問的檔案路徑，        aysn : boolean 選填，是否非同步，預設true，        data : string/json，選填，需要發送的資料，        success : function 選填，請求成功後的回呼函數，第一個形參代表返回的資料，        error : function 選填，請求失敗後的回呼函數，第一個形參代表http狀態代碼。 */function ajax(mJson) {    var type = mJson.type || 'GET';    var url = mJson.url;    var aysn = mJson.aysn || true;    var data = mJson.data;    var success = mJson.success;    var error = mJson.error;    if ( typeof data === 'object' ){        var str = '';        for (var key in data){str += key + '=' + data[key] + '&'};        data = str + '_=' + new Date().getTime();    }else if (typeof data === 'string'){        data += '&_=' + new Date().getTime();    }    if (data && /^get$/i.test(type))url += '?' + data;    var xhr = new XMLHttpRequest();    xhr.open(type , url , aysn);    xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');    xhr.send(data);    xhr.onreadystatechange = function () {        if (xhr.readyState === 4){            if (xhr.status >= 200 && xhr.status < 300){                success && success( xhr.responseText );            }else{                error && error( xhr.status );            }        }    }}</script>

以上就完成了ajax的封裝，以後要用的話，可以直接引用下面的function，然後用ajax()傳json參數。