交互一直以來都是前端的重中之重,前端的職能在我看來有一大部分就是向后臺調(diào)取數(shù)據(jù)并且將數(shù)據(jù)展示在前臺頁面,交互可以說是前端er的基本功,必須可以保證在不出錯(cuò)的前提下越來越快,而如何向后臺調(diào)取數(shù)據(jù)呢,首先必須先說說ajax

記得剛剛學(xué)習(xí)ajax的時(shí)候每天還在攻克各種各樣難纏的效果,那個(gè)時(shí)候就想著的是寫出越來越炫的效果,但當(dāng)你真的學(xué)過ajax之后就發(fā)現(xiàn)交互的魅力遠(yuǎn)遠(yuǎn)大于效果

現(xiàn)在網(wǎng)上大多的頁面基本上都是動態(tài)的,公司每天只是需要通過后臺管理系統(tǒng)更新信息而前端頁面就會跟著改變,而這一切都得益于ajax的出現(xiàn),言歸正傳就讓大家和我一起領(lǐng)略一下ajax

1.ajax的核心是XMLHttpRequest對象,大家都知道js其實(shí)就是對象的語言,在對象中調(diào)用來調(diào)用去,而在這個(gè)xhr對象上也綁定的各種各樣的方法供人們調(diào)用

首先我給大家介紹幾個(gè)常用的其余的大家自己拓展

? ? ? ? a.xhr.open(type,url,asyn)這是ajax開始的第二步,type為get或post,url是你所請求的后臺地址,asyn是是否為異步,異步為true,不建議使用false不過現(xiàn)在好像已經(jīng)不能用了

同步和異步的區(qū)別:就像去飯店吃飯,同步就是一個(gè)一個(gè)排隊(duì),只有一個(gè)服務(wù)員,而異步就是一起來,有多個(gè)服務(wù)員,放在我們當(dāng)前環(huán)境下就是,同步就是我請求時(shí)頁面不可以進(jìn)行其他操作,就像form表單,而異步就可以在無刷新情況下進(jìn)行請求并且進(jìn)行DOM操作

? ? b.xhr.send(),在get方式中,open的url會進(jìn)行傳參,而post方式中會對發(fā)送的數(shù)據(jù)進(jìn)行處理,如果傳送的是字符串,則發(fā)送時(shí)需要加xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");然后在通過send傳參向后臺傳送數(shù)據(jù)

? ? c.接收 首先需要明白的是ajax是需要響應(yīng)的,只有當(dāng)xhr的狀態(tài)碼和服務(wù)器狀態(tài)碼都成功是才可以接收成功,推薦兩個(gè)函數(shù)

? ? ? ? (1)xhr.onreadystatechange

? ? ? ? (2)xhr.onload

二者作用一樣,但用第一個(gè)更為嚴(yán)謹(jǐn)

以下是我自己封裝的ajax

這只是ajax,前端交互的方式有許多種,欲知后事如何,且聽下回分解!