ajax原理及其優(yōu)點(diǎn)是什么

本篇文章給大家分享的是有關(guān)ajax原理及其優(yōu)點(diǎn)是什么，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

創(chuàng)新互聯(lián)成立與2013年，先為開陽(yáng)等服務(wù)建站，開陽(yáng)等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為開陽(yáng)企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

在工作中用了Ajax N多次了，也看過(guò)一些相關(guān)方面的書籍，也算是認(rèn)識(shí)了它，但是一直沒有認(rèn)真總結(jié)和整理過(guò)相關(guān)的東東，失??！
近有閑情，將之總結(jié)如下：
【名稱】
Ajax是Asynchronous JavaScript and XML(以及 DHTML 等)的縮寫。
詳情請(qǐng)移步Ajax: A New Approach to Web Applications
【原理】
簡(jiǎn)單一些，就是通過(guò)使用XmlHttpRequest對(duì)象向服務(wù)器發(fā)送異步請(qǐng)求，獲取返回的數(shù)據(jù)，并使用Javascript和DOM操作頁(yè)面內(nèi)的元素，從而達(dá)到改變頁(yè)面內(nèi)容的目的。
其中XmlHttpRequest對(duì)象是關(guān)鍵，因?yàn)樗С之惒秸?qǐng)求。XMLHttpRequest是完全用來(lái)向服務(wù)器發(fā)出一個(gè)請(qǐng)求的。它所包含的方法和屬性如下所示：
方法：
abort() 導(dǎo)致當(dāng)前正在請(qǐng)求被取消
getAllResponseHeaders() 返回一個(gè)字符串，包含氖響應(yīng)標(biāo)頭的名稱和值
getResponseHeader(name) 返回指定的響應(yīng)標(biāo)頭的值
open(method, url, async, username, password) 設(shè)置請(qǐng)求的方法和目標(biāo)URL。請(qǐng)求可以聲明為同步的（可選），也可以給需要基于窗口誰(shuí)的請(qǐng)求而提供用戶名和口令（可選）
send(content) 發(fā)起帶有指定內(nèi)容（可選）的請(qǐng)求
setRequestHeader(name, value) 利用指定的名稱和值，設(shè)置一個(gè)請(qǐng)求標(biāo)頭
屬性：
onreadystatechange 指派在請(qǐng)求的狀態(tài)發(fā)生變化時(shí)所使用的事件處理程序
readyState 一個(gè)整數(shù)值，指示請(qǐng)求的狀態(tài)如下：
0—-未初始化
1—-正在加載
2—-已加載
3—-交互
4—–完成
responseText 在響應(yīng)里所返回的內(nèi)容
responseXML 如果內(nèi)容是XML，就根據(jù)內(nèi)容而創(chuàng)建XML DOM
status 從服務(wù)器所返回的響應(yīng)狀態(tài)碼。例如：200表示成功，404表示未找到，參考HTTP規(guī)范
statusText 響應(yīng)所返回的狀態(tài)文本消息
對(duì)于此對(duì)象其它介紹請(qǐng)移步：XMLHttpRequest概述
【所包含的技術(shù)】
· 基于XHTML和CSS標(biāo)準(zhǔn)的表示；
· 使用Document Object Model進(jìn)行動(dòng)態(tài)顯示和交互；
· 使用XMLHttpRequest與服務(wù)器進(jìn)行異步通信；
· 使用JavaScript綁定一切；
· 使用XML和XSLT;交換和操作數(shù)據(jù)。
以上的技術(shù)都是一些廣泛使用了的技術(shù)，都屬于比較舊的技術(shù)，ajax是這幾種技術(shù)的結(jié)合體。
【簡(jiǎn)單實(shí)例】

代碼如下:

<!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; 
// 依據(jù)對(duì)象判斷，而不是依據(jù)瀏覽器 
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("不能創(chuàng)建XMLHttpRequest對(duì)象實(shí)列"); 
return false; 
} 
} 
if (!xmlHttp) { 
alert("創(chuàng)建XMLHttpRequest對(duì)象失?。?quot;); 
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){ //判斷對(duì)象狀態(tài) 
var content_obj = document.getElementById("content"); 
content_obj.innerHTML = "正在處理數(shù)據(jù)..."; 
if(xmlHttp.status == 200){ //信息已經(jīng)成功返回，開始處理信息 
var returnStr = xmlHttp.responseText; 
content_obj.innerHTML = returnStr; 
}else{ //頁(yè)面不正常 
content_obj.innerHTML = "您所請(qǐng)求的頁(yè)面存在異常！"; 
} 
} 
} 
</script> 
</head> 
<body> 
<input type="button" value="ajax" onclick="ajax();" /> 
<div id="content">ajax內(nèi)容顯示區(qū)</div> 
</body> 
</html>

切記：當(dāng)發(fā)起一個(gè)POST請(qǐng)求時(shí)，需要對(duì)報(bào)頭 Content-type（內(nèi)容類型）進(jìn)行設(shè)置。這樣，服務(wù)器就知道如何來(lái)處理上傳的內(nèi)容。如果要模擬通過(guò)HTTP協(xié)議的POST方式來(lái)發(fā)送表單，則應(yīng)將內(nèi)容類型設(shè)置為application/x-www-form-urlencoded。
【優(yōu)點(diǎn)】
頁(yè)面無(wú)刷新，用戶體驗(yàn)好；
異步，不打斷用戶操作，響應(yīng)速度快；
“按需取數(shù)據(jù)”，減少冗余請(qǐng)求，減輕服務(wù)器負(fù)擔(dān)；
基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，無(wú)需額外的插件；
可以使數(shù)據(jù)和表現(xiàn)分離；
【存在的問題】
一些設(shè)備還不支持
開發(fā)成本提高
使back按鈕失效，用戶操作后無(wú)法返回；
對(duì)流媒體支持沒有flash之流好；
對(duì)搜索引擎不友好
破壞程序的異常機(jī)制
存在一些安全問題，暴露了一些程序接口和數(shù)據(jù)邏輯

以上就是ajax原理及其優(yōu)點(diǎn)是什么，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：ajax原理及其優(yōu)點(diǎn)是什么
網(wǎng)址分享：http://bm7419.com/article40/jjcgeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、靜態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、App設(shè)計(jì)、網(wǎng)站內(nèi)鏈、網(wǎng)站收錄

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容