詳解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 call apply使用 JavaScript對(duì)象的方法綁定到DOM事件后this指向問(wèn)題
JavaScript對(duì)象與DOM對(duì)象進(jìn)行綁定會(huì)遇到一個(gè)問(wèn)題：如果被綁定的對(duì)象的方法中包含this關(guān)鍵字，當(dāng)事件被觸發(fā)時(shí)this指向的卻是DOM對(duì)象，而不是之前的JS對(duì)象。2011-09-09
基于JavaScript實(shí)現(xiàn)自定義滾動(dòng)條
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)自定義滾動(dòng)條，可以直接使用的滾動(dòng)條，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
今天在項(xiàng)目碰到一個(gè)問(wèn)題，之前在項(xiàng)目首頁(yè)實(shí)現(xiàn)單列表的顯示和隱藏，通過(guò)wx:if判斷就可實(shí)現(xiàn)，現(xiàn)在要實(shí)現(xiàn)多列表的單項(xiàng)顯示和隱藏功能應(yīng)該如何實(shí)現(xiàn)呢？下面小編給大家?guī)?lái)了微信小程序之多列表的顯示和隱藏功能，感興趣的朋友一起看看吧2018-08-08
基于JavaScript實(shí)現(xiàn)智能右鍵菜單
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)智能右鍵菜單的相關(guān)資料,需要的朋友可以參考下2016-03-03
這篇文章主要為大家詳細(xì)介紹了JavaScript中雙向數(shù)據(jù)綁定，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Javascript showModalDialog兩個(gè)窗體之間傳值
前一篇文章Javascript怎么在兩個(gè)窗體之間傳值中講到了如何利用window.open()方法打開(kāi)新窗體，并在兩個(gè)窗體之間傳值的方法。2009-09-09
這篇文章主要介紹了使用async await 封裝 axios的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
JavaScript對(duì)象屬性操作實(shí)例解析
這篇文章主要介紹了JavaScript對(duì)象屬性操作實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
Javascript load Page,load css,load js實(shí)現(xiàn)代碼
通過(guò)js動(dòng)態(tài)載入頁(yè)面和css或js的實(shí)現(xiàn)代碼，需要的朋友可以參考下。國(guó)外人寫(xiě)的，可以參考下。2010-03-03
JavaScript實(shí)現(xiàn)日期格式化詳細(xì)實(shí)例
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)日期格式化的相關(guān)資料,JavaScript中的日期對(duì)象提供了許多方法和屬性,可以通過(guò)它們來(lái)進(jìn)行日期的格式化,需要的朋友可以參考下2023-09-09