原生JS與jQuery對AJAX的實現

小編:啊南 18閱讀 2020.12.21

一、定義

W3C里這么解釋AJAX:

AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。

AJAX 不是新的編程語言,而是一種使用現有標準的新方法。AJAX 是與服務器交換數據并更新部分網頁的藝術,在不重新加載整個頁面的情況下。

就是利用JS來無刷新與后端交互,通過get和post方式把數據發送到后端,或者請求后端的數據,然后根據請求的數據進行改變DOM節點等操作,從而取消掉用form的submit方式一提交就會跳轉頁面的情況,像在創建賬號的時候檢測此用戶名是否存在就是一個典型的案例,本文講從原生JS和jQuery方面介紹AJAX的實現,跨域問題暫且不表。

二、原生JS實現AJAX

所有現代瀏覽器(IE7+、Firefox、Chrome、Safari 以及 Opera)均內建 XMLHttpRequest 對象。

1.GET

 var xmlhttp = new XMLHttpRequest();
 xmlhttp.open("GET","demo_get.php id=1&name=lemoo&t=" + Math.random(),true);
 xmlhttp.send();
傳遞參數直接在 后指定,多個參數用&分隔
GET請求同一URL時會有緩存,通過參數是否一致來判斷
解決緩存問題,加個時間戳使每次參數不一致,上例中的t=Math.random()
2.POST

 var xmlhttp = new XMLHttpRequest();
 xmlhttp.open("POST","ajax_test.php",true);
 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xmlhttp.send("fname=Bill&lname=Gates");
 xmlhttp.onreadystatechange=function()
   {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
     }
   }
 
POST沒有緩存
POST發送的數據量大
AJAX無法發送文件
readyState改變時觸發onreadystatechange事件,4為完成
status是返回狀態,200是成功,404是未找到頁面
responseText是返回的數據,為字符串格式
三、jQuery實現AJAX

1.GET

使用get()方法時,采用GET方式向服務器請求數據,并通過方法中回調函數的參數返回請求的數據,它的調用格式如下:

$.get(url,[callback])
$.get("demo_test.php id=1&name=lemoo",function(data,status){
     alert("Data: " + data + "\nStatus: " + status);
   });
 
參數通過URL傳遞
有緩存
2.POST

與get()方法相比,post()方法多用于以POST方式向服務器發送數據,服務器接收到數據之后,進行處理,并將處理結果返回頁面,調用格式如下:

 $.post(url,[data],[callback])
  
 $.post("demo_test.php",{
   num:1
 },
 function (data) {
   alert(data);
 });
 
使用serialize()方法可以將表單中有name屬性的元素值進行序列化,生成標準URL編碼文本字符串,直接可用于ajax請求,它的調用格式如下:

$(selector).serialize()

3.ajax

使用ajax()方法是最底層、功能最強大的請求服務器數據的方法,它不僅可以獲取服務器返回的數據,還能向服務器發送請求并傳遞數值,它的調用格式如下:

$.ajax([settings])

其中參數settings為發送ajax請求時的配置對象,在該對象中,url表示服務器請求的路徑,data為請求時傳遞的數據,dataType為服務器返回的數據類型,success為請求成功的執行的回調函數,type為發送數據請求的方式,默認為get。

 $.ajax({
   type:"post",
   url:"demo_test.php",
   data: { num: 123 },
   dataType:"text",
   success: function (data) {
     alert(1);
   }
 });
 
4.getJSON

使用getJSON()方法可以通過Ajax異步請求的方式,獲取服務器中的數組,并對獲取的數據進行解析,顯示在頁面中,它的調用格式為:

$.getJSON(url,[data],[callback])

可以與$.each搭配來遍歷數據

 $.getJSON("demo_test.php",function(data){
   $.each(data, function (index, sport) {
     if(index==3)
       $("ul").append("<li>" + sport["name"] + "</li>");
   });
 });
 
這樣返回的數據直接就是JSON格式的就可以使用,但是要注意緩存問題。

四、AJAX的調試

在運行AJAX的頁面按F12(Chrome下),進入“Network”選項卡,點擊"XHR"過濾器,然后觸發AJAX的事件。


點擊要進行調試的AJAX動作,進入詳情頁。


Request URL:查看請求的地址,一般在這里查看向后臺請求的URL是否正確,錯誤404的話一般這里會有問題
Request Method:請求的方式,查看是GET或者POST,GET請求的參數一致的話會有緩存
Status Code:返回狀態。一般是200正常;404未找到頁面,一般是URL錯誤,或者后臺沒有創建相應的action;500內部服務錯誤,多為后臺錯誤。
底下的Query String Parameters是向后臺發送的數據,一般這里看參數是否有問題,格式及命名是否正確,事故多發地。
點擊Response就可以查看服務器返回的數據了,一般在這里查看返回是否正常,格式是否正確,一般是JSON。

基本上通過發送的數據及傳回的數據就能定位問題所在了。

五、總結

一般來說,處理AJAX,用jQuery的get和post的就夠用,如果是JSON數據的話用getJSON,注意緩存問題,特殊的應用再考慮用ajax(),另外,AJAX還有一個很嚴重的問題是跨域,這個以后再說。

關聯標簽:
欧美日韩在线精品视频二区_日本高清在线精品一区_天天看片天天av免费观看