亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

如何封裝一個(gè)Ajax函數(shù)

 更新時(shí)間:2021年05月06日 16:50:53   作者:小白可別不舉鐵  
這篇文章主要介紹了如何封裝一個(gè)Ajax函數(shù),幫助大家更好的理解和學(xué)習(xí)網(wǎng)絡(luò)編程,感興趣的朋友可以了解下

如何封裝Ajax函數(shù)

一個(gè)Ajax函數(shù):

// 一個(gè)Ajax函數(shù)
var xhr = null;
if(window.XMLHttpRequest){
   xhr = new XMLHttpRequest;
}else{
   xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET","https://jsonplaceholder.typicode.com/users");
xhr.send(null);
xhr.onreadystatechange = function(){
   if(this.readyState === 4){
        console.log(xhr.responseText)
    }
}

封裝自己的 Ajax 函數(shù)

參數(shù)1:{string} 請(qǐng)求方法--method
參數(shù)2:{string} 請(qǐng)求地址--url
參數(shù)3:{object} 請(qǐng)求參數(shù)--params
參數(shù)4:{function} 請(qǐng)求完成后,執(zhí)行的回調(diào)函數(shù)--done

 function ajax(method,url,params,done){
//  統(tǒng)一將method方法中的字母轉(zhuǎn)成大寫(xiě),后面判斷GET方法時(shí) 就簡(jiǎn)單點(diǎn)
  method = method.toUpperCase(); 
  //IE6的兼容
  var xhr = window.XMLHttpRequest
   ? new XMLHttpRequest()
   : new ActiveXObject("Microsoft.XMLHTTP");

  //創(chuàng)建打開(kāi)一個(gè)連接 open
             
  //將對(duì)象格式的參數(shù)轉(zhuǎn)為urlencoded模式
  //新建一個(gè)數(shù)組,使用for循環(huán),將對(duì)象格式的參數(shù),
  //以(id = 1)的形式,每一個(gè)鍵值對(duì)用 & 符號(hào)連接
 var pairs = [];
 for(var k in params){
     pairs.push(k + "=" + params[k]);
  }
  var str = pairs.join("&");       
  //判斷是否是get方法 , get方法的話,需要更改url的值
 if(method == "GET"){
       url += "?" + str;
  }
             
//創(chuàng)建打開(kāi)一個(gè)連接
 xhr.open(method,url);

var data = null;
if(method == "POST"){
    //post方法 還需要設(shè)置請(qǐng)求頭、請(qǐng)求體
    xhr.setRequestHeader("Content-Type",
    "application/x-www-form-urlencoded");
    data = str;
                 
}
xhr.send(data);

 //執(zhí)行回調(diào)函數(shù)
xhr.onreadystatechange = function(){
   if(this.readyState == 4) {
       done(JSON.parse(this.responseText));
   }return;
   // 執(zhí)行外部傳進(jìn)來(lái)的回調(diào)函數(shù)即可
   // 需要用到響應(yīng)體
   }
}  

//調(diào)用函數(shù)
//get方法
//  ajax("GET","http://localhost:3000/users",
//     {"id":1},
//     function(data){
//         console.log(data);
//  });

//post方法     
ajax("POST", "http://localhost:3000/users",
 { "name": "lucky","class":2,"age":20 },
 function (data) {
     console.log(data);
});

以上就是如何封裝一個(gè)Ajax函數(shù)的詳細(xì)內(nèi)容,更多關(guān)于封裝Ajax函數(shù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • rails制作rss feed代碼

    rails制作rss feed代碼

    在網(wǎng)上Google了很多次,能找到用rails制作rss,但是總是找不到完整的。今天把完整的過(guò)程抄錄在這里
    2008-09-09
  • AJAX javascript的跨域訪問(wèn)執(zhí)行

    AJAX javascript的跨域訪問(wèn)執(zhí)行

    在網(wǎng)站調(diào)用加載評(píng)論等信息的時(shí)候遇到了不同域名間javascript不能執(zhí)行的問(wèn)題,一直都在加載中顯示不出來(lái),而換個(gè)網(wǎng)址訪問(wèn)的話就能正確顯示,一直沒(méi)去注意瀏覽器提示的錯(cuò)誤信息:
    2008-04-04
  • 在Ajax中使用get和post所遇到的問(wèn)題及解決辦法

    在Ajax中使用get和post所遇到的問(wèn)題及解決辦法

    本文重點(diǎn)給大家介紹在ajax中使用get和post所遇到的問(wèn)題及解決辦法,及get請(qǐng)求和post請(qǐng)求的區(qū)別簡(jiǎn)單介紹,本文介紹的非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧
    2016-06-06
  • 簡(jiǎn)單實(shí)體類和xml文件的相互轉(zhuǎn)換方法

    簡(jiǎn)單實(shí)體類和xml文件的相互轉(zhuǎn)換方法

    下面小編就為大家?guī)?lái)一篇簡(jiǎn)單實(shí)體類和xml文件的相互轉(zhuǎn)換方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-08-08
  • Ajax基礎(chǔ)詳解教程(一)

    Ajax基礎(chǔ)詳解教程(一)

    ajax技術(shù)在前端應(yīng)用開(kāi)發(fā)中經(jīng)常會(huì)用到,是必須要掌握的知識(shí)。下面腳本之家小編給大家?guī)?lái)了Ajax基礎(chǔ)詳解教程(一),感興趣的朋友跟著一起學(xué)習(xí)吧
    2016-06-06
  • iframe式ajax調(diào)用示例

    iframe式ajax調(diào)用示例

    想必大家對(duì)ajax調(diào)用有所熟悉,下面為大家介紹下iframe式ajax調(diào)用,需要的朋友可以參考下
    2014-02-02
  • 前端實(shí)現(xiàn)滑動(dòng)按鈕AJAX與后端交互的示例代碼

    前端實(shí)現(xiàn)滑動(dòng)按鈕AJAX與后端交互的示例代碼

    這篇文章主要介紹了前端實(shí)現(xiàn)滑動(dòng)按鈕AJAX與后端交互的示例代碼,前端代碼分為html代碼和css代碼,通過(guò)js事件觸發(fā),代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2022-02-02
  • Ajax獲取到數(shù)據(jù)放入echarts里不顯示的原因分析及解決辦法

    Ajax獲取到數(shù)據(jù)放入echarts里不顯示的原因分析及解決辦法

    在做一個(gè)需要用到echarts地圖的項(xiàng)目的時(shí)候,成功通過(guò)ajax獲取到了后臺(tái)提供的數(shù)據(jù),并生成了想要的JSON串。但是,放到echarts option.series[0].data里,獲取不到數(shù)據(jù)。在生成的地圖上無(wú)法看到你從后臺(tái)獲取到的值,下面小編給大家分享我的解決辦法,需要的朋友參考下
    2016-01-01
  • Ajax請(qǐng)求二進(jìn)制流進(jìn)行處理(ajax異步下載文件)的簡(jiǎn)單方法

    Ajax請(qǐng)求二進(jìn)制流進(jìn)行處理(ajax異步下載文件)的簡(jiǎn)單方法

    最近做項(xiàng)目遇到這樣的需求:管理后臺(tái)需要隨時(shí)下載數(shù)據(jù)報(bào)表,數(shù)據(jù)要實(shí)時(shí)生成后轉(zhuǎn)換為excel下載。怎么解決這個(gè)問(wèn)題呢?下面小編給大家分享Ajax請(qǐng)求二進(jìn)制流進(jìn)行處理(ajax異步下載文件)的簡(jiǎn)單方法,一起看看吧
    2017-09-09
  • history保存列表頁(yè)ajax請(qǐng)求的狀態(tài)使用示例詳解

    history保存列表頁(yè)ajax請(qǐng)求的狀態(tài)使用示例詳解

    這篇文章主要為大家介紹了history保存列表頁(yè)ajax請(qǐng)求的狀態(tài)使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12

最新評(píng)論