溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關ajax原理及其優點是什么，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
在工作中用了Ajax N多次了，也看過一些相關方面的書籍，也算是認識了它，但是一直沒有認真總結和整理過相關的東東，失敗！
近有閑情，將之總結如下：
【名稱】
Ajax是Asynchronous JavaScript and XML(以及 DHTML 等)的縮寫。
詳情請移步Ajax: A New Approach to Web Applications
【原理】
簡單一些，就是通過使用XmlHttpRequest對象向服務器發送異步請求，獲取返回的數據，并使用Javascript和DOM操作頁面內的元素，從而達到改變頁面內容的目的。
其中XmlHttpRequest對象是關鍵，因為它支持異步請求。XMLHttpRequest是完全用來向服務器發出一個請求的。它所包含的方法和屬性如下所示：
方法：
abort() 導致當前正在請求被取消
getAllResponseHeaders() 返回一個字符串，包含氖 響應標頭的名稱和值
getResponseHeader(name) 返回指定的響應標頭的值
open(method, url, async, username, password) 設置請求的方法和目標URL。請求可以聲明為同步的（可選），也可以給需要基于窗口誰的請求而提供用戶名和口令（可選）
send(content) 發起帶有指定內容（可選）的請求
setRequestHeader(name, value) 利用指定的名稱和值，設置一個請求標頭
屬性：
onreadystatechange 指派在請求的狀態發生變化時所使用的事件處理程序
readyState 一個整數值，指示請求的狀態如下：
0—-未初始化
1—-正在加載
2—-已加載
3—-交互
4—–完成
responseText 在響應里所返回的內容
responseXML 如果內容是XML，就根據內容而創建XML DOM
status 從服務器所返回的響應狀態碼。例如：200表示成功，404表示未找到，參考HTTP規范
statusText 響應所返回的狀態文本消息
對于此對象其它介紹請移步：XMLHttpRequest概述
【所包含的技術】
· 基于XHTML和CSS標準的表示；
· 使用Document Object Model進行動態顯示和交互；
· 使用XMLHttpRequest與服務器進行異步通信；
· 使用JavaScript綁定一切；
· 使用XML和XSLT;交換和操作數據。
以上的技術都是一些廣泛使用了的技術，都屬于比較舊的技術，ajax是這幾種技術的結合體。
【簡單實例】
代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function ajax() {
var xmlHttp;
// 依據對象判斷，而不是依據瀏覽器
if(window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();//mozilla瀏覽器
}else if(window.ActiveXObject){
try{
xmlHttp=new ActiveXObject("Msxmlx2.XMLHTTP"); //IE老版本
}catch(e){}
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE新版本
}catch(e){}
if(!xmlHttp){
window.alert("不能創建XMLHttpRequest對象實列");
return false;
}
}
if (!xmlHttp) {
alert("創建XMLHttpRequest對象失敗！");
return false;
}xmlHttp.open('POST', 'index.php?get_a=2&get_b=3', false);
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=UTF-8;');
xmlHttp.send("post_a=1&post_b=2");
xmlHttp.onreadystatechange = function() {
alert(xmlHttp.readyState);
}
if(xmlHttp.readyState == 4){ //判斷對象狀態
var content_obj = document.getElementById("content");
content_obj.innerHTML = "正在處理數據...";
if(xmlHttp.status == 200){ //信息已經成功返回，開始處理信息
var returnStr = xmlHttp.responseText;
content_obj.innerHTML = returnStr;
}else{ //頁面不正常
content_obj.innerHTML = "您所請求的頁面存在異常！";
}
}
}
</script>
</head>
<body>
<input type="button" value="ajax" onclick="ajax();" />
<div id="content">ajax內容顯示區</div>
</body>
</html>
切記：當發起一個POST請求時，需要對報頭 Content-type（內容類型）進行設置。這樣，服務器就知道如何來處理上傳的內容。如果要模擬通過HTTP協議的POST方式來發送表單，則應將內容類型設置為application/x-www-form-urlencoded。
【優點】
頁面無刷新，用戶體驗好；
異步，不打斷用戶操作，響應速度快；
“按需取數據”，減少冗余請求，減輕服務器負擔；
基于標準化的并被廣泛支持的技術，無需額外的插件；
可以使數據和表現分離；
【存在的問題】
一些設備還不支持
開發成本提高
使back按鈕失效，用戶操作后無法返回；
對流媒體支持沒有flash之流好；
對搜索引擎不友好
破壞程序的異常機制
存在一些安全問題，暴露了一些程序接口和數據邏輯
以上就是ajax原理及其優點是什么，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
