Ajax使用學習__Ajax

一、簡介

1、ajax是Asynchronous Javascript and XML的縮寫，意思是執行非同步網路請求

2、我們會發現使用form表單submit按鈕提交表單的時候，網頁會有執行重新整理操作，在新頁面告知操作結果，而ajax技術可以使得向伺服器請求資料的時候無需卸載頁面，得到更好的體驗

3、ajax的核心是XMLHttpRequest對象，它實現了非同步方式從伺服器擷取資料，也就是用XHR對象擷取到伺服器的資料，再使用DOM將資料更新到頁面中

4、雖然ajax名字中包含了XML，但是他只是一種通訊手段，與具體資料格式沒有關係，因為當時主流使用XML作為前後台通訊資料的格式，所以名字中使用了XML；而現在主要使用的都是JSON格式的字串 二、XMLHttpRequest對象 ajax的實現流程如下： 建立XHR對象 調用open()方法，建立請求 調用send()方法，發送請求 捕獲請求狀態，判斷請求結果 擷取資料庫返回的資料 1、建立XHR對象

XHR對象首次實現是在ie5上，當時使用的是ActiveX對象，所以XHR下ie上有兩個版本的實現方式，ie7以下的ActiveX對象與ie7及以上的XHR對象，其餘瀏覽器統一都是使用的XHR對象

所以建立對象的時候需要有相容性寫法

if(window.XMLHttpRequest){    var request = new XMLHttpRequest();}else{    //這是ie7以下的寫法    var request = new ActiveXObject("Microsoft.XMLHttp");}

2、調用open()方法

request.open(method,url,boolean);

open()方法接收3個參數 method：資料提交方式，字串形式，可以使用"get"或"post" url：請求對象地址，字串表示（get方式與post方式有差異） boolean：true（預設）表示非同步請求，false表示同步請求（相信使用ajax都是為了非同步，所以這裡就用true，或者不填寫） get方式請求

使用get方式提交資料時需要將提交內容以固定的格式附加在URL後面，格式如下：
url = "地址 ? name1=value1 & name2=value2";

//擷取到使用者名稱及密碼的輸入框var username = document.getElementById("username");var passwd = document.getElementById("passwd");//將輸入內容附加在URL後面var url = "php/get.php?username="+username.value+"&passwd="+passwd.value;//調用open()方法request.open("get",url,true);

post方式請求

使用post方式提交資料，提交內容是作為send()方法的參數提交的，所以URL後面無需附加參數

//擷取到使用者名稱及密碼的輸入框var username = document.getElementById("username");var passwd = document.getElementById("passwd");//將輸入內容附加在URL後面var url = "php/post.php";//調用open()方法request.open("post",url,true);

注意：因為已經不再使用form表單，所以後台無法再使用name屬性擷取資料，之前定義在form表單name屬性中的內容現在就是在name1=value1中的name1中，相應的，post方式就是下文中的postbody中的name1 3、調用send()方法

request.send(postbody);

send()方法接收1個參數 postbody：字串形式，填入需要提交的資料；如果沒有提交的資料，可以填入null get方式請求

因為get方式下的資料已經附加在URL後面提交，所以這裡一般填入null post方式請求

資料的格式如下：
postbody = "name1=value1 & name2=value2";

//擷取到使用者名稱及密碼的輸入框var username = document.getElementById("username");var passwd = document.getElementById("passwd");//將輸入內容附加在URL後面var postbody = "username="+username.value+"&passwd="+passwd.value;//調用send()方法request.send(postbody);

注意1：此處用post方式提交資料與用form表單提交畢竟有所不同，伺服器會需要程式來讀取並解析未經處理資料，所以我們需要使用XHR來模仿表單提交：

//將Content的頭部資訊重新設定    //定義表單提交時的內容類型，並以適當類型建立一個字串    request.setRequestHeader("Content-Type","application/x-www/form-unencoded");

注意2：這個方法只能加在open()方法之後，send()方法之前

//實際使用方法var username = document.getElementById("username");var passwd = document.getElementById("passwd");var url = "php/post.php";    request.open("post",url,true);//放置的位置一定在這裡request.setRequestHeader("Content-Type","application/x-www/form-unencoded");var postbody = "username="+username.value+"&passwd="+passwd.value;request.send(postbody);

4、捕獲請求狀態，判斷結果

send()方法調用後，請求就會被提交到伺服器；多數情況下，我們會發送非同步請求先檢查請求過程當前的活動階段，再判斷請求是否返回成功 XHR對象相關屬性： readyState：請求 /相應過程的當前活動階段 responseText：作為響應主體被返回的文本 responseXML：如果相應的內容類型是text/xml或者application這個屬性中將儲存著響應資料的XMLDOM文檔 status：相應的HTTP狀態 statusText：HTTP狀態說明 我們利用原生的onreadystatechange事件來監聽readyState變化 readyState傳回值如下： readyState傳回值

只要readyState的值有一個值變為另一個值，就會觸發一次onreadystatechange事件，可以利用此事件來返回監聽到的請求/響應過程狀態值

我們關心的是readyState值為4的情況，因為這是代表所有資料已經準備就緒；同時如果status返回的是200，那麼可以確定該次去請求/響應過程全部完成 status傳回值如下： status傳回值

注意：這裡不要使用statusText去判斷，因為該值在跨瀏覽器時不可靠

最後的返回結果，不管是什麼類型內容，都會被儲存在responseText中 監聽代碼如下：

//監聽readyState狀態與status傳回值request.onreadystatechange = function () {    if(request.readyState == 4 && request.status == 200){        alert(request.responseText);    }}

綜上所述的內容，就是整個ajax請求的全部流程，我們在js中最後拿到的就是後台返回的responseText，只裡面儲存的一般來說是JSON格式的字串，我們可以將其轉換成數組或者對象後提取其中的索引值對 三、封裝使用 以下代碼是將上述的過程進行的封裝，使得使用時只要調用函數並在回呼函數中實現功能就可以了

 <script>/* * method是請求方式 * url是網路請求的地址 * postboidy是post方式請求時的提交資料 * successCallback是請求成功的函數 * errorCallback是請求失敗函式*/function request (method,url,postbody,successCallback,errorCallback) {    //建立一個請求對象    if(window.XMLHttpRequest){        var request = new XMLHttpRequest();    }else{        var request = new ActiveXObject("Microsoft.XMLHttp");    }    if(arguments[0]=="POST"){        //建立請求        request.open(method,url,true);        //設定上傳類型        request.setRequestHeader("content-type","application/x-www-form-urlencoded");    }else if(arguments[0]=="GET"){        request.open(method,url,true);    }    //發送請求    request.send(postbody);    //狀態監聽    request.onreadystatechange = function () {        if(request.readyState ==4 && request.status == 200){            //請求成功的回呼函數            if(successCallback){                successCallback(request.responseText);            }        } else if (request.readyState == 4 && request.status != 200) {            //請求失敗的回呼函數            if(errorCallback){                errorCallback(request.statusText);            }        }    }}</script>

使用方法舉例：

下面定義了一個簡單的表單提交使用者名稱和密碼，使用回呼函數拿到後台返回的JSON串後，轉換成對象再取出其中的資訊，告知使用者是登陸成功還是失敗

//html部分//調用封裝好的函數<script src="request.js"></script><div class="form">    <input type="text" id="username">    <input type="password" id="passwd">    <button id="loginBtn">登入</button></div>//js部分<script>var username = document.getElementById("username");var passwd = document.getElementById("passwd");var loginBtn = document.getElementById("loginBtn")loginBtn.onclick = function () {    //佈建要求地址及提交內容    var url = "login.php";    var postbody = "username="+username.value+"&passwd="+passwd.value;    //發起ajax請求，並使用回呼函數實現功能    request("POST",url,postbody,function (resText) {        //把json格式的字串轉換成對象        var obj = JSON.parse(resText);        alert(obj.msg);    });}</script>//php部分login.php<?php     //從請求中擷取使用者名稱和密碼    $username = $_POST["username"];    $passwd = $_POST["passwd"];    //串連伺服器    @$mysqli = new mysqli("localhost","root","","user");    $mysqli->query("set names utf8");    //查詢語句    $sql = "SELECT * FROM user WHERE username='$username' AND passwd='$passwd'";    //資料庫執行查詢    $result = $mysqli->query($sql);    //判斷查詢結果是否有值，並定義返回字串    //echo出來的就是返回前端的資料    if($result->num_rows > 0){        echo '{"errorcode":0,"msg":"登陸成功"}';    }else{        echo '{"errorcode":1,"msg":"使用者名稱或密碼錯誤"}';    }    //關閉伺服器    $mysqli->close();?>

作者：小pxu
連結：http://www.jianshu.com/p/ff9e1139ea51
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。