這篇文章主要介紹“如何使用局部刷新Ajax技術(shù)”，在日常操作中，相信很多人在如何使用局部刷新Ajax技術(shù)問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何使用局部刷新Ajax技術(shù)”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)建站長期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為伊美企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)，伊美網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

1. Ajax的概念?

「以前瀏覽器如何實(shí)現(xiàn)通信呢：」

Jsp頁面發(fā)送請(qǐng)求--->servlet進(jìn)行接收--->數(shù)據(jù)放到域?qū)ο?-->轉(zhuǎn)發(fā)給jsp頁面

同步的發(fā)送請(qǐng)求：這個(gè)請(qǐng)求的特點(diǎn)，我們每一次的轉(zhuǎn)發(fā)，瀏覽器都要重新渲染整個(gè)頁面、假設(shè)我的頁面有100k的數(shù)據(jù)，只有1k的數(shù)據(jù)需要刷新，如果使用轉(zhuǎn)發(fā)的方式的話那么每一次渲染的數(shù)據(jù)都是100k，這樣瀏覽器的渲染壓力就變大了

「Ajax技術(shù)實(shí)現(xiàn)通信：」

引入Ajax：假設(shè)我們使用了Ajax的技術(shù)的話，那么我們這100k的數(shù)據(jù)我們有99k的數(shù)據(jù)都不需要刷新，只是需要刷新這1k的數(shù)據(jù)，這就是Ajax

在一開始的時(shí)候，所有的瀏覽器并不支持所謂的局部刷新技術(shù)，而且一開始大多數(shù)的瀏覽器并不看好這門技術(shù)，這個(gè)時(shí)候微軟首先就在IE瀏覽器中引入了異步請(qǐng)求的這個(gè)概念，到后來看到了Ajax在瀏覽器上的優(yōu)秀表現(xiàn)，于是其他的瀏覽器廠商也就引入了Ajax這個(gè)技術(shù)

含義：Ajax是用于網(wǎng)頁上面進(jìn)行局部刷新的一門技術(shù)

2、Ajax技術(shù)的優(yōu)缺點(diǎn)

「Ajax技術(shù)優(yōu)點(diǎn)：」

• 核心技術(shù)：Ajax的核心技術(shù)是XMLHttpRequest，它是JavaScript中的一個(gè)對(duì)象

• 減輕了服務(wù)器端負(fù)擔(dān)，將一部分以前由服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)移到客戶端執(zhí)行，利用客戶端閑置的資源進(jìn)行處理

• 在只局部刷新的情況下更新頁面，增加了頁面反應(yīng)速度，使用戶體驗(yàn)更友好

「Ajax技術(shù)缺點(diǎn)：」

• Ajax的缺點(diǎn)是不利于SEO推廣優(yōu)化，因?yàn)樗阉饕鏌o法直接訪問到Ajax請(qǐng)求的內(nèi)容

3、Ajax技術(shù)能干嘛?

「主要作用：」

• 發(fā)送同步或者異步請(qǐng)求

• 進(jìn)行網(wǎng)頁的局部刷新

• 下拉列表的數(shù)據(jù)來源于服務(wù)器的這種

• 做前后分離的開發(fā)

• 表單元素的動(dòng)態(tài)認(rèn)證

4、Ajax技術(shù)的具體使用

「使用步驟：」

創(chuàng)建獲取Ajax對(duì)象的方法

function getAjax () {     var ajax;     try{      ajax=new ActiveXObject("microsoft.xmlhttp");     }catch(e){      try{       ajax=new XMLHttpRequest();      }catch(e){       alert('異步都沒有 換瀏覽器吧....');      }     }     return ajax;   }

獲取Ajax對(duì)象

var ajax=getAjax();

準(zhǔn)備發(fā)送Ajax請(qǐng)求

ajax.open("GET","${pageContext.request.contextPath}/dates.action");

發(fā)送Ajax請(qǐng)求

ajax.send(null);

監(jiān)聽Ajax中4種狀態(tài)

ajax.onreadystatechange=function(){         if(ajax.readyState==4){ /     } }

判斷服務(wù)器是否成功響應(yīng)

if(ajax.status==200){//說明服務(wù)器的響應(yīng)是正確的         var time=ajax.responseText;         //要將這個(gè)數(shù)據(jù)直接賦值給一個(gè)一個(gè)標(biāo)簽         document.getElementsByTagName('span')[0].innerText=time;       }

Get方法數(shù)據(jù)傳輸（放到url后面）

ajax.open("GET","${pageContext.request.contextPath}/dates.action?userName=qianyu&password=123");

Post方式發(fā)送請(qǐng)求和數(shù)據(jù)

//設(shè)置請(qǐng)求頭        ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //發(fā)送數(shù)據(jù) ajax.send("userName=qianyu&password=123");

到此，關(guān)于“如何使用局部刷新Ajax技術(shù)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

網(wǎng)站欄目：如何使用局部刷新Ajax技術(shù)
文章URL：http://www.chinadenli.net/article34/gccdpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、外貿(mào)建站、全網(wǎng)營銷推廣、網(wǎng)頁設(shè)計(jì)公司、Google、微信公眾號(hào)

廣告

聲明：本網(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)