Ajax工作原理及優(yōu)缺點(diǎn)的示例分析-創(chuàng)新互聯(lián)
這篇文章將為大家詳細(xì)講解有關(guān)Ajax工作原理及優(yōu)缺點(diǎn)的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營銷網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的額敏網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！1.Ajax是什么？
全稱是 asynchronous javascript and xml，是已有技術(shù)的組合，主要用來實(shí)現(xiàn)客戶端與服務(wù)器端的異步通信效果（無需重新加載整個(gè)網(wǎng)頁的情況下），實(shí)現(xiàn)頁面的局部刷新。
通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新，用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁。
早期的瀏覽器并不能原生支持 ajax，可以使用隱藏幀（iframe）方式變相實(shí)現(xiàn)異步效果，后來的瀏覽器提供了對(duì) ajax 的原生支持。
2. Ajax的工作原理
使用 Ajax 原生方式發(fā)送請(qǐng)求主要通過 XMLHttpRequest(IE7+、Firefox、Chrome、Safari 以及Opera) 、ActiveXObject(IE5 和 IE6)對(duì)象實(shí)現(xiàn)異步通信效果。
創(chuàng)建XMLHttpRequest對(duì)象：
var xhr;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
xhr=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執(zhí)行代碼
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}向服務(wù)器發(fā)送請(qǐng)求：使用 XMLHttpRequest 對(duì)象的 open() 和 send() 方法
//通過 GET 方法發(fā)送信息，請(qǐng)向 URL 添加信息
xhr.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xhr.send();
//像 HTML 表單那樣 POST 數(shù)據(jù)，使用 setRequestHeader() 來添加 HTTP 頭
xhr.open("POST","/try/ajax/demo_post2.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Henry&lname=Ford");
//當(dāng)使用 async=true 時(shí)，需規(guī)定在響應(yīng)處于 onreadystatechange 事件中的就緒狀態(tài)時(shí)執(zhí)行的函數(shù)
xhr.onreadystatechange=function()
{
if (xhr.readyState==4 && xhr.status==200)
{
document.getElementById("myDiv").innerHTML=xhr.responseText;
}
}
xhr.open("GET","/try/ajax/ajax_info.txt",true);
xhr.send();
//當(dāng)您使用 async=false 時(shí),把代碼放到 send() 語句后面即可,不推薦使用
xhr.open("GET","/try/ajax/ajax_info.txt",false);
xhr.send();
document.getElementById("myDiv").innerHTML=xhr.responseText;使用GET還是POST？
與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。
與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。
然而，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：
無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠
//來自服務(wù)器的響應(yīng)并非 XML，使用 responseText 屬性,返回字符串形式的響應(yīng)
document.getElementById("myDiv").innerHTML=xhr.responseText;
//來自服務(wù)器的響應(yīng)是 XML，而且需要作為 XML 對(duì)象進(jìn)行解析，使用 responseXML 屬性,請(qǐng)求 cd_catalog.xml 文件，并解析響應(yīng)
xmlDoc=xhr.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;onreadystatechange事件：當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí)，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。每當(dāng) readyState 改變時(shí)，就會(huì)觸發(fā) onreadystatechange 事件。
//當(dāng) readyState 等于 4 且狀態(tài)為 200 時(shí)，表示響應(yīng)已就緒
xhr.onreadystatechange=function()
{
if (xhr.readyState==4 && xhr.status==200)
{
document.getElementById("myDiv").innerHTML=xhr.responseText;
}
}
//如果存在多個(gè) AJAX 任務(wù)，那么應(yīng)該為創(chuàng)建 XMLHttpRequest 對(duì)象編寫一個(gè)標(biāo)準(zhǔn)的函數(shù)，并為每個(gè) AJAX 任務(wù)調(diào)用該函數(shù)。該函數(shù)調(diào)用應(yīng)該包含 URL 以及發(fā)生 onreadystatechange 事件時(shí)執(zhí)行的任務(wù)（每次調(diào)用可能不盡相同）
function myFunction()
{
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}xhr.readyState的值及解釋：
0：請(qǐng)求未初始化（還沒有調(diào)用 open()）。
1：請(qǐng)求已經(jīng)建立，但是還沒有發(fā)送（還沒有調(diào)用 send()）。
2：請(qǐng)求已發(fā)送，正在處理中（通?，F(xiàn)在可以從響應(yīng)中獲取內(nèi)容頭）。
3：請(qǐng)求在處理中；通常響應(yīng)中已有部分?jǐn)?shù)據(jù)可用了，但是服務(wù)器還沒有完成響應(yīng)的生成。
4：響應(yīng)已完成；您可以獲取并使用服務(wù)器的響應(yīng)了。
xhr.status的值及解釋：
100——客戶必須繼續(xù)發(fā)出請(qǐng)求
101——客戶要求服務(wù)器根據(jù)請(qǐng)求轉(zhuǎn)換HTTP協(xié)議版本
200——交易成功
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請(qǐng)求收到，但返回信息為空
205——服務(wù)器完成了請(qǐng)求，用戶代理必須復(fù)位當(dāng)前已經(jīng)瀏覽過的文件
206——服務(wù)器已經(jīng)完成了部分用戶的GET請(qǐng)求
300——請(qǐng)求的資源可在多處得到
301——?jiǎng)h除請(qǐng)求數(shù)據(jù)
302——在其他地址發(fā)現(xiàn)了請(qǐng)求數(shù)據(jù)
303——建議客戶訪問其他URL或訪問方式
304——客戶端已經(jīng)執(zhí)行了GET，但文件未變化
305——請(qǐng)求的資源必須從服務(wù)器指定的地址得到
306——前一版本HTTP中使用的代碼，現(xiàn)行版本中不再使用
307——申明請(qǐng)求的資源臨時(shí)性刪除
400——錯(cuò)誤請(qǐng)求，如語法錯(cuò)誤
401——請(qǐng)求授權(quán)失敗
402——保留有效ChargeTo頭響應(yīng)
403——請(qǐng)求不允許
404——沒有發(fā)現(xiàn)文件、查詢或URl
405——用戶在Request-Line字段定義的方法不允許
406——根據(jù)用戶發(fā)送的Accept拖，請(qǐng)求資源不可訪問
407——類似401，用戶必須首先在代理服務(wù)器上得到授權(quán)
408——客戶端沒有在用戶指定的餓時(shí)間內(nèi)完成請(qǐng)求
409——對(duì)當(dāng)前資源狀態(tài)，請(qǐng)求不能完成
410——服務(wù)器上不再有此資源且無進(jìn)一步的參考地址
411——服務(wù)器拒絕用戶定義的Content-Length屬性請(qǐng)求
412——一個(gè)或多個(gè)請(qǐng)求頭字段在當(dāng)前請(qǐng)求中錯(cuò)誤
413——請(qǐng)求的資源大于服務(wù)器允許的大小
414——請(qǐng)求的資源URL長于服務(wù)器允許的長度
415——請(qǐng)求資源不支持請(qǐng)求項(xiàng)目格式
416——請(qǐng)求中包含Range請(qǐng)求頭字段，在當(dāng)前請(qǐng)求資源范圍內(nèi)沒有range指示值，請(qǐng)求也不包含If-Range請(qǐng)求頭字段
417——服務(wù)器不滿足請(qǐng)求Expect頭字段指定的期望值，如果是代理服務(wù)器，可能是下一級(jí)服務(wù)器不能滿足請(qǐng)求
500——服務(wù)器產(chǎn)生內(nèi)部錯(cuò)誤
501——服務(wù)器不支持請(qǐng)求的函數(shù)
502——服務(wù)器暫時(shí)不可用，有時(shí)是為了防止發(fā)生系統(tǒng)過載
503——服務(wù)器過載或暫停維修
504——關(guān)口過載，服務(wù)器使用另一個(gè)關(guān)口或服務(wù)來響應(yīng)用戶，等待時(shí)間設(shè)定值較長
505——服務(wù)器不支持或拒絕支請(qǐng)求頭中指定的HTTP版本
1xx:信息響應(yīng)類，表示接收到請(qǐng)求并且繼續(xù)處理
2xx:處理成功響應(yīng)類，表示動(dòng)作被成功接收、理解和接受
3xx:重定向響應(yīng)類，為了完成指定的動(dòng)作，必須接受進(jìn)一步處理
4xx:客戶端錯(cuò)誤，客戶請(qǐng)求包含語法錯(cuò)誤或者是不能正確執(zhí)行
5xx:服務(wù)端錯(cuò)誤，服務(wù)器不能正確執(zhí)行一個(gè)正確的請(qǐng)求
3. Ajax的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：1.無刷新更新數(shù)據(jù)：在不刷新整個(gè)頁面的情況下維持與服務(wù)器通信
2.異步與服務(wù)器通信：使用異步的方式與服務(wù)器通信，不打斷用戶的操作
3.前端與后端負(fù)載均衡：將一些后端的工作移到前端，減少服務(wù)器與帶寬的負(fù)擔(dān)
4.基于規(guī)范被廣泛支持：不需要下載瀏覽器插件或者小程序，但需要客戶允許JavaScript在瀏覽器上執(zhí)行。
5.界面與應(yīng)用分離：Ajax使得界面與應(yīng)用分離，也就是數(shù)據(jù)與呈現(xiàn)分離
缺點(diǎn)： 1.Ajax不支持Back與History功能，即對(duì)瀏覽器機(jī)制的破壞：在動(dòng)態(tài)更新頁面的情況下，用戶無法回到前一頁的頁面狀態(tài)，因?yàn)闉g覽器僅能記憶歷史紀(jì)錄中的靜態(tài)頁面
2.安全問題：AJAX技術(shù)給用戶帶來很好的用戶體驗(yàn)的同時(shí)也對(duì)IT企業(yè)帶來了新的安全威脅，Ajax技術(shù)就如同對(duì)企業(yè)數(shù)據(jù)建立了一個(gè)直接通道。這使得開發(fā)者在不經(jīng)意間會(huì)暴露比以前更多的數(shù)據(jù)和服務(wù)器邏輯。ajax的邏輯可以對(duì)客戶端的安全掃描技術(shù)隱藏起來，允許黑客從遠(yuǎn)端服務(wù)器上建立新的攻擊。還有ajax也難以避免一些已知的安全弱點(diǎn)，諸如跨站點(diǎn)腳步攻擊、SQL注入攻擊和基于credentials的安全漏洞等。
3.對(duì)搜索引擎支持較弱：如果使用不當(dāng)，AJAX會(huì)增大網(wǎng)絡(luò)數(shù)據(jù)的流量，從而降低整個(gè)系統(tǒng)的性能。解決的辦法：可以先用服務(wù)器渲染。
4.破壞程序的異常處理機(jī)制
5.違背URL與資源定位的初衷
6.不能很好地支持移動(dòng)設(shè)備
7.客戶端肥大，太多客戶段代碼造成開發(fā)上的成本
4.應(yīng)用場(chǎng)景
1.動(dòng)態(tài)加載數(shù)據(jù)，按需取得數(shù)據(jù)?！緲湫尾藛?、聯(lián)動(dòng)菜單.../省市聯(lián)動(dòng)】
2.改善用戶體驗(yàn)?！据斎雰?nèi)容前提示、帶進(jìn)度條文件上傳...】
3.電子商務(wù)應(yīng)用?！举徫镘?、郵件訂閱...】
4.訪問第三方服務(wù)?！驹L問搜索服務(wù)、rss閱讀器】
5.數(shù)據(jù)的布局刷新
不適用于搜索，基本的導(dǎo)航，替換大量的文本，部分簡單的表單
關(guān)于“Ajax工作原理及優(yōu)缺點(diǎn)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
網(wǎng)站題目：Ajax工作原理及優(yōu)缺點(diǎn)的示例分析-創(chuàng)新互聯(lián)
URL標(biāo)題：http://muchs.cn/article48/csgpep.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站策劃、品牌網(wǎng)站制作、軟件開發(fā)、網(wǎng)站營銷、靜態(tà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í)需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- PHP如何通過const和define()定義常量數(shù)組-創(chuàng)新互聯(lián)
- Linux筆記17使用Bind提供域名解析服務(wù)。-創(chuàng)新互聯(lián)
- c語言簡單日歷，萬年歷；-創(chuàng)新互聯(lián)
- .rp指的是什么文件-創(chuàng)新互聯(lián)
- JVM調(diào)優(yōu)經(jīng)驗(yàn)（不一定準(zhǔn)確）-創(chuàng)新互聯(lián)
- 嵌入式C語言基礎(chǔ)-創(chuàng)新互聯(lián)
- Oracle怎么實(shí)現(xiàn)跨平臺(tái)傳輸PDB-創(chuàng)新互聯(lián)
- 馬云回國，首談ChatGPT。又是新一個(gè)風(fēng)口？ 2023-05-28
- 火爆的ChatGPT，來聊聊它的熱門話題 2023-02-20
- ChatGPT是什么 2023-02-20
- ChatGPT的發(fā)展歷程 2023-02-20
- ChatGPT是什么?ChatGPT是聊天機(jī)器人嗎? 2023-05-05
- 爆紅的ChatGPT，誰會(huì)丟掉飯碗？ 2023-02-20
- 怎樣利用chatGPT快速賺錢？ 2023-05-05
- ChatGPT的應(yīng)用ChatGPT對(duì)社會(huì)的利弊影響 2023-02-20