欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解JavaScript原生封裝ajax請求和Jquery中的ajax請求

 更新時間:2019年02月14日 12:00:53   作者:陌上花早  
在本篇文章中我們總結了關于JavaScript原生封裝ajax請求和Jquery中的ajax請求的知識點內容,需要的朋友們學習參考下。

前言:ajax的神奇之處在于JavaScript 可在不重載頁面的情況與 Web 服務器交換數(shù)據(jù),即在不需要刷新頁面的情況下,就可以產生局部刷新的效果。Ajax 在瀏覽器與 Web 服務器之間使用異步數(shù)據(jù)傳輸(HTTP 請求),當然也可同步,這樣就可使網頁從服務器請求少量的信息,而不是整個頁面。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傳遞方式需要設置頭信息,實測簡單的請求不設置也是可以這里的傳值是放在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方法,用的時候直接調用該方法,傳入設置參數(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){ //調用函數(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ù),但基礎的就這些了

$.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 手動給表增加數(shù)據(jù)的小例子

    javascript 手動給表增加數(shù)據(jù)的小例子

    這篇文章介紹了js手動給表增加數(shù)據(jù)的實例代碼,有需要的朋友可以參考一下
    2013-07-07
  • 使用JSX實現(xiàn)Carousel輪播組件的方法(前端組件化)

    使用JSX實現(xiàn)Carousel輪播組件的方法(前端組件化)

    做這個輪播圖的組件,我們先從一個最簡單的 DOM 操作入手。使用 DOM 操作把整個輪播圖的功能先實現(xiàn)出來,然后在一步一步去考慮怎么把它設計成一個組件系統(tǒng)
    2021-04-04
  • JavaScript中九種常用排序算法

    JavaScript中九種常用排序算法

    不同的排序算法,執(zhí)行效率有著天壤之別,本腳本用JavaScript演示了各種常見的排序算法,包括:冒泡排序、選擇排序、插入排序、謝爾排序、快速排序(遞歸)、快速排序(堆棧)、歸并排序、堆排序
    2014-09-09
  • Js逆向實現(xiàn)滑動驗證碼圖片還原的示例代碼

    Js逆向實現(xiàn)滑動驗證碼圖片還原的示例代碼

    這篇文章主要介紹了Js逆向實現(xiàn)滑動驗證碼圖片還原的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-03-03
  • js在HTML的三種引用方式詳解

    js在HTML的三種引用方式詳解

    這篇文章主要介紹了js在HTML的三種引用方式詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-08-08
  • JS隨機洗牌算法之數(shù)組隨機排序

    JS隨機洗牌算法之數(shù)組隨機排序

    這篇文章主要介紹了JS隨機洗牌算法之給數(shù)組隨機排序的相關資料,需要的朋友可以參考下
    2016-03-03
  • JS中的多態(tài)實例詳解

    JS中的多態(tài)實例詳解

    本文通過實例代碼很詳細的給大家介紹了js中的多態(tài),感興趣的朋友一起看看吧
    2017-10-10
  • js中?new?Date().getTime()得到的是毫秒數(shù)時間戳

    js中?new?Date().getTime()得到的是毫秒數(shù)時間戳

    今天在寫一個函數(shù)的時候需要用的一個時間戳方便調用不同的隨機數(shù)?那么時間戳就是比較好的方式,主要怕瀏覽器緩存數(shù)據(jù),下面就為大家簡單介紹一下
    2023-07-07
  • 使用webpack構建應用的方法步驟

    使用webpack構建應用的方法步驟

    這篇文章主要介紹了使用webpack構建應用的方法步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-03-03
  • js css3實現(xiàn)圖片拖拽效果

    js css3實現(xiàn)圖片拖拽效果

    這篇文章主要為大家詳細介紹了js css3實現(xiàn)圖片拖拽效果,注釋非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03

最新評論