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