AjAX 步驟和對比fetch和axios

時間  2019-11-30
標籤 ajax 步驟 對比 fetch axios 欄目 Ajax 简体版
原文   原文鏈接

什麼是ajax

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

AJAX 不是新的編程語言，而是一種使用現有標準的新方法。html

AJAX 是與服務器交換數據並更新部分網頁的藝術，在不從新加載整個頁面的狀況下。node

ajax使用步驟

第一步，建立xmlhttprequest對象，ios

var xmlhttp =new XMLHttpRequest（);ajax

XMLHttpRequest對象用來和服務器交換數據。chrome

var xhttp;
if (window.XMLHttpRequest) {
//現代主流瀏覽器
xhttp = new XMLHttpRequest();
} else {
// 針對瀏覽器，好比IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

複製代碼

第二步，使用xmlhttprequest對象的open（）和send（）方法發送資源請求給服務器。數據庫

xmlhttp.open(method,url,async) method包括get編程

和post，url主要是文件或資源的路徑，async參數爲true(表明異步)或者false（表明同步）json

xhttp.send();使用get方法發送請求到服務器。axios

xhttp.send(string);使用post方法發送請求到服務器。

post 發送請求何時可以使用呢？

(1)更新一個文件或者數據庫的時候。

(2)發送大量數據到服務器，由於post請求沒有字符限制。

(3)發送用戶輸入的加密數據。

get例子：

xhttp.open("GET", "ajax_info.txt", true);
xhttp.open("GET", "index.html", true);
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);xhttp.send()
複製代碼

post例子

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
複製代碼

post表單數據須要使用xmlhttprequest對象的setRequestHeader方法增長一個HTTP頭。

post表單例子

xhttp.open("POST", "ajax_test.aspx", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");

複製代碼

async=true 當服務器準備響應時將執行onreadystatechange函數。

xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "index.aspx", true);
xhttp.send();

複製代碼

asyn=false 則將不須要寫onreadystatechange函數，直接在send後面寫上執行代碼。

xhttp.open("GET", "index.aspx", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

複製代碼

第三步，使用xmlhttprequest對象的responseText或responseXML屬性得到服務器的響應。

使用responseText屬性獲得服務器響應的字符串數據，使用responseXML屬性獲得服務器響應的XML數據。

document.getElementById("demo").innerHTML = xhttp.responseText;
複製代碼

第四步，onreadystatechange函數，當發送請求到服務器，咱們想要服務器響應執行一些功能就須要使用onreadystatechange函數，每次xmlhttprequest對象的readyState發生改變都會觸發onreadystatechange函數。

onreadystatechange屬性存儲一個當readyState發生改變時自動被調用的函數。 readyState屬性，XMLHttpRequest對象的狀態，改變從0到4，0表明請求未被初始化，1表明服務器鏈接成功，2請求被服務器接收，3處理請求，4請求完成而且響應準備。 status屬性，200表示成功響應，404表示頁面不存在。

在onreadystatechange事件中，服務器響應準備的時候發生，當readyState==4和status==200的時候服務器響應準備。

封裝代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Examples</title>
  <script>

    //將對象序列化
    function params(data) {
      var arg = [];
      for (var i in data) {
        arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
      }
      return arr.join('&');
    }

    //封裝ajax
    function ajax(obj) {
      //建立xhr對象;
      obj.xhr = new XMLHttpRequest();
      //後面隨機數防止瀏覽器緩存
      obj.url = url + "?rand=" + Math.random();
      //序列化對象
      obj.data = params(obj.data);
      //當是get請求時
      if (obj.method = 'get') {
        //當前面沒設置隨機數時
        obj.url += obj.url.indexOf('?') == -1 ? '?' +obj.data : '&' + obj.data;
      }
      //異步調用
      if (obj.async == true) {
        //監聽響應狀態
        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4) {
            callback();
          }
        };
      }
      //啓動HTTP請求
      xhr.open(obj.method, obj.url, obj.aysnc);
      //當是post請求時
      if(obj.method === 'post') {
        //模仿表單提交
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        //發送HTTP請求-post
        xhr.send(obj.data);
      } else {
        //發送HTTP請求-get
        xhr.send(null);
      }
      //同步調用
      if (obj.async == false) {
        callback();
      }
      //回調函數傳參
      function callback() {
        if (xhr.atatus == 200) {
          obj.success(xhr.responseText);
        } else {
          alert("失敗，失敗狀態碼：" + xhr.status);
        }
      }
    }

    document.addEventListener('click', function() {
      ajax({
        method: 'get',
        url: 'demo3.php',
        data: {
          'name' = 'Lee',
          'age' = 100
        },
        success: function(text) {
          alert(text);
        },
        async = true
      });
    }, false);
  </script>
</head>
<body>
    
</body>
</html>
複製代碼

promise封裝ajax

const getJSON = function (url) {
            const promise = new Promise(function (resolve, reject) {
                const handler = function () {
                    if (this.readyState !== 4) {
                        return;
                    }
                    if (this.status === 200) {
                        resolve(this.response);
                    } else {
                        reject(new Error(this.statusText));
                    }
                };
                const client = new XMLHttpRequest();
                client.open("GET", url);
                client.onreadystatechange = handler;
                client.responseType = "json";
                client.setRequestHeader("Accept", "application/json");
                client.send();

            });

            return promise;
        };

        getJSON("/posts.json").then(function (json) {
            console.log('Contents: ' + json);
        }, function (error) {
            console.error('出錯了', error);
        });    
複製代碼

2、fetch

fetch 是全局量 window 的一個方法，它的主要特色有：

一、第一個參數是URL:

二、第二個是可選參數，能夠控制不一樣配置的 init 對象

三、使用了 JavaScript Promises 來處理結果/回調:

// 鏈式處理,將異步變爲相似單線程的寫法: 高級用法.
fetch('/some/url').then(function(response) {
    return . //... 執行成功, 第1步...
}).then(function(returnedValue) {
    // ... 執行成功, 第2步...
}).catch(function(err) {
    // 中途任何地方出錯...在此處理 :( 
});
複製代碼

從 fetch()返回的 Promise 將不會拒絕HTTP錯誤狀態, 即便響應是一個 HTTP 404 或 500。相反，它會正常解決 (其中ok狀態設置爲false), 而且僅在網絡故障時或任何阻止請求完成時，它纔會拒絕。 能夠作簡單的封裝

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response
  } else {
    var error = new Error(response.statusText)
    error.response = response
    throw error
  }
}

function parseJSON(response) {
  return response.json()
}

fetch('/users')
  .then(checkStatus)
  .then(parseJSON)
  .then(function(data) {
    console.log('request succeeded with JSON response', data)
  }).catch(function(error) {
    console.log('request failed', error)
  })
複製代碼

默認狀況下, fetch在服務端不會發送或接收任何 cookies, 若是站點依賴於維護一個用戶會話，則致使未經認證的請求(要發送 cookies，必須發送憑據頭). 這一點也能夠作一些處理： 若是想要在同域中自動發送cookie,加上 credentials 的 same-origin 選項

fetch(url, {
  credentials: ’same-origin' }) 複製代碼

same-origin值使得fetch處理Cookie與XMLHttpRequest相似。 不然，Cookie將不會被髮送，致使這些請求不保留認證會話。

對於CORS請求，使用include值容許將憑據發送到其餘域：

fetch(url, {
  credentials: 'include'
})
複製代碼

2.axios

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});
複製代碼

優缺點：

從 node.js 建立 http 請求

支持 Promise API

客戶端支持防止CSRF

提供了一些併發請求的接口（重要，方便了不少的操做）

爲何要用axios?

axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，它自己具備如下特徵：

從瀏覽器中建立 XMLHttpRequest

從 node.js 發出 http 請求

支持 Promise API

攔截請求和響應

轉換請求和響應數據

取消請求

自動轉換JSON數據

客戶端支持防止CSRF/XSRF

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程