如何實(shí)現(xiàn)JavaScript原生封裝ajax請(qǐng)求和Jquery中的ajax請(qǐng)求

小編給大家分享一下如何實(shí)現(xiàn)JavaScript原生封裝ajax請(qǐng)求和Jquery中的ajax請(qǐng)求，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

為治多等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及治多網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、治多網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎ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)聽函數(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)求類型type,請(qǐng)求地址url，傳入數(shù)據(jù)data（本案例無(wú)，沒有也需要“”占位），請(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); //如果沒有數(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)聽函數(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ì)“如何實(shí)現(xiàn)JavaScript原生封裝ajax請(qǐng)求和Jquery中的ajax請(qǐng)求”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站標(biāo)題：如何實(shí)現(xiàn)JavaScript原生封裝ajax請(qǐng)求和Jquery中的ajax請(qǐng)求
轉(zhuǎn)載源于：http://muchs.cn/article20/ihdeco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、全網(wǎng)營(yíng)銷推廣、微信公眾號(hào)、外貿(mào)建站、外貿(mào)網(wǎng)站建設(shè)、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)