Ajax的優缺點是什嗎？ajax如何正確的使用

本篇文章主要的講述關於封裝ajax的介紹，還有關於ajax的非同步請求，現在我們一起來看這篇文章吧

Ajax

說道ajax到底什麼是ajax？ ajax是一種建立互動網頁應用的一門技術。

ajax的應用情境有：（地圖）即時更新，表單驗證等等....

ajax的優缺點：

優點：1.實現局部更新（無重新整理狀態下），2.減輕了伺服器端的壓力

缺點：1.破壞了瀏覽器前進和後退機制（因為ajax自動更新機制）

2.一個Ajax請求多了，也會出現頁面載入慢的情況。

3.搜尋引擎的支援程度比較低。

4.ajax的安全性問題不太好（可以用資料加密解決）。

首先說明：如果要使用ajax必須要有後端環境的支援（伺服器端）。

HTTP請求

HTTP請求有兩種方式

GET：用於擷取資料，GET是在URL上傳遞資料（網址後面的東西），儲存量較少，安全係數比較低。

POST：用於上傳資料，POST安全性一般比（GET好一些），容量幾乎是無限（多用於表單）。

Ajax的使用

使用ajax一共有4個步驟：1.建立ajax、2.串連伺服器、3.發送請求、4.接受傳回值。

建立Ajax

建立ajax必須考慮相容性處理，IE6以上：new XMLHttpRequest()、IE6：new ActiveXObject("Microsoft.XMLHTTP")

相容處理

var xhr = null;if(window.XMLHttpRequest){    xhr = new XMLHttpRequest();} else{    xhr = new ActiveXObject("Mricosoft.XMLHTTP");}

串連伺服器

上面建立的ajax對象xhr，使用xhr.open（"請求方式（GET/POST）"，url路徑，“非同步/同步”）。

第三個參數：true===》非同步、false===》同步。（想看更多就到topic.alibabacloud.comAJAX開發手冊欄目中學習）

當請求方式為POST的時候，代碼寫法如上；

當請求方式為GET的時候，使用xhr.open（"請求方式（GET/POST）"，url路徑 + “？”請求資料 + ，“非同步/同步”）。

發送請求

使用xhr.send（）發送請求

當請求方式為GET的時候，發送請求為xhr.send(null).

當請求方式為POST的時候，發送請求為xhr.send(請求資料)。

此外使用POST的時候必須在xhr.send（請求資料）上面添加

        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

接收傳回值

使用ajax會想用一個事件readystatechange事件：當請求被發送到伺服器時，我們需要執行一些基於響應的操作。

當readystatechange改變的時候，就會觸發這個事件執行。

readyState：請求的狀態，返回的是狀態代碼（0 - 4）：0（未初始化）open還沒有調用、1（載入）已經調用了send（）正在發送請求、2（載入完成）send方法已經完成 已經收到了全部的響應內容、3（解析）正在解析響應內容、4（完成）響應內容解析完成 可以在用戶端用了。

responseText：返回請求的內容。

status：返回請求的結果碼：返回200（成功）、返回404（未找到）、返回5**（5開頭）（伺服器錯誤）

封裝Ajax

在封裝ajax的時候會使用到參數傳遞，因此必須寫個方法作為對象屬性轉換為ajax請求資料的方法

下面是ajax封裝，並舉例：

function ajax(options){    var xhr = null;    var params = formsParams(options.data);    //建立對象    if(window.XMLHttpRequest){        xhr = new XMLHttpRequest()    } else {        xhr = new ActiveXObject("Microsoft.XMLHTTP");    }    // 串連    if(options.type == "GET"){        xhr.open(options.type,options.url + "?"+ params,options.async);        xhr.send(null)    } else if(options.type == "POST"){        xhr.open(options.type,options.url,options.async);        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");        xhr.send(params);    }    xhr.onreadystatechange = function(){        if(xhr.readyState == 4 && xhr.status == 200){            options.success(xhr.responseText);        }    }    function formsParams(data){        var arr = [];        for(var prop in data){            arr.push(prop + "=" + data[prop]);        }        return arr.join("&");    }}ajax({    url : "a.php",  // url---->地址    type : "POST",   // type ---> 請求方式    async : true,   // async----> 同步：false，非同步：true     data : {        //傳入資訊        name : "張三",        age : 18    },    success : function(data){   //返回接受資訊        console.log(data);    }})

本篇文章到這就結束了（想看更多就到topic.alibabacloud.comAJAX使用手冊欄目中學習），有問題的可以在下方留言提問。