Form表單------AJAX------Fetch

標籤：xmlhttp   非同步請求   send   cti   開始   http   console   服務   function   

1.在Ajax之前

最開始，瀏覽器發起請求的過程如下：

使用者輸入網址/a標籤/img標籤等 --> 伺服器返回html/css/js --> 使用者接收後重新載入頁面。

上面的請求發起方式，要麼會導致頁面重新整理（form表單提交也是如此），要麼只能請求特定類型的檔案（圖片，css，或JS)。

2.AJAX的到來

AJAX的實質就是用JS發起一個請求，並得到伺服器返回的內容。

而JS發起請求的關鍵，是通過瀏覽器提供的XMLHttpRequest介面。請求過程如下：

//建立一個XMLHttpRequest對象var request = new XMLHttpRequest()//監聽成功請求後的狀態變化, request.responseText 就是伺服器返回的內容了（預設是字串）request.onreadystatechange = function() {  if (this.readyState == 4 && this.status == 200) {    console.log(request.responseText)  }};// 佈建要求參數request.open("GET", "filename", true);//發送請求request.send();

上述過程，通過jQuery的封裝後：

$.get(‘filename‘).then(function(response){  // 這裡的 response 就是返回的內容})

3.Fetch API

既然瀏覽器都提供了XMLHttpRequest這個API，為什麼不直接提供封裝好的介面呢？

Fetch API就是瀏覽器提供的原生AJAX介面。可以使用window.fetch函數代替以前的$.ajax。

也就是說，瀏覽器幫我們把jQuery.ajax給實現了，以後可以直接用fetch來發送非同步請求。

fetch(‘/‘).then(function(response){    response.text().then(function(text){        console.log(text)    })})

不過Fetch API，基於ES6.

Form表單------AJAX------Fetch