原生JS與jQuery對AJAX的實現

時間 2019-12-07

原文原文鏈接

原生JS與jQuery對AJAX的實現

1、定義

W3C裏這麼解釋AJAX：javascript

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。php

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

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

2、原生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是返回的數據，爲字符串格式

3、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格式的就可使用，可是要注意緩存問題。