詳解JavaScript原生封裝ajax請(qǐng)求和Jquery中的ajax請(qǐng)求
前言:ajax的神奇之處在于JavaScript 可在不重載頁(yè)面的情況與 Web 服務(wù)器交換數(shù)據(jù),即在不需要刷新頁(yè)面的情況下,就可以產(chǎn)生局部刷新的效果。Ajax 在瀏覽器與 Web 服務(wù)器之間使用異步數(shù)據(jù)傳輸(HTTP 請(qǐng)求),當(dāng)然也可同步,這樣就可使網(wǎng)頁(yè)從服務(wù)器請(qǐng)求少量的信息,而不是整個(gè)頁(yè)面。Ajax使我們的項(xiàng)目更小、更快,更友好,在前端開(kāi)發(fā)有很高的地位,也是面試題的熱點(diǎn)。本次測(cè)試是在localhost本地環(huán)境。
1、原生ajax
(1)html前端代碼get請(qǐng)求方式創(chuàng)建一個(gè)ajax實(shí)例xhr open()方法傳入三個(gè)參數(shù),第一個(gè)是請(qǐng)求方式(一般為get和post),第二個(gè)參數(shù)是請(qǐng)求地址,第三個(gè)布爾值,true代表異步,false代表同步 send發(fā)送數(shù)據(jù)(get用不上,get發(fā)送的數(shù)據(jù)一般在鏈接后面,所以為顯式傳值,形式為鍵值對(duì))綁定監(jiān)聽(tīng)函數(shù)判斷狀態(tài)碼 xhr.responseText得到返回?cái)?shù)據(jù)
var xhr = new XMLHttpRequest() xhr.open("GET","js/text.js",true) xhr.send() xhr.onreadystatechange = function(){ // if(xhr.readyState === 4&& xhr.status === 200){ var data = xhr.responseText var datas = JSON.parse(data) console.log(datas) } }
控制臺(tái)輸出
(2)html前端代碼post請(qǐng)求方式 post傳遞方式需要設(shè)置頭信息,實(shí)測(cè)簡(jiǎn)單的請(qǐng)求不設(shè)置也是可以這里的傳值是放在send()方法里面的,所以為隱式傳值,其他的都和get相同
var xhr = new XMLHttpRequest() xhr.open("POST","js/text.js",true) xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send() xhr.onreadystatechange = function(){ if(xhr.readyState === 4&& xhr.status === 200){ var data = xhr.responseText var datas = JSON.parse(data) console.log(datas) } }
控制臺(tái)輸出
(3)被請(qǐng)求js代碼
{ "name":"小明", "age":24, "array":[1,51,3,4,4,6,64] }
2、函數(shù)封裝 這里函數(shù)封裝的一個(gè)ajax方法,用的時(shí)候直接調(diào)用該方法,傳入設(shè)置參數(shù)即可
參數(shù)有請(qǐng)求類(lèi)型type,請(qǐng)求地址url,傳入數(shù)據(jù)data(本案例無(wú),沒(méi)有也需要“”占位),請(qǐng)求成功返回函數(shù)success(也可多加一個(gè)失敗返回函數(shù))
(1)前端JS代碼
function Ajax(type, url, data, success){ var xhr = null; // 初始化xhr if(window.XMLHttpRequest){ //兼容IE xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject('Microsoft.XMLHTTP') } var type = type.toUpperCase(); var random = Math.random(); //創(chuàng)建隨機(jī)數(shù) if(type == 'GET'){ if(data){ xhr.open('GET', url + '?' + data, true); //如果有數(shù)據(jù)就拼接 } else { xhr.open('GET', url + '?t=' + random, true); //如果沒(méi)有數(shù)據(jù)就傳入一個(gè)隨機(jī)數(shù) } xhr.send(); } else if(type == 'POST'){ xhr.open('POST', url, true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send(data); } xhr.onreadystatechange = function(){ // 創(chuàng)建監(jiān)聽(tīng)函數(shù) if(xhr.readyState == 4&&xhr.status == 200){ success(xhr.responseText); } } } Ajax('get', 'js/text.js', "", function(data){ //調(diào)用函數(shù) console.log(JSON.parse(data)); });
(2)被請(qǐng)求js代碼
{ "name":"小明", "age":24, "array":[1,51,3,4,4,6,64] }
控制臺(tái)輸出
3、Jquery中的Ajax(先引入Jquery)(1)前端簡(jiǎn)單的JS代碼 jquery中的ajax是被庫(kù)封裝好了的,我們直接用即可,下面是簡(jiǎn)單的ajax請(qǐng)求,它也有很多參數(shù),但基礎(chǔ)的就這些了
$.ajax({ url:"./js/text.js", type:"GET", dataType:"json", success:function(data){ console.log(data) }, error:function(res){ console.log("請(qǐng)求失??!") } })
(2)被請(qǐng)求js代碼
{ "name":"小明", "age":24, "array":[1,51,3,4,4,6,64] }
控制臺(tái)輸出
以上如有不對(duì)之處,請(qǐng)大家多多指正,感謝大家對(duì)腳本之家的支持。
相關(guān)文章
javascript 手動(dòng)給表增加數(shù)據(jù)的小例子
這篇文章介紹了js手動(dòng)給表增加數(shù)據(jù)的實(shí)例代碼,有需要的朋友可以參考一下2013-07-07使用JSX實(shí)現(xiàn)Carousel輪播組件的方法(前端組件化)
做這個(gè)輪播圖的組件,我們先從一個(gè)最簡(jiǎn)單的 DOM 操作入手。使用 DOM 操作把整個(gè)輪播圖的功能先實(shí)現(xiàn)出來(lái),然后在一步一步去考慮怎么把它設(shè)計(jì)成一個(gè)組件系統(tǒng)2021-04-04Js逆向?qū)崿F(xiàn)滑動(dòng)驗(yàn)證碼圖片還原的示例代碼
這篇文章主要介紹了Js逆向?qū)崿F(xiàn)滑動(dòng)驗(yàn)證碼圖片還原的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03JS隨機(jī)洗牌算法之?dāng)?shù)組隨機(jī)排序
這篇文章主要介紹了JS隨機(jī)洗牌算法之給數(shù)組隨機(jī)排序的相關(guān)資料,需要的朋友可以參考下2016-03-03js中?new?Date().getTime()得到的是毫秒數(shù)時(shí)間戳
今天在寫(xiě)一個(gè)函數(shù)的時(shí)候需要用的一個(gè)時(shí)間戳方便調(diào)用不同的隨機(jī)數(shù)?那么時(shí)間戳就是比較好的方式,主要怕瀏覽器緩存數(shù)據(jù),下面就為大家簡(jiǎn)單介紹一下2023-07-07