這篇文章主要的敘述關於封裝ajax的介紹，還有關於ajax的異步請求，現在我們一起來看這篇文章吧
Ajax
## 說道ajax到底什麼是ajax？ ajax是一種創建互動網頁應用程式的技術。
ajax的應用情境有：（地圖）即時更新，表單驗證等....
ajax的優缺點：
# 實現局部更新（無刷新狀態下），2.減輕了伺服器端的壓力
缺點：1.破壞了瀏覽器前進與後退機制（因為ajax自動更新）
## 2.且一個Ajax請求增加了，且也會出現頁面載入慢的狀況。
以3.以搜尋引擎的支援比為較低。
4.ajax的安全性問題且不太好（可用資料加密解決）。
先說明：若要使用ajax必須要有後端環境的支援（伺服器端）。
HTTP請求
HTTP請求有兩種方式
者「使用」網址與擷取資料 儲存量較少，安全係數比較低。
POST：用於上傳數據，以POST安全性為一般比（GET好一點），容量幾乎是無限（多用於表單）。
Ajax的使用
使用ajax總共有4個步驟：1.建立ajax、2.連接伺服器、3.傳送請求、4.接受回傳值。
創建
相容處理
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else{
xhr = new ActiveXObject("Mricosoft.XMLHTTP");
}登入後複製
連接伺服器
"請求方式（GET/POST）"，url路徑，「非同步/同步」）。
第三個參數：true===》非同步、false===》同步。 （想看更多就到PHP中文網
AJAX開發手冊
欄位中學習）
當請求方式為POST的時候，程式碼寫法如上；
#當請求方式為GET的時候，使用xhr.open（"請求方式（GET/POST）"，url路徑“？”請求資料 ，“非同步/同步”）。
送上要求
# 使用xhr.send（選擇 .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);
}
})登入後複製
本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。
以上是Ajax的優缺點是什麼？ ajax如何正確的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
