人已經過原 Danny Markov 授權翻譯
在本教程中,我們將學習如何使用 JS 進行AJAX調用。
術語AJAX 表示 異步的 JavaScript 和 XML。
AJAX 在 JS 中用于發出異步網絡請求來獲取資源。當然,不像名稱所暗示的那樣,資源并不局限于XML,還用于獲取JSON、HTML或純文本等資源。
有多種方法可以發出網絡請求并從服務器獲取數據。我們將一一介紹。
XMLHttpRequest對象(簡稱XHR)在較早的時候用于從服務器異步檢索數據。
之所以使用XML,是因為它首先用于檢索XML數據。現在,它也可以用來檢索JSON, HTML或純文本。
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正文作為字符串發送。
早期的開發人員,已經使用了好多年的 XMLHttpRequest來請求數據了。現代的fetch API允許我們發出類似于XMLHttpRequest(XHR)的網絡請求。主要區別在于fetch()API使用Promises,它使 API更簡單,更簡潔,避免了回調地獄。
Fetch 是一個用于進行AJAX調用的原生 JavaScript API,它得到了大多數瀏覽器的支持,現在得到了廣泛的應用。
fetch(url, options)
.then(response => {
// handle response data
})
.catch(err => {
// handle errors
});
API參數
fetch() API有兩個參數
API返回Promise對象
fetch() API返回一個promise對象。
錯誤處理
請注意,對于成功的響應,我們期望狀態代碼為200(正常狀態),但是即使響應帶有錯誤狀態代碼(例如404(未找到資源)和500(內部服務器錯誤)),fetch() API 的狀態也是 resolved,我們需要在.then() 塊中顯式地處理那些。
我們可以在response 對象中看到HTTP狀態:
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 }
在上面的代碼中需要注意兩件事:
錯誤處理
我們來看看當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)
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}
在上面的代碼中需要注意兩件事:-
Axios API非常類似于fetch API,只是做了一些改進。我個人更喜歡使用Axios API而不是fetch() API,原因如下:
// 在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,我們必須顯式處理它們。
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)。
小寫風格看起來更加清爽。
小寫字母容易編寫。
不推薦:
<SECTION>
<p>這是一個段落。</p>
</SECTION>
非常糟糕:
<Section>
<p>這是一個段落。</p>
</SECTION>
推薦:
<section>
<p>這是一個段落。</p>
</section>
關閉所有 HTML 元素
在 HTML5 中, 你不一定要關閉所有元素 (例如 <p> 元素),但我們建議每個元素都要添加關閉標簽。
不推薦:
<section>
<p>這是一個段落。
<p>這是一個段落。
</section>
推薦:
<section>
<p>這是一個段落。</p>
<p>這是一個段落。</p>
</section>
關閉空的 HTML 元素
在 HTML5 中, 空的 HTML 元素也不一定要關閉:
我們可以這么寫:
<meta charset="utf-8">
也可以這么寫:
<meta charset="utf-8" />
在 XHTML 和 XML 中斜線 (/) 是必須的。
如果你期望 XML 軟件使用你的頁面,使用這種風格是非常好的。
使用小寫屬性名
HTML5 屬性名允許使用大寫和小寫字母。
我們推薦使用小寫字母屬性名:
同時使用大小寫是非常不好的習慣。
開發人員通常使用小寫 (類似 XHTML)。
小寫風格看起來更加清爽。
小寫字母容易編寫。
不推薦:
<div CLASS="menu">
推薦:
<div class="menu">
屬性值
HTML5 屬性值可以不用引號。
屬性值我們推薦使用引號:
如果屬性值含有空格需要使用引號。
混合風格不推薦的,建議統一風格。
屬性值使用引號易于閱讀。
以下實例屬性值包含空格,沒有使用引號,所以不能起作用:
<table class=table striped>
以下使用了雙引號,是正確的:
<table class="table striped">
圖片屬性
圖片通常使用 alt 屬性。 在圖片不能顯示時,它能替代圖片顯示。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
定義好圖片的尺寸,在加載時可以預留指定空間,減少閃爍。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
空格和等號
等號前后可以使用空格。
<link rel = "stylesheet" href = "styles.css">
但我們推薦少用空格:
<link rel="stylesheet" href="styles.css">
避免一行代碼過長
使用 HTML 編輯器,左右滾動代碼是不方便的。
每行代碼盡量少于 80 個字符。
空行和縮進
不要無緣無故添加空行。
為每個邏輯功能塊添加空行,這樣更易于閱讀。
縮進使用兩個空格,不建議使用 TAB。
比較短的代碼間不要使用不必要的空行和縮進。
不必要的空行和縮進:
<body>
<h1>菜鳥教程</h1>
<h2>HTML</h2>
<p>
菜鳥教程,學的不僅是技術,更是夢想。
菜鳥教程,學的不僅是技術,更是夢想。
菜鳥教程,學的不僅是技術,更是夢想,
菜鳥教程,學的不僅是技術,更是夢想。
</p>
</body>
推薦:
<body>
<h1>菜鳥教程</h1>
<h2></h2>
<p>菜鳥教程,學的不僅是技術,更是夢想。
菜鳥教程,學的不僅是技術,更是夢想。
菜鳥教程,學的不僅是技術,更是夢想。
菜鳥教程,學的不僅是技術,更是夢想。</p>
</body>
表格實例:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<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>
<title>頁面標題</title>
</head>
<h1>這是一個標題</h1>
<p>這是一個段落。</p>
嘗試一下 ?
不推薦省略 <html> 和 <body> 標簽。
<html> 元素是文檔的根元素,用于描述頁面的語言:
<!DOCTYPE html>
<html lang="zh">
聲明語言是為了方便屏幕閱讀器及搜索引擎。
省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。
省略 <body> 在舊版瀏覽器 (IE9)會發生錯誤。
省略 <head>?
在標準 HTML5 中, <head>標簽是可以省略的。
默認情況下,瀏覽器會將 <body> 之前的內容添加到一個默認的 <head> 元素上。
實例
<!DOCTYPE html>
<html>
<title>頁面標題</title>
<body>
<h1>這是一個標題</h1>
<p>這是一個段落。</p>
</body>
</html>
嘗試一下 ?
現在省略 head 標簽還不推薦使用。 |
元數據
HTML5 中 <title> 元素是必須的,標題名描述了頁面的主題:
<title>菜鳥教程</title>
標題和語言可以讓搜索引擎很快了解你頁面的主題:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>菜鳥教程</title>
</head>
HTML 注釋
注釋可以寫在 <!-- 和 --> 中:
<!-- 這是注釋 -->
比較長的評論可以在 <!-- 和 --> 中分行寫:
<!--
這是一個較長評論。 這是 一個較長評論。這是一個較長評論。
這是 一個較長評論 這是一個較長評論。 這是 一個較長評論。
-->
長評論第一個字符縮進兩個空格,更易于閱讀。
樣式表
樣式表使用簡潔的語法格式 ( type 屬性不是必須的):
<link rel="stylesheet" href="styles.css">
短的規則可以寫成一行:
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 屬性不是必須的 ):
<script src="myscript.js">
使用 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 屬性不是必須的):
<script src="myscript.js">
使用 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,我們一起飛!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。