在早期的網頁應用上,如果要取得更新後的資料,必須重新對伺服器再發一次請求(使用連結,F5,或表單傳送都算是對伺服器發出請求),才能得到更新後的內容,這樣的過程如果遇到較慢的網路或是其它的網路狀況,會造成網頁呈現中斷並且無法操作的狀況,這會讓使用者的體驗非常不好,因此後來提出了這類非同步的技術,目的是不中斷主要頁面的呈現,讓不確定回應時間的資訊在背景去執行,等執行完畢後再回應到頁面上。
HTML原生就有XMLHttpRequest的方法可以用來實踐非同步的功能,後來HTML5又推出了FETCH的方法,可以簡化非同步請求的使用,除了原生的API,也陸續有第三方社群或開發者推出相應的函式庫供大眾使用,最有名的是jQuery的$.ajax系列方法,另外axios函式庫近年也愈來愈多人使用,甚至被vue.js列為建議的輔助函式庫。
早期的http傳輸資料以xml為主,在前後端收到資料後,需要去進行解析,才能進一步應用,後來又推出JSON格式,資料量比XML小,解析和應用也較方便,因此近年來的資料傳輸逐漸以JSON來取代XML,因此也有人改稱為AJAJ技術。
XMLHttpRequest在2006年正式被W3C列入標準,也是目前所有瀏灠器都有支援的標準。
語法格式:
//宣告XHR物件
var xhr=new XMLHttpRequest
//建立設定
xhr.open(
Method, //get,post,put,patch,delete
URL,
async);
//傳送資料-表單
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
//傳送資料-json
xhr.setRequestHeader("Content-Type","application/json")
//處理回應
xhr.onload=function(){
var type=xhr.getResponseHeader("Content-Type");
var status=xhr.status
var response=xhr.responseText
document.write(response)
}
//執行請求及傳送內容
//表單資料
let context="name=john&age=32";
//json資料
let context=JSON.stringify({name:'john',age:32})
//執行ajax請求
//有傳送資料或post時
xhr.send(context);
//只是請求資料時
xhr.send();
在2015年時推出,由主流的幾家瀏灠器所支援,包括Firefox與Chrome、Opera等,IE也宣布在後續的版本會支援Fetch,Fetch的最大特色是引入了Promise的概念,同時透過鏈式呼叫來改善語法結構。 MDN介紹 語法:
//建立請求
//使用表單資料傳送
let body="name=mack&age=32";
//headers={'Content-Type':'application/x-www-form-urlencoded'}
//使用json傳送
let body=JSON.stringify({name:'mack',age:32});
//headers={'Content-Type':'application/json'}
fetch(url,{method,body,headers:{'Content-Type':'application/x-www-form-urlencoded'}})
.then(function(response){
//回傳是josn時
return response.json()
//回傳是text時
return response.text()
})
.then(function(data){
console.log(data)
})
.catch(function(err){
//error
})
jQuery最早只是重新包裝XMLHttpRequest的使用方法,推出比較容易操作的自訂函式供使用,不過後來也自行加入了延遲的概念,讓非同步的事件可以更容易的進行管理。
官方網站
CDN:https://code.jquery.com/
語法:
//$.ajax方法
$.ajax({
type:get/post/patch/delete/update…,
url:"http://.....",
success: (callback),
error: (callback),
data:{json/xml/string},
complete: (callback)
})
//$.get方法
$.get(url,data,callback)
//$.post方法
$.post(url,data,callback)
//().load()方法
$(selector).load(url)
axios是一個基於Promise標準而建立的非同步請求函式庫,除了提供簡便的語法操作外,由於axios只專注在非同步的請求上,因此整個函式庫相較jQuery小很多,也因此成為許多框架或是不想使用jQuery的使用者喜歡。
官方網站
CDN:https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
語法:
axios.get(url)
.then(function(response){
//處理回應
})
.catch(function(err){
//error
})