在 JS 中如何使用 Ajax 來進行請求

人已經過原 Danny Markov 授權翻譯

在本教程中，我們將學習如何使用 JS 進行AJAX調用。

1.AJAX

術語AJAX 表示 異步的 JavaScript 和 XML。

AJAX 在 JS 中用于發出異步網絡請求來獲取資源。當然，不像名稱所暗示的那樣，資源并不局限于XML，還用于獲取JSON、HTML或純文本等資源。

有多種方法可以發出網絡請求并從服務器獲取數據。我們將一一介紹。

2.XMLHttpRequest

XMLHttpRequest對象（簡稱XHR）在較早的時候用于從服務器異步檢索數據。

之所以使用XML，是因為它首先用于檢索XML數據。現在，它也可以用來檢索JSON, HTML或純文本。

事例 2.1: GET

function success() {
  var data = JSON.parse(this.responseText)
  console.log(data)
}

function error (err) {
  console.log('Error Occurred:', err)
}

var xhr = new XMLHttpRequest()
xhr.onload = success
xhr.onerror = error
xhr.open("GET", ""https://jsonplaceholder.typicode.com/posts/1")
xhr.send()

我們看到，要發出一個簡單的GET請求，需要兩個偵聽器來處理請求的成功和失敗。我們還需要調用open()和send()方法。來自服務器的響應存儲在responseText變量中，該變量使用JSON.parse()轉換為JavaScript 對象。

function success() {
    var data = JSON.parse(this.responseText);
    console.log(data);
}

function error(err) {
    console.log('Error Occurred :', err);
}

var xhr = new XMLHttpRequest();
xhr.onload = success;
xhr.onerror = error;
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
xhr.send(JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
);

我們看到POST請求類似于GET請求。我們需要另外使用setRequestHeader設置請求標頭“Content-Type” ，并使用send方法中的JSON.stringify將JSON正文作為字符串發送。

2.3 XMLHttpRequest vs Fetch

早期的開發人員，已經使用了好多年的 XMLHttpRequest來請求數據了。現代的fetch API允許我們發出類似于XMLHttpRequest（XHR）的網絡請求。主要區別在于fetch()API使用Promises，它使 API更簡單，更簡潔，避免了回調地獄。

3. Fetch API

Fetch 是一個用于進行AJAX調用的原生 JavaScript API，它得到了大多數瀏覽器的支持，現在得到了廣泛的應用。

3.1 API用法

fetch(url, options)
    .then(response => {
        // handle response data
    })
    .catch(err => {
        // handle errors
    });

API參數

fetch() API有兩個參數

url是必填參數，它是您要獲取的資源的路徑。
options是一個可選參數。不需要提供這個參數來發出簡單的GET請求。

method: GET | POST | PUT | DELETE | PATCH
headers: 請求頭，如 { “Content-type”: “application/json; charset=UTF-8” }
mode: cors | no-cors | same-origin | navigate
cache: default | reload | no-cache
body: 一般用于POST請求

API返回Promise對象

fetch() API返回一個promise對象。

如果存在網絡錯誤，則將拒絕，這會在.catch()塊中處理。
如果來自服務器的響應帶有任何狀態碼(如200、404、500)，則promise將被解析。響應對象可以在.then()塊中處理。

錯誤處理

請注意，對于成功的響應，我們期望狀態代碼為200（正常狀態），但是即使響應帶有錯誤狀態代碼（例如404（未找到資源）和500（內部服務器錯誤）），fetch() API 的狀態也是 resolved，我們需要在.then() 塊中顯式地處理那些。

我們可以在response 對象中看到HTTP狀態：

HTTP狀態碼，例如200。
ok –布爾值，如果HTTP狀態代碼為200-299，則為true。

3.3 示例：GET

const getTodoItem = fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .catch(err => console.error(err));

getTodoItem.then(response => console.log(response));

Response

 { userId: 1, id: 1, title: "delectus aut autem", completed: false }

在上面的代碼中需要注意兩件事:

fetch API返回一個promise對象，我們可以將其分配給變量并稍后執行。
我們還必須調用response.json()將響應對象轉換為JSON

錯誤處理

我們來看看當HTTP GET請求拋出500錯誤時會發生什么：

fetch('http://httpstat.us/500') // this API throw 500 error
  .then(response => () => {
    console.log("Inside first then block");
    return response.json();
  })
  .then(json => console.log("Inside second then block", json))
  .catch(err => console.error("Inside catch block:", err));

Inside first then block
? ? Inside catch block: SyntaxError: Unexpected token I in JSON at position 4

我們看到，即使API拋出500錯誤，它仍然會首先進入then()塊，在該塊中它無法解析錯誤JSON并拋出catch()塊捕獲的錯誤。

這意味著如果我們使用fetch()API，則需要像這樣顯式地處理此類錯誤：-

fetch('http://httpstat.us/500')
  .then(handleErrors)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error("Inside catch block:", err));

function handleErrors(response) {
  if (!response.ok) { // throw error based on custom conditions on response
      throw Error(response.statusText);
  }
  return response;
}

 ? Inside catch block: Error: Internal Server Error at handleErrors (Script snippet %239:9)

3.3 示例：POST

fetch('https://jsonplaceholder.typicode.com/todos', {
    method: 'POST',
    body: JSON.stringify({
      completed: true,
      title: 'new todo item',
      userId: 1
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    }
  })
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(err => console.log(err))

Response

? {completed: true, title: "new todo item", userId: 1, id: 201}

在上面的代碼中需要注意兩件事:-

POST請求類似于GET請求。我們還需要在fetch() API的第二個參數中發送method，body 和headers 屬性。
我們必須需要使用 JSON.stringify() 將對象轉成字符串請求body參數

4.Axios API

Axios API非常類似于fetch API，只是做了一些改進。我個人更喜歡使用Axios API而不是fetch() API，原因如下：

為GET 請求提供 axios.get()，為 POST 請求提供 axios.post()等提供不同的方法，這樣使我們的代碼更簡潔。
將響應代碼（例如404、500）視為可以在catch()塊中處理的錯誤，因此我們無需顯式處理這些錯誤。
它提供了與IE11等舊瀏覽器的向后兼容性
它將響應作為JSON對象返回，因此我們無需進行任何解析

4.1 示例：GET

// 在chrome控制臺中引入腳本的方法

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://unpkg.com/axios/dist/axios.min.js';
document.head.appendChild(script);

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => console.log(response.data))
  .catch(err => console.error(err));

Response

{ userId: 1, id: 1, title: "delectus aut autem", completed: false }

我們可以看到，我們直接使用response獲得響應數據。數據沒有任何解析對象，不像fetch() API。

錯誤處理

axios.get('http://httpstat.us/500')
  .then(response => console.log(response.data))
  .catch(err => console.error("Inside catch block:", err));

Inside catch block: Error: Network Error

我們看到，500錯誤也被catch()塊捕獲，不像fetch() API，我們必須顯式處理它們。

4.2 示例：POST

axios.post('https://jsonplaceholder.typicode.com/todos', {
      completed: true,
      title: 'new todo item',
      userId: 1
  })
  .then(response => console.log(response.data))
  .catch(err => console.log(err))

 {completed: true, title: "new todo item", userId: 1, id: 201}

我們看到POST方法非常簡短，可以直接傳遞請求主體參數，這與fetch（）API不同。

作者：Danny Markov 譯者：前端小智來源：tutorialzine

原文：https://tutorialzine.com/2017/12-terminal-commands-every-web-developer-should-know

TML 代碼約定

很多 Web 開發人員對 HTML 的代碼規范知之甚少。

在2000年至2010年，許多Web開發人員從 HTML 轉換到 XHTML。

使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規范。

而針對于 HTML5 ，我們應該形成比較好的代碼規范，以下提供了幾種規范的建議。

使用正確的文檔類型

文檔類型聲明位于HTML文檔的第一行：

<!DOCTYPE html>

如果你想跟其他標簽一樣使用小寫，可以使用以下代碼：

<!doctype html>

使用小寫元素名

HTML5 元素名可以使用大寫和小寫字母。

推薦使用小寫字母：

混合了大小寫的風格是非常糟糕的。
開發人員通常使用小寫 (類似 XHTML)。
小寫風格看起來更加清爽。
小寫字母容易編寫。

不推薦:

<p>這是一個段落。</p>

</SECTION>

非常糟糕:

<p>這是一個段落。</p>

</SECTION>

推薦:

<body>

<p>菜鳥教程，學的不僅是技術，更是夢想。

菜鳥教程，學的不僅是技術，更是夢想。

菜鳥教程，學的不僅是技術，更是夢想。</p>

</body>

表格實例:

<table>

<tr>

<th>Description</th>

</tr>

<tr>

<td>Description of A</td>

</tr>

<tr>

<td>Description of B</td>

</tr>

</table>

列表實例:

<ol>

<li>London</li>

<li>Paris</li>

<li>Tokyo</li>

</ol>

省略 <html> 和 <body>?

在標準 HTML5 中， <html> 和 <body> 標簽是可以省略的。

以下 HTML5 文檔是正確的:

實例:

<!DOCTYPE html>

<head>

</head>

<h1>這是一個標題</h1>

<p>這是一個段落。</p>

嘗試一下 ?

不推薦省略 <html> 和 <body> 標簽。

<html> 元素是文檔的根元素，用于描述頁面的語言：

<!DOCTYPE html>

聲明語言是為了方便屏幕閱讀器及搜索引擎。

省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。

省略 <body> 在舊版瀏覽器 (IE9)會發生錯誤。

省略 <head>?

在標準 HTML5 中， <head>標簽是可以省略的。

默認情況下，瀏覽器會將 <body> 之前的內容添加到一個默認的 <head> 元素上。

實例

<!DOCTYPE html>

<html>

<body>

<h1>這是一個標題</h1>

<p>這是一個段落。</p>

</body>

</html>

嘗試一下 ?

	現在省略 head 標簽還不推薦使用。

元數據

HTML5 中 <title> 元素是必須的，標題名描述了頁面的主題:

標題和語言可以讓搜索引擎很快了解你頁面的主題:

<!DOCTYPE html>

<head>

</head>

HTML 注釋

注釋可以寫在  中:

比較長的評論可以在  中分行寫：

<!--

這是一個較長評論。這是一個較長評論。這是一個較長評論。

這是一個較長評論這是一個較長評論。這是一個較長評論。

-->

長評論第一個字符縮進兩個空格，更易于閱讀。

樣式表

樣式表使用簡潔的語法格式 ( type 屬性不是必須的):

短的規則可以寫成一行:

p.into {font-family: Verdana; font-size: 16em;}

長的規則可以寫成多行:

body {

background-color: lightgrey;

font-family: "Arial Black", Helvetica, sans-serif;

font-size: 16em;

color: black;

}

將左花括號與選擇器放在同一行。
左花括號與選擇器間添加以空格。
使用兩個空格來縮進。
冒號與屬性值之間添加已空格。
逗號和符號之后使用一個空格。
每個屬性與值結尾都要使用符號。
只有屬性值包含空格時才使用引號。
右花括號放在新的一行。
每行最多 80 個字符。

	在逗號和分號后添加空格是常用的一個規則。

在 HTML 中載入 JavaScript

使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):

使用 JavaScript 訪問 HTML 元素

一個糟糕的 HTML 格式可能會導致 JavaScript 執行錯誤。

以下兩個 JavaScript 語句會輸出不同結果:

實例

var obj = getElementById("Demo")

var obj = getElementById("demo")

HTML 中 JavaScript 盡量使用相同的命名規則。

訪問 JavaScript 代碼規范。

使用小寫文件名

大多 Web 服務器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問。

其他 Web 服務器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。

你必須保持統一的風格，我們建議統一使用小寫的文件名。

文件擴展名

HTML 文件后綴可以是 .html (或r .htm)。

CSS 文件后綴是 .css 。

JavaScript 文件后綴是 .js 。

.htm 和 .html 的區別

.htm 和 .html 的擴展名文件本質上是沒有區別的。瀏覽器和 Web 服務器都會把它們當作 HTML 文件來處理。

區別在于：

.htm 應用在早期 DOS 系統，系統現在或者只能有三個字符。

在 Unix 系統中后綴沒有特別限制，一般用 .html。

技術上區別

如果一個 URL 沒有指定文件名 (如 http://www.runoob.com/css/), 服務器會返回默認的文件名。通常默認文件名為 index.html, index.htm, default.html, 和 default.htm。

如果服務器只配置了 "index.html" 作為默認文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。

但是，通常服務器可以設置多個默認文件，你可以根據需要設置默認文件嗎。

不管怎樣，HTML 完整的后綴是 ".html"。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

所有的 JavaScript 項目適用同一種規范。

JavaScript 代碼規范

代碼規范通常包括以下幾個方面:

變量和函數的命名規則
空格，縮進，注釋的使用規則。
其他常用規范……

規范的代碼可以更易于閱讀與維護。

代碼規范一般在開發前規定，可以跟你的團隊成員來協商設置。

變量名

變量名推薦使用駝峰法來命名(camelCase):

firstName = "John";

lastName = "Doe";

price = 19.90;

tax = 0.20;

fullPrice = price + (price * tax);

空格與運算符

通常運算符 ( = + - * / ) 前后需要添加空格:

實例:

var x = y + z;

var values = ["Volvo", "Saab", "Fiat"];

代碼縮進

通常使用 4 個空格符號來縮進代碼塊：

函數:

function toCelsius(fahrenheit) {

return (5 / 9) * (fahrenheit - 32);

}

	不推薦使用 TAB 鍵來縮進，因為不同編輯器 TAB 鍵的解析不一樣。

語句規則

簡單語句的通用規則:

一條語句通常以符號作為結束符。

實例:

var values = ["Volvo", "Saab", "Fiat"];

var person = {

firstName: "John",

lastName: "Doe",

age: 50,

eyeColor: "blue"

};

復雜語句的通用規則:

將左花括號放在第一行的結尾。
左花括號前添加一空格。
將右花括號獨立放在一行。
不要以分號結束一個復雜的聲明。

函數:

function toCelsius(fahrenheit) {

return (5 / 9) * (fahrenheit - 32);

}

循環:

for (i = 0; i < 5; i++) {

x += i;

}

條件語句:

if (time < 20) {

greeting = "Good day";

} else {

greeting = "Good evening";

}

對象規則

對象定義的規則:

將左花括號與類名放在同一行。
冒號與屬性值間有個空格。
字符串使用雙引號，數字不需要。
最后一個屬性-值對后面不要添加逗號。
將右花括號獨立放在一行，并以符號作為結束符號。

實例:

var person = {

firstName: "John",

lastName: "Doe",

age: 50,

eyeColor: "blue"

};

短的對象代碼可以直接寫成一行:

實例:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

每行代碼字符小于 80

為了便于閱讀每行字符建議小于數 80 個。

如果一個 JavaScript 語句超過了 80 個字符，建議在運算符或者逗號后換行。

實例:

document.getElementById("demo").innerHTML =

"Hello Runoob.";

命名規則

一般很多代碼語言的命名規則都是類似的，例如:

變量和函數為駝峰法（ camelCase）
全局變量為大寫 (UPPERCASE )
常量 (如 PI) 為大寫 (UPPERCASE )

變量命名你是否使用這幾種規則： hyp-hens, camelCase, 或 under_scores ?

HTML 和 CSS 的橫桿(-)字符:

HTML5 屬性可以以 data- (如：data-quantity, data-price) 作為前綴。

CSS 使用 - 來連接屬性名 (font-size)。

	- 通常在 JavaScript 中被認為是減法，所以不允許使用。

下劃線:

很多程序員比較喜歡使用下劃線(如：date_of_birth), 特別是在 SQL 數據庫中。

PHP 語言通常都使用下劃線。

帕斯卡拼寫法(PascalCase):

帕斯卡拼寫法(PascalCase) 在 C 語言中語言較多。

駝峰法：

JavaScript 中通常推薦使用駝峰法，jQuery 及其他 JavaScript 庫都使用駝峰法。

	變量名不要以 $ 作為開始標記，會與很多 JavaScript 庫沖突。

HTML 載入外部 JavaScript 文件

使用簡潔的格式載入 JavaScript 文件 ( type 屬性不是必須的):

使用 JavaScript 訪問 HTML 元素

一個糟糕的 HTML 格式可能會導致 JavaScript 執行錯誤。

以下兩個 JavaScript 語句會輸出不同結果:

實例

var obj = getElementById("Demo")

var obj = getElementById("demo")

HTML 與 JavaScript 盡量使用相同的命名規則。

訪問 HTML(5) 代碼規范。

文件擴展名

HTML 文件后綴可以是 .html (或r .htm)。

CSS 文件后綴是 .css 。

JavaScript 文件后綴是 .js 。

使用小寫文件名

大多 Web 服務器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問。

其他 Web 服務器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。

你必須保持統一的風格，我們建議統一使用小寫的文件名。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：踩過許多坑后，送你這份H5交互的頁面跳轉方式總結
下一篇：圖表分析中的HTML5地圖需求，這款BI輕松5步就給解決了

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

在 JS 中如何使用 Ajax 來進行請求

1.AJAX

2.XMLHttpRequest

事例 2.1: GET

2.3 XMLHttpRequest vs Fetch

3. Fetch API

3.1 API用法

3.3 示例：GET

3.3 示例：POST

4.Axios API

4.1 示例：GET

4.2 示例：POST

您的項目需求