小編給大家分享一下Ajax怎么用,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
洛江ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景,ssl證書未來市場(chǎng)廣闊!成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道,可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:18982081108(備注:SSL證書合作)期待與您的合作!一、什么是Ajax
Ajax英文全稱為“ Asynchr JavsScript and XML”(異步的JavaScript和XML),是一種創(chuàng)建交互式網(wǎng)頁的開發(fā)技術(shù)。
二、Ajax技術(shù)的核心
Ajax是一系列相關(guān)技術(shù)的融合,其核心包括XMLHttpRequest、JavsScript和DOM技術(shù),數(shù)據(jù)格式的不同可能會(huì)用到Json或者XML的技術(shù)。
XMLHttpRequest是它的核心的內(nèi)容,它能夠?yàn)轫撁嬷械腏avaScript腳本提供特定的通信方式,從而使頁面的javascript腳本和服務(wù)器之間形成動(dòng)態(tài)交互的效果,XMLHTTPRequest的較大的優(yōu)點(diǎn)是頁面內(nèi)的javascript腳本可以不用刷新頁面,而直接和服務(wù)器發(fā)生交互,從而實(shí)現(xiàn)頁面無刷新的效果。
三、XMLHttpRequest方法屬性描述
1、方法描述
abort()停止當(dāng)前請(qǐng)求
getAllResponseHeaders()把HTTP請(qǐng)求的所有響應(yīng)首部作為鍵/值對(duì)返回
getResponseHeader("header")返回指定首部的串值
open("method","URL",[asyncFlag],["userName"],["password"])建立對(duì)服務(wù)器的調(diào)用。method參數(shù)可以是GET、POST或PUT。
url參數(shù)可以是相對(duì)URL或絕對(duì)URL。這個(gè)方法還包括3個(gè)可選的參數(shù),是否異步,用戶名,密碼
send(content)向服務(wù)器發(fā)送請(qǐng)求
setRequestHeader("header", "value")把指定首部設(shè)置為所提供的值。在設(shè)置任何首部之前必須先調(diào)用open()。
設(shè)置header并和請(qǐng)求一起發(fā)送 ('post'方法一定要 )
XMLHttpRequest 對(duì)象屬性描述
2、方法描述
onreadystatechange狀態(tài)改變的事件觸發(fā)器,每個(gè)狀態(tài)改變時(shí)都會(huì)觸發(fā)這個(gè)事件處理器,通常會(huì)調(diào)用一個(gè)JavaScript函數(shù)
readyState請(qǐng)求的狀態(tài)。有5個(gè)可取值:0 = 未初始化,1 = 正在加載,2 = 已加載,3 = 交互中,4 = 完成
responseText服務(wù)器的響應(yīng),返回?cái)?shù)據(jù)的文本。
responseXML服務(wù)器的響應(yīng),返回?cái)?shù)據(jù)的兼容DOM的XML文檔對(duì)象 ,這個(gè)對(duì)象可以解析為一個(gè)DOM對(duì)象。
responseBody服務(wù)器返回的主題(非文本格式)
responseStream服務(wù)器返回的數(shù)據(jù)流
status服務(wù)器的HTTP狀態(tài)碼(如:404 = "文件末找到" 、200 ="成功" ,等等)
statusText服務(wù)器返回的狀態(tài)文本信息 ,HTTP狀態(tài)碼的相應(yīng)文本(OK或Not Found(未找到)等等)
四、Ajax工作原理原理
AJAX的工作原理相當(dāng)于在用戶和服務(wù)器之間加了一個(gè)中間層,使用戶操作與服務(wù)器相應(yīng)異步化。并不是所有的用戶請(qǐng)求
都提交給服務(wù)器,像一些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等都交給AJAX引擎自己來做,只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)再由
AJAX引擎代為向服務(wù)器提交請(qǐng)求。如圖:
五、Ajax的優(yōu)點(diǎn)
1、減輕服務(wù)器的負(fù)擔(dān),提升了網(wǎng)站的性能。
2、無刷新更新頁面,減少了用戶等待網(wǎng)站加載的時(shí)間。
3、用戶體驗(yàn)更加友好,可以避免出現(xiàn)白屏的情況。
4、Ajax是基于標(biāo)準(zhǔn)化并且廣泛使用的技術(shù)幾乎所有的主流瀏覽器都支持該技術(shù),ye不需要單獨(dú)安裝插件。
5、Ajax可以使Web中的頁面和應(yīng)用分離,便于分工合作。
六、Ajax缺點(diǎn)
1、對(duì)于移動(dòng)設(shè)備不能很好的支持。
2、Ajax干掉了back按鈕,即對(duì)瀏覽器后退機(jī)制的破壞。
3、安全問題。比如:跨站點(diǎn)腳步攻擊、SQL注入攻擊和基于credentials的安全漏洞等。
4、對(duì)搜索引擎的支持比較弱。
5、破壞了程序的異常機(jī)制。至少從目前看來,像ajax.dll,ajaxpro.dll這些ajax框架是會(huì)破壞程序的異常機(jī)制的。
造成調(diào)試的困難。
七、使用原則
1、Ajax適用場(chǎng)景
表單驅(qū)動(dòng)的交互
深層次的樹的導(dǎo)航
快速的用戶與用戶間的交流響應(yīng)
類似投票、yes/no等無關(guān)痛癢的場(chǎng)景
對(duì)數(shù)據(jù)進(jìn)行過濾和操縱相關(guān)數(shù)據(jù)的場(chǎng)景
普通的文本輸入提示和自動(dòng)完成的場(chǎng)景
2、Ajax不適用場(chǎng)景
部分簡(jiǎn)單的表單
搜索
基本的導(dǎo)航
替換大量的文本
對(duì)呈現(xiàn)的操縱
八、原生AJAX寫法
var XHR=null; if (window.XMLHttpRequest) { // 非IE內(nèi)核 XHR = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE內(nèi)核,這里早期IE的版本寫法不同,具體可以查詢下 XHR = new ActiveXObject("Microsoft.XMLHTTP"); } else { XHR = null; } if(XHR){ XHR.open("GET", "ajaxServer.action"); XHR.onreadystatechange = function () { // readyState值說明 // 0,初始化,XHR對(duì)象已經(jīng)創(chuàng)建,還未執(zhí)行open // 1,載入,已經(jīng)調(diào)用open方法,但是還沒發(fā)送請(qǐng)求 // 2,載入完成,請(qǐng)求已經(jīng)發(fā)送完成 // 3,交互,可以接收到部分?jǐn)?shù)據(jù) // status值說明 // 200:成功 // 404:沒有發(fā)現(xiàn)文件、查詢或URl // 500:服務(wù)器產(chǎn)生內(nèi)部錯(cuò)誤 if (XHR.readyState == 4 && XHR.status == 200) { // 這里可以對(duì)返回的內(nèi)容做處理 // 一般會(huì)返回JSON或XML數(shù)據(jù)格式 console.log(XHR.responseText); // 主動(dòng)釋放,JS本身也會(huì)回收的 XHR = null; } }; XHR.send(); }
以上是“Ajax怎么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!