如何實現JavaScript原生封裝ajax請求和Jquery中的ajax請求

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

1、原生ajax

（1）html前端代碼get請求方式創建一個ajax實例xhr open()方法傳入三個參數，第一個是請求方式（一般為get和post），第二個參數是請求地址，第三個布爾值，true代表異步，false代表同步 send發送數據（get用不上，get發送的數據一般在鏈接后面，所以為顯式傳值，形式為鍵值對）綁定監聽函數判斷狀態碼 xhr.responseText得到返回數據

  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傳遞方式需要設置頭信息，實測簡單的請求不設置也是可以這里的傳值是放在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、函數封裝 這里函數封裝的一個ajax方法，用的時候直接調用該方法，傳入設置參數即可

參數有請求類型type,請求地址url，傳入數據data（本案例無，沒有也需要“”占位），請求成功返回函數success（也可多加一個失敗返回函數）

（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(); //創建隨機數
   
   if(type == 'GET'){
    if(data){
     xhr.open('GET', url + '?' + data, true); //如果有數據就拼接
    } else {
     xhr.open('GET', url + '?t=' + random, true); //如果沒有數據就傳入一個隨機數
    }
    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(){  // 創建監聽函數
    if(xhr.readyState == 4&&xhr.status == 200){
      success(xhr.responseText);
     } 
    }
  }
   
  Ajax('get', 'js/text.js', "", function(data){ //調用函數
   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請求，它也有很多參數，但基礎的就這些了

$.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]
}

控制臺輸出

看完了這篇文章，相信你對“如何實現JavaScript原生封裝ajax請求和Jquery中的ajax請求”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！