ajax原理總結附簡單一實例及其優點_AJAX相關

來源:互聯網
上載者:User
在工作中用了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之流好;
對搜尋引擎不友好
破壞程式的異常機制
存在一些安全問題,暴露了一些程式介面和資料邏輯
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.