[[351069]]

 前言

Ajax是Asynchronous JavaScript and XML的縮寫(xiě)，是JavaScript、XML、CSS、DOM等多個(gè)技術(shù)的組合。Ajax的工作原理是一個(gè)頁(yè)面的指定位置可以加載另一個(gè)頁(yè)面所有的輸出內(nèi)容，這樣就實(shí)現(xiàn)了一個(gè)靜態(tài)頁(yè)面也能獲取到數(shù)據(jù)庫(kù)中的返回?cái)?shù)據(jù)信息了。所以Ajax技術(shù)實(shí)現(xiàn)了一個(gè)靜態(tài)網(wǎng)頁(yè)在不刷新整個(gè)頁(yè)面的情況下與服務(wù)器通信，減少了用戶(hù)等待時(shí)間，同時(shí)也降低了網(wǎng)絡(luò)流量，增強(qiáng)了客戶(hù)體驗(yàn)的友好程度。本文將為大家詳細(xì)介紹關(guān)于Ajax的工作原理以及實(shí)現(xiàn)步驟。

1. Ajax的概念?

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

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

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

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

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

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

含義：Ajax是用于網(wǎng)頁(yè)上面進(jìn)行局部刷新的一門(mé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)移到客戶(hù)端執(zhí)行，利用客戶(hù)端閑置的資源進(jìn)行處理
• 在只局部刷新的情況下更新頁(yè)面，增加了頁(yè)面反應(yīng)速度，使用戶(hù)體驗(yàn)更友好

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

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

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

「主要作用：」

• 發(fā)送同步或者異步請(qǐng)求
• 進(jìn)行網(wǎng)頁(yè)的局部刷新
• 下拉列表的數(shù)據(jù)來(lái)源于服務(wù)器的這種
• 做前后分離的開(kāi)發(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('異步都沒(méi)有 換瀏覽器吧....'); 
     } 
    } 
    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)聽(tīng)Ajax中4種狀態(tài)

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

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

if(ajax.status==200){//說(shuō)明服務(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"); 

結(jié)語(yǔ)

本篇關(guān)于Ajax的介紹就先到這里結(jié)束了，后續(xù)會(huì)出更多關(guān)于Ajax系列更多文章，謝謝大家支持!