麻豆md0077饥渴少妇,欧美成人性视频在线播放,公交车h系列辣文舒婷

主要源于廖雪峰老師的JavaScript教程

瀏覽器

1. 簡介

注意IE瀏覽器，別的支持的都挺好。
IE 6~11：國內用得最多的IE瀏覽器，歷來對W3C標準支持差。從IE10開始支持ES6標準；
另外還要注意識別各種國產瀏覽器，如某某安全瀏覽器，某某旋風瀏覽器，它們只是做了一個殼，其核心調用的是IE，也有號稱同時支持IE和Webkit的“雙核”瀏覽器。
不同的瀏覽器對JavaScript支持的差異主要是，有些API的接口不一樣，比如AJAX，File接口。對于ES6標準，不同的瀏覽器對各個特性支持也不一樣。
在編寫JavaScript的時候，就要充分考慮到瀏覽器的差異，盡量讓同一份JavaScript代碼能運行在不同的瀏覽器中。

2. 瀏覽器對象

JavaScript可以獲取瀏覽器提供的很多對象，并進行操作。

window
window對象不但充當全局作用域，而且表示瀏覽器窗口。
window對象有innerWidth和innerHeight屬性，可以獲取瀏覽器窗口的內部寬度和高度。內部寬高是指除去菜單欄、工具欄、邊框等占位元素后，用于顯示網頁的凈寬高。
兼容性：IE<=8不支持
相對應，還有一個outerWidth和outerHeight屬性，可以獲取瀏覽器窗口的整個寬高。
navigator
navigator對象表示瀏覽器的信息，最常用的屬性包括：

navigator.appName:瀏覽器名稱
navigator.appVersion:瀏覽器版本
navigator.language:瀏覽器設置的語言
navigator.platform:操作系統類型
navigator.userAgent:瀏覽器設定的User-Agent字符串

請注意,navigator的信息可以很容易地被用戶修改，所以JavaScript讀取的值不一定是正確的。
很多初學者為了針對不同瀏覽器編寫不同的代碼，喜歡用if判斷瀏覽器版本，例如：

var width;
if (getIEVersion(navigator.userAgent) < 9) {
    width = document.body.clientWidth;
} else {
    width = window.innerWidth;
}

這樣即可能判斷不準確，也很難維護代碼。正確的方法是充分利用JavaScript對不存在屬性返回undefined的特性，直接用短路運算符||計算：
var width = window.innerWidth || document.body.clientWidth;

screen
screen對象表示屏幕的信息，常用的屬性有：

screen.width: 屏幕寬度，以像素為單位
screen.height:屏幕高度，以像素為單位
screen.colorDepth:返回顏色位數，如8、16、24

location
location對象表示當前頁面的URL信息，例如：一個完成的URL：
http://www.example.com:8080/path/index.html?a=1&b=2#TOP
可以用location.href獲取。要獲取各個部分的值：

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

要加載一個新頁面，可以用location.assign()。如果要重新加載當前頁面，調用location.reload()方法非常方便。

document
document對象表示當前頁面。由于HTML在瀏覽器中以DOM形式表示為樹形結構，document對象就是整個DOM樹的根節點。
document的title屬性是從HTML文檔中的<title>xxx</title>讀取的，但是可以動態改變：
document.title = '努力學習中...'
要查找DOM樹的某個節點，需要從document對象開始查找。最常用根據ID和Tag Name。

#元數據
<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
    <dt>摩卡</dt>
    <dd>熱摩卡咖啡</dd>
    <dt>酸奶</dt>
    <dd>北京老酸奶</dd>
    <dt>果汁</dt>
    <dd>鮮榨蘋果汁</dd>
</dl>

用document對象提供的getElementById()和getElementByTagName()可以按ID獲得一個DOM節點和按Tag名稱獲得一組DOM節點：

'use strict';
var menu = document.getElementById('drink-menu');
var drinks = document.getElementByTagName('dt');
var i, s, menu, drinks;

menu = document.getElementById('drink-menu');
menu.tagName;//'DL'

drinks = document.getElementsByTagName('dt');
s  = '提供的飲料有：'；
for (i=0; i<drinks.length; i++) {
    s = s + drinks[i].innerHTML + ',';
}
console.log(s);

document對象還有一個cookie屬性，可以獲取當前頁面的cookie。

Cookie是由服務器發送的key-value標示符。因為HTTP協議是無狀態的，但是服務器要區分到底是哪個用戶發過來的請求，就可以用Cookie來區分。當一個用戶成功登錄后，服務器發送一個Cookie給瀏覽器，例如user=ABC123XYZ(加密的字符串)...，此后，瀏覽器訪問該網站時，會在請求頭附上這個Cookie，服務器根據Cookie即可區分出用戶。
Cookie還可以存儲網站的一些設置，例如，頁面顯示的語言等等。

JavaScript可以通過document.cookie讀取到當前頁面的Cookie:
document.cookie; //'v=123; remember=true; prefer=zh'
由于JavaScript能讀取到頁面的Cookie，而用戶的登錄信息通常也存在Cookie中，這就造成了巨大的安全隱患，這是因為在HTML頁面中引入第三方的JavaScript代碼是允許的：

<!-- 當前頁面在wwwexample.com -->
<html>
    <head>
        <script src="http://www.foo.com/jquery.js"></script>
    </head>
    ...
</html>

為了解決這個問題，服務器在設置Cookie時可以使用httpOnly，設定了httpOnly的Cookie將不能被JavaScript讀取。這個行為由瀏覽器實現，主流瀏覽器均支持httpOnly選項，IE從IE6 SP1開始支持。

為了確保安全，服務器端在設置Cookie時，應該始終堅持使用httpOnly。

history
history對象保存了瀏覽器的歷史記錄，JavaScript可以調用history對象的back()或forward()，相當于點擊了后退或前進。

這個對象屬于歷史遺留對象，對于現代Web頁面來說，由于大量使用AJAX和頁面交互，簡單粗暴地調用history.back()可能會讓用戶感到非常憤怒。

新手開始設計Web頁面時喜歡在登錄頁登錄成功時調用history.back()，試圖回到登錄前的頁面。這是一種錯誤的方法。

任何情況，你都不應該使用history這個對象了。

3. 操作DOM 簡介

由于HTML文檔被瀏覽器解析后就是一顆DOM樹，要改變HTML結構，就需要通過JavaScript來操作DOM。
操作一個DOM節點實際上就是這么幾個操作：

更新：更新該DOM節點的內容，相當于更新了該DOM節點表示的HTML的內容；
遍歷：遍歷該DOM節點下的子節點，以便進行進一步操作；
添加：在該DOM節點下新增一個子節點，相當于動態增加了一個HTML節點；
刪除：將該節點從HTML中刪除，相當于刪掉了該DOM節點的內容以及它包含的所有子節點。
那么，如何拿到DOM節點呢：

#ID是唯一的
document.getElementById()
#下面這兩個都是返回一組DOM節點。
document.getElementsByTagName()
#CSS的
document.getElementsByClassName()

要精確地選擇DOM，可以先定位父節點，再從父節點開始選擇，以縮小范圍。例如：

// 返回ID為'test'的節點：
var test = document.getElementById('test');
// 先定位ID為'test-table'的節點，再返回其內部所有tr節點：
var trs = document.getElementById('test-table').getElementsByTagName('tr');
// 先定位ID為'test-div'的節點，再返回其內部所有class包含red的節點：
var reds = document.getElementById('test-div').getElementsByClassName('red');
// 獲取節點test下的所有直屬子節點:
var cs = test.children;
//獲取節點test下第一個、最后一個子節點：
var first = test.firstElementChild;
var last = test.lastElementChild;

第二種方法是使用querySelector()和querySelectorAll()，需要了解selector語法，然后使用條件獲取節點：

// 通過querySelector獲取ID為q1的節點：
var q1 = document.querySelector('#q1');
//通過querySelectorAll獲取q1節點內的符合條件的所有節點：
var ps = q1.querySelectorAll('div.highlighted > p');

注意：低版本的IE<8不支持querySelector和querySelectorAll。IE8僅有限支持。

嚴格地講，我們這里的DOM節點是指Element，但是DOM節點實際上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等很多種，以及根節點Document類型，但是，絕大多數時候我們只關心Element，也就是實際控制頁面結構的Node，其他類型的Node忽略即可。根節點Document已經自動綁定為全局變量document。

更新DOM
拿到一個DOM節點后，我們可以對它進行更新。
可以直接修改節點的文本，有兩種方法：

-1. 修改innerHTML屬性。這種方式非常強大，不但可以修改一個DOM節點的文本內容，還可以直接通過HTML片段修改DOM節點內部的子樹：

//獲取<p id="p-id">...</p>
var p = document.getElementById('p-id');
//設置文本為abc:
p.innerHTML = 'ABC';  //<p id="p-id">ABC</p>
//設置HTML
p.innerHTML = ' ABC <span style="color:red">RED</span> XYZ';
// <p>...</p>的內部結構已修改

用innerHTML時要注意，是否需要寫入HTML。如果寫入的字符串是通過網絡拿到了，要注意對字符編碼來避免XSS攻擊。

-2. 修改innerText或textContent屬性，這樣可以自動對字符串進行HTML編碼，保證無法設置任何HTML標簽：

// 獲取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 設置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自動編碼，無法設置一個<script>節點:
// <p id="p-id">&lt;script&gt;alert("Hi")&lt;/script&gt;</p>

innerText不返回隱藏元素的文本，textContent返回所有文本。IE<9不支持textContent。

-3. 修改CSS也是經常需要的操作。DOM節點的style屬性對應所有的CSS，可以直接獲取或設置。因為CSS允許font-size這樣的名稱，但它并非JavaScript有效的屬性名，所以需要在JavaScript中改寫為駝峰式命名fontSize：

// 獲取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 設置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';

插入DOM
獲得了一個DOM節點，在這個DOM節點內插入新的DOM，如何做？
如果DOM節點是空的，例如：<div></div>，可以直接使用innerHTML = '<span>child</span>'就可以修改節點，相當于插入新的DOM節點。
如果不為空，就不能這么做，因為innerHTML會替換掉原來的所有子節點。
有兩個辦法可插入新的節點。

-1. 使用appendChild,把一個子節點添加到父節點的最后一個子節點：

<!-- HTML結構 -->
<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>
<!-- 把<p id="js">JavaScript</p>添加到<div id="list">的最后一項：-->
var 
      js = document.getElementById('js'),
      list = document.getElementById('list');
list.appendChild(js);

<!--插入之后新的 HTML結構 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="js">JavaScript</p>
</div>
#因為我們插入的js節點已經存在于當前的文檔樹，因此這個節點首先會從原先的位置刪除，再插入到新的位置。

更多時候我們會從零創建一個新的節點，然后插入指定位置：

var 
      list = document.getElementById('list'),
      haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

<!-- HTML結構 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="haskell">Haskell</p>
</div>

動態創建一個節點然后添加到DOM樹中，可以實現很多功能。舉個例子，下面的代碼動態創建了一個<style>節點，然后把它添加到<head>節點的末尾，這樣就動態地給文檔添加了新的CSS定義：

var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementByTagName('head')[0].appendChild(d);

-2. insertBefore
如果我們要把子節點插入到指定的位置怎么辦？可以使用parentElement.insertBefore(newElement, referenceElement);，子節點會插入到referenceElement之前。

<!-- HTML結構 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

var
    list = document.getElementById('list'),
    ref = document.getElementById('python'),
    haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);

<!-- HTML結構 -->
<div id="list">
    <p id="java">Java</p>
    <p id="haskell">Haskell</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

可見，使用insertBefore重點是要拿到一個參考子節點。可以通過遍歷父節點的所有子節點:

var 
        i , c, 
        list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
    c = list.children[i];  //拿到第i個子節點
}

刪除DOM
要刪除一個節點，首先獲取該節點本身以及它的父節點，然后，調用父節點的removeChild把自己刪除：

// 拿到待刪除節點:
var self = document.getElementById('to-be-removed');
// 拿到父節點:
var parent = self.parentElement;
//刪除
var removed = parent.removeChild(self);
removed === self;//true

注意到刪除后的節點雖然不在文檔樹中了，但其實它還在內存中，可以隨時再次被添加到別的位置。

當你遍歷一個父節點的子節點并進行刪除操作時，要注意，children屬性是一個只讀屬性，并且它在子節點變化時會實時更新。

<div id="parent">
    <p>First</p>
    <p>Second</p>
</div>

var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 瀏覽器報錯

瀏覽器報錯：parent.children[1]不是一個有效的節點。原因在于,當<p>First</p>節點被刪除后，parent.children的節點數量已經從2變為1了，索引[1]已經不存在了。因此，刪除多個節點是，要注意children屬性時刻都在變化。

4. 操作表單

用JavaScript操作表單和操作DOM類似，因為表單本身也是DOM樹。

不過表單的輸入框、下拉框等可以接收用戶輸入，所以用JavaScript來操作表單，可以獲得用戶輸入的內容，或者對一個輸入框設置新的內容。

HTML表單輸入控件主要有以下幾種：

#文本框：
<input type="text">//輸入文本
#口令框：
<input type="password">//輸入口令
#單選框：
<input type="radio">//選擇一項
#復選框：
<input type="checkbox">//用于多選
#下拉框
<select>//用于選擇一項
#隱藏文本
<input type="hidden">//用戶不可見，但表單提交時會把隱藏文本發送到服務器

獲取值
如果我們獲得了一個<input>節點的引用，就可以直接調用value獲得對應的用戶輸入值：

//<input type="text" id="email">
var input = document.getElementById('email');
input.value;  //用戶輸入值

這種方式可以應用于text、password、hidden、select。但是，對于單選框radio和復選框checkbox,value返回的永遠是HTML預設的值，我們要獲得實際用戶是否勾選了選項，應該用checked判斷：

//<label><input type="radio" name="weekday" id="monday" value="1">Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday')；
var tue = document.getElementById('tuesday');
mon.value;  //'1'
tue.value;  //'2'
mon.checked;  //true或者false
tue.checked;  //true或者false

設置值
設置值和獲取值類似，對于text、password、hidden、select直接設置value就可以：

// <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com';  //文本框的內容已更新

對于單選和復選框，設置checked為true或者false即可。

HTML5控件
H5新增了大量的標準控件，常用的包括date、datetime、datetime-local、color等，它們都使用<input>標簽:

<input type="date" value="2015-07-01">//輸入框2015-07-01
<input type="datetime-local" value="2015-07-01T02:03:04">//輸入框2015-07-01T02:03:04
<input type="color" value="#ff0000">//輸入框#ff0000

不支持H5的控件無法識別新的控件，會把它們當做type="text"來顯示。支持H5的瀏覽器將獲得格式化的字符串。例如:type="date"類型的input的value將保證是一個有效的YYYY-MM-DD格式的日期，或者空字符串。

提交表單
最后,JavaScript可以以兩種方式來處理表單的提交(AJAX方式在后面章節介紹)。

方式一是通過<form>元素的submit()方法提交一個表單，例如，相應一個<button>的click事件，在JavaScript代碼中提交表單:

<!-- HTML -->
<form id="test-form">
      <input type="text" name="test">
      <button type="button" onclick="doSubmitForm()">Submit</button>
</form>

<script>
function doSubmitForm() {
      var form = document.getElementById('test-form');
    //可以在此修改form的input...
    //提交form:
      form.submit();
}
</script>

這種方式的缺點是擾亂了瀏覽器對form的正常提交。瀏覽器默認點擊<button type="submit">時提交表單，或者用戶在最后一個輸入框按回車鍵。
因此，第二種響應<form>本身的onsubmit事件，在提交form時做修改：

<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
      <input type="text" name="test">
      <button type="submit">Submit</button>
</form>

<script>
 function checkForm() {
      var form = document.getElementById('test-form');
      // 可以在此修改form的input...
    // 繼續下一步:
      return true;
}
</script>

注意，return true來告訴瀏覽器繼續提交，如果return false，瀏覽器將不會繼續提交form,這種情況通常對應用戶輸入有誤，提示用戶錯誤信息后終止提交form.
在檢查和修改<input>時，要充分利用<input type="hidden">來傳遞數據。
例如，很多登錄表單希望用戶輸入用戶名和口令。但是，安全考慮，提交表單時不傳輸明文口令，而是口令的MD5。普通JavaScript開發人員會直接修改<input>:

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="password" name="password">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
      var pwd = document.getElementById('password');
// 把用戶輸入的明文變為MD5:
      pwd.value = toMD5(pwd.value);
// 繼續下一步:
      return true;
}
</script>

這個做法看上去沒啥問題，但用戶輸入了口令提交時，口令框的顯示會突然從幾個*變成32個*。
要想不改變用戶的輸入，可以利用<input type="hidden">實現：

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="input-password">
    <input type="hidden" id="md5-password" name="password">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var input_pwd = document.getElementById('input-password');
    var md5_pwd = document.getElementById('md5-password');
    // 把用戶輸入的明文變為MD5:
    md5_pwd.value = toMD5(input_pwd.value);
    // 繼續下一步:
    return true;
}
</script>

注意：id為md5-password的<input>標記了name="password",而用戶輸入的id為input-password的<input>沒有name屬性。沒有name屬性的<input>的數據不會被提交。

5. 操作文件

在HTML表單中，可以上傳文件的唯一控件就是<input type="file">。
注意：當一個表單包含<input type="file">時，表單的enctype必須指定為multipart/form-data,method必須指定為post，瀏覽器才能正確編碼并以multipart/form-data格式發送表單的數據。
出于安全考慮，瀏覽器只允許用戶點擊<input type="file">來選擇本地文件，用JavaScript對<input type="file">的value賦值是沒有任何效果的。當用戶選擇了上傳某個文件后，JavaScript也無法獲得該文件的真實路徑。通常，上傳的文件都由后臺服務器處理，JavaScript可以在提交表單時對文件擴展名做檢查，以防止用戶上傳無效格式的文件：

var f = document.getElementById('test-file-upload');
var filename = f.value;  //'C:\fakepath\test.png'
if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {
    alert('Can only upload image file.')
    return false;
}

File API
由于JavaScript對用戶上傳的文件操作非常有限，尤其是無法讀取文件內容，是的很多需要操作文件的網頁不得不用Flash這樣的三方插件來實現。
隨著H5的普及，新增的File API允許JavaScript讀取文件內容，獲得更多的文件信息。
H5 的File API提供了File和FileReader兩個主要對象，可以獲得文件信息并讀取文件。
下面的例子演示了如何讀取用戶選取的圖片文件，并在一個<div>中預覽圖像：

var 
        fileInput = document.getElementById('test-image-file'),
        info = document.getElementById('test-file--info'),
        preview = document.getElementById('test-image-preview');
//監聽change事件:
fileInput.addEventListener('change', function () {
    //清楚背景圖片
    preview.style.backgroundImage = '';
    //檢查文件是否選擇
    if (!fileInput.value) {
          info.innerHTML = '沒有選擇文件';
          return;
    }
    //獲取File引用
    var file = fileInput.files[0];
    //獲取File信息：
    info.innerHTML  = '文件： ' + file.name + '<br>' + '大小： ' + file.size + '<br>' + '修改： ' + file.lastModifiedDate;
    if(file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
          alert('不是有效的圖片文件！');
          return;
    }
    //讀取文件
    var reader = new FileReader();
    reader.onload = function(e) {
          var
                data = e.target.result;//'data:image/jpeg;base64,/9j/4AAQSK...(base64編碼)...'
          preview.style.backgroundImage = 'url(' + data +  ')';
    };
    //以DataURL的形式讀取文件：
    reader.readAsDataURL(file);
})

上面的代碼演示了如何通過H5的File API讀取文件的內容。以DataURL的形式讀取到的文件是一個字符串，類似于data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...,常用于設置圖像。如果需要服務器端處理，把字符串base64,后面的字符發送給服務器并用Base64解碼就可以得到原始文件的二進制內容。

回調
上面的代碼還演示了JavaScript的一個重要特性就是單線程執行的模式。在JavaScript中，瀏覽器的JavaScript執行引擎在執行JavaScript代碼時，總是以單線程模式執行，也就是說，任何時候，JavaScript代碼都不可能同時有多余1個線程在執行。
那么，單線程模式執行的JavaScript，如何處理多任務？？
在JavaScript中，執行多任務實際上都是異步回調,比如上面的代碼：
reader.readAsDataURL(file);
會發起一個異步操作來讀取文件內容。因為是異步操作，所以我們在JavaScript代碼中就不知道什么時候操作結束，因此需要先設置一個回調函數：
reader.onload = function(e){//當文件讀取完成后，自動調用此函數};
當文件讀取完成后，JavaScript引擎將自動調用我們設置的回調函數。執行回調函數時，文件已經讀取完畢，所以我們可以在回調函數內部安全地獲得文件內容。

6. AJAX

AJAX不是JavaScript規范，它只是一個發明的縮寫:Asynchronous JavaScript and XML，用JavaScript執行異步網絡請求。

如果仔細觀察一個Form的提交，你就會發現，一旦用戶點擊“Submit”按鈕，表單開始提交，瀏覽器就會刷新頁面，然后在新頁面里告訴你操作是成功了還是失敗了。如果不幸由于網絡太慢或者其他原因，就會得到一個404頁面。
這就是Web的運作原理：一次HTTP請求對應一個頁面。

如果要讓用戶留在當前頁面中，同時發出HTTP請求，就必須用JavaScript發送這個新的請求，即受到數據后，再用JavaScript更新頁面，這樣一來，用戶就感覺自己仍然停留在當前頁面，但是數據卻可以不斷更新。
用JavaScript寫一個完整的AJAX代碼并不復雜，但需要注意：AJAX請求是異步執行的，也就是說，要通過回調函數獲得響應。

在現在瀏覽器上寫AJAX主要依靠XMLHttpRequest對象：

'use strict';
function success(text) {
      var textarea = document.getElementById('test-response-text');
      textarea.value = text;
}

function fail(code) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = 'Error code: ' + code;
}

//低版本IE，需要換成ActiveXObject對象來創建
var request;
if(window.XMLHttpRequeest) {
      request = new XMLHttpRequest();  //新建XMLHttpRequest對象
} else {
      request = new ActiveXObject('Microsoft.XMLHTTP');//低版本IE用這個創建ActiveXObject對象
}

request.onreadystatechange = function () {
//狀態發生變化時，函數被回調
      if (request.readyState === 4) {
      //成功完成
            if (request.status === 200) {
            //成功，通過responseText拿到相應的文本：
                    return success(request.responseText);
            } else {
            //失敗，根據響應碼判斷失敗原因：
                    return fail(request.status);
            }
      } else {
      //HTTP請求還在繼續
      }
}

//發送請求
request.open('GET', '/api/categories');
request.send();

alert('請求已發送，請等待響應...');

XMLHttpRequest對象的open()方法有3個參數，第一個參數指定是GET還是POST，第二個參數指定URL 地址，第三個參數指定是否使用異步，默認是true,所以不用寫。
注意：千萬不要把第三個參數指定為false，否則瀏覽器將停止響應，知道AJAX請求完成。如果這個請求耗時10秒，那么10秒內你會發現瀏覽器處于假死狀態。
最后調用send()方法才真正發送請求。GET請求不需要參數，POST請求需要把body部分以字符串或者FormData對象傳進去。

安全限制
上面open中的URL使用的是相對路徑。如果你把它改為http://www.sina.com.cn/,在運行，肯定報錯。這是因為瀏覽器的同源策略導致的。默認情況下，JavaScript在發送AJAX請求時，URL的域名必須和當前頁面完全一致。

完全一致的意思是，域名要相同（www.example.com和example.com不同），協議要相同（http和https不同），端口號要相同（默認是:80端口，它和:8080就不同）。有的瀏覽器口子松一點，允許端口不同，大多數瀏覽器都會嚴格遵守這個限制。

JavaScript如何請求外域的URL了呢？
一是通過Flash插件發送HTTP請求，這種方法可以繞過瀏覽器的安全限制，但是必須安裝Flash，并跟Flash交互。
二是通過在同源域名下架設一個代理服務器來轉發，JavaScript負責把請求發送到代理服務器：
/proxy?url=http://www.sina.com.cn
代理服務器再把結果返回，這樣就遵守了瀏覽器的同源策略。這種方式麻煩之處在于需要服務器額外做開發。
第三種方式稱為JSONP，它有個限制，只能用GET請求，并且要求返回JavaScript。這種方式跨域實際上利用了瀏覽器允許跨域引用JavaScript資源：

<html>
<head>
    <script src="http://example.com/abc.js"></script>
    ...
</head>
<body>
...
</body>
</html>

JSONP通常以函數調用的形式返回，例如，返回JavaScript內容如下：
foo('data');
這樣一來，我們如果在頁面中先準備好了foo()函數，然后給頁面動態加一個<script>節點，相當于動態讀取外域的JavaScript資源，最后就等著接收回調了。例如：

外域的返回如下：
refreshPrice({"0000001":{"code": "0000001", ... });

//回調函數
function refreshPrice(data) {
      var p = document.getElementById('test-jsonp');
      p.innerHTML = '當前價格： ' + data['0000001'].name + ': ' + data['0000001'].price + '；' + data['1399001'].name + ': ' + data['1399001'].price;
}
//然后用`getPrice()`函數觸發：
function getPrice() {
      var
            js = document.createElement('script'),
            head = document.getElementsByTagName('head')[0];
      js.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';
      head.appendChild(js);
}

CORS
如果瀏覽器支持H5，可以一勞永逸的使用心得跨域策略：CORS了。
CORS全稱Cross-Origin Resource Sharing,是HTML5規范定義的如何跨域訪問資源。
Origin表示本域，也就是瀏覽前當前頁面的域。當JavaScript向外域發起請求后，瀏覽器收到響應后，首先檢查Access-Control-Allow-Origin是否包含本域，如果是，則此次跨域請求成功，如果不是，則請求失敗。

假設本域是my.com，外域是sina.com，只要響應頭Access-Control-Allow-Origin為http://my.com,或者是*,本次請求就可以成功。
可見，跨域是否成功，取決于對方服務器是否愿意給你設置一個正確的Access-Control-Allow-Origin,決定權在對方手中。
上面這種跨域請求，稱之為簡單請求.包括GET、HEAD、POST（POST的content-Type類型僅限application/x-www-form-urlencoded、multipart/form-data和text/plain），并且不能出現任何自定義頭(例如：X-Custom: 12345),通常能滿足90%需求。

CORS原理，最新瀏覽器全面支持H5。在引用外域資源時，除了JavaScript和CSS外，都要驗證CORS。例如，當你引用了某個第三方CDN上的字體文件時：

/* CSS */
@font-face {
    font-family: 'FontAwesome';
    src: url('http://cdn.com/fonts/fontawesome.ttf') format('truetype');
}

如果該CDN服務商未正確設置Access-Control-Allow-Origin，那么瀏覽器無法加載字體資源。

對于PUT、DELETE以及其他類型如application/json的POST請求，在發送AJAX請求之前，瀏覽器會先發送一個OPTIONS請求（稱為preflighted請求）到這個URL上，詢問目標服務器是否接受：

OPTIONS /path/to/resource HTTP/1.1
Host: bar.com
Origin: http://my.com
Access-Control-Request-Method: POST

服務器必須響應并明確指出允許的Method:

HTTP/1.1  200  OK
Access-Control-Allow-Origin: http://my.com
Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
Access-Control-Max-Age: 86400

瀏覽器確認服務器響應的Access-Control-Allow-Methods頭確實包含將要發送的AJAX請求的Method，才會繼續發送AJAX，否則，拋出一個錯誤。

由于以POST、PUT方式傳送JSON格式的數據在REST中很常見，所以要跨域正確處理POST和PUT請求，服務器端必須正確響應OPTIONS請求。

7. Promise

在JavaScript中，所有代碼都是單線程執行的。
由于這個缺陷，導致JavaScript的所有網絡操作，瀏覽器事件，都必須異步執行。異步執行可以用回調函數實現：

function callback() {
      console.log('Done');
}
console.log('before setTimeout()');
setTimeout(callback, 1000);  //1秒后調用callback函數
console.log('after setTimeout()');
//執行結果如下：
before setTimeout()
after setTimeout()
(等待1秒后)
Done

AJAX就是典型的異步操作。

request.onreadystatechange = function () {
    if (request.readyState === 4) {
        if (request.status === 200) {
            return success(request.responseText);
        } else {
            return fail(request.status);
        }
    }
}

把回調函數success(request.responseText)和fail(request.status)寫到一個AJAX操作中很正常，但是不好看，而且不利于代碼復用。有沒有更好的寫法？比如寫成這樣：

var ajax = ajaxGet('http://....');
ajax.ifSuccess(success)
       .ifFail(fail);

這種鏈式寫法的好處在于，先統一執行AJAX邏輯，不關心如何處理結果，然后根據結果是成功還是失敗，在將來某個時候調用success函數或fail函數。
這種承諾將來會執行的對象在JavaScript中稱為Promise對象。
在ES6中，Promise被統一規范，有瀏覽器直接支持。測試是否支持：

'use strict';
new Promise(function () {});
console.log('支持Promise！');

先看一個Promise的簡單例子：生成一個0-2之間的隨機數，如果小于1，則等待一段時間后返回成功，否則返回失敗：

function test(resolve, reject) {
    var timeOut = Math.random() * 2;
    log('set timeout to: ' + timeOut + ' seconds.');
    setTimeout(function () {
          if (timeOut < 1) {
                log('call resolve()...');
                resolve('200 OK');
          } else {
                log('call reject()...');
                reject('timeout in ' + timeOut + 'seconds.');
          }
    },timeOut * 1000);
}

這個test()函數有兩個參數，這兩個參數都是函數，如果執行成功，我們將調用resolve('200 OK');,如果失敗，調用reject('timeout in ' + timeOut + 'seconds.');。test()函數只關心自身的邏輯，并不關心具體的resolve和reject將如何處理結果。
有了執行函數，我們就可以用一個Promise對象來執行它，并在將來某個時刻獲得成功或失敗的結果：

var p1 = new Promise(test);
var p2 = p1.then(function (result) {
      console.log('成功：' + result);
});
var p3 = p2.catch(function (reason) {
      console.log('失敗：' + reason); 
});

變量p1是一個Promise對象，它負責執行test函數。由于test函數在內部是異步執行的，當test函數執行成功時，我們告訴Promise對象：

//如果成功，執行這個函數：
p1.then(function (result) {
      console.log('成功： ' + result);
});

當test()函數執行失敗時，我們告訴Promise對象：

p2.catch(function (reason) {
      console.log('失敗：' + reason);
});

Promise對象可以串聯起來，所以上述代碼可以簡化為：

new Promise(test).then(function (result) {
      console.log('成功：' + result);
}).catch(function (reason) {
      console.log('失敗：' + reason);
});

實際測試代碼，看看Promise是如何異步執行的：

'use strict';

// 清除log:
var logging = document.getElementById('test-promise-log');
while (logging.children.length > 1) {
    logging.removeChild(logging.children[logging.children.length - 1]);
}

// 輸出log到頁面:
function log(s) {
    var p = document.createElement('p');
    p.innerHTML = s;
    logging.appendChild(p);
}

new Promise(function (resolve, reject) {
    log('start new Promise...');
    var timeOut = Math.random() * 2;
    log('set timeout to: ' + timeOut + ' seconds.');
    setTimeout(function () {
        if (timeOut < 1) {
            log('call resolve()...');
            resolve('200 OK');
        }
        else {
            log('call reject()...');
            reject('timeout in ' + timeOut + ' seconds.');
        }
    }, timeOut * 1000);
}).then(function (r) {
    log('Done: ' + r);
}).catch(function (reason) {
    log('Failed: ' + reason);
});

Promise最大的好處是在異步執行的流程中，把執行代碼和處理結果的代碼清晰地分離了：

Promise可以做更多的事情，比如，有若干個異步任務，需要先做任務1，如果成功后再做任務2，任何任務失敗則不再繼續并執行錯誤處理函數。
要串聯執行這樣的異步任務，不用Promise需要些一層一層的嵌套代碼。有了Promise，我們只需要簡單地寫：
job1.then(job2).then(job3).catch(handleError);
其中,job1、job2和job3都是Promise對象。
下面的例子演示了如何串行執行一系列需要異步計算獲得結果的任務：

'use strict';

var logging = document.getElementById('test-promise2-log');
while (logging.children.length > 1) {
    logging.removeChild(logging.children[logging.children.length - 1]);
}

function log(s) {
    var p = document.createElement('p');
    p.innerHTML = s;
    logging.appendChild(p);
}

// 0.5秒后返回input*input的計算結果:
function multiply(input) {
    return new Promise(function (resolve, reject) {
        log('calculating ' + input + ' x ' + input + '...');
        setTimeout(resolve, 500, input * input);
    });
}

// 0.5秒后返回input+input的計算結果:
function add(input) {
    return new Promise(function (resolve, reject) {
        log('calculating ' + input + ' + ' + input + '...');
        setTimeout(resolve, 500, input + input);
    });
}

var p = new Promise(function (resolve, reject) {
    log('start new Promise...');
    resolve(123);
});

p.then(multiply)
 .then(add)
 .then(multiply)
 .then(add)
 .then(function (result) {
    log('Got value: ' + result);
});

//執行結果如下：
Log:

start new Promise...

calculating 123 x 123...

calculating 15129 + 15129...

calculating 30258 x 30258...

calculating 915546564 + 915546564...

Got value: 1831093128

setTimeout可以看成一個模擬網絡等異步執行的函數。我們把上一節的AJAX異步執行函數轉換為Promise對象，看看用Promise如何簡化異步處理：

'use strict';

//ajax函數將返回Promise對象：
function ajax(method, url, data) {
      var request = new XMLHttpRequest();
      return new Promise(function (resolve, reject) {
            request.onreadystatechange = function () {
                if (request.readyState === 4) {
                      if (request.status === 200) {
                            resolve(request.responseText);
                      } else {
                            reject(request.status);
                      }
                 }
            };
            request.open(method, url);
            request.send(data);
      });
}

var log = document.getElementById('test-promise-ajax-result');
var p = ajax('GET', '/api/categories');
p.then(function (text) {//如果AJAX成功，獲得響應內容
    log.innerText = text;
}).catch(function (status) {//如果失敗，獲得響應碼
    log.innerText = 'ERROR: ' + status;
});

除了串行執行若干異步任務外，Promise還可以并行執行異步任務。
試想一個頁面聊天系統，我們需要從兩個不同的URL分別獲得用戶的個人信息和好友列表，這兩個個任務可以并行執行，用Promise.all()實現如下：

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
//同時執行p1和p2， 并在它們都完成后執行then:
Promise.all([p1, p2]).then(function(results) {
    console.log(results);  //獲得一個Array: ['P1', 'P2']
});

有些時候，多個異步任務是為了容錯。比如，同時向兩個URL讀取用戶的個人信息，只需要獲得先返回的結果即可。這種情況下可以用Promise.race()實現：

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
Promise.race([p1, p2]).then(function (result) {
      console.log(result);  //'P1'
});

由于p1執行較快，Promise的then()將獲得結果P1。p2仍在繼續執行，但執行結果將被丟棄。
如果我們組合使用Promise，就可以把很多異步任務以并行和串行的方式組合起來執行。

8. Canvas

Canvas是H5新增的組件，它就像一塊幕布，可以用JavaScript在上面繪制各種圖表、動畫等。
沒有Cavans的年代，繪圖只能借助Flash插件實現，頁面不得不用JavaScript和Flash進行交互。
一個Canvas定義了一個指定尺寸的矩形框，在這個范圍內我們可以隨意繪制：
<canvas id="test-canvas" width="300" height="200"></canvas>
由于瀏覽器對H5的標準支持不一致，所以，通常在<canvas>內部添加一些說明性的HTML代碼，如果瀏覽器支持Canvas，它將忽略<canvas>內部的HTML，如果瀏覽器不支持Canvas，它將顯示<canvas>內部的HTML：

<canvas id="test-stock" width="300" height="200">
    <p>Current Price: 25.51</p>
</canvas>

測試瀏覽器是否支持Cavas,用canvas.getContext來進行測試：

var canvas = document.getElementById('test-canvas');
if (canvas.getContext) {
    console.log('你的瀏覽器支持Canvas!');
} else {
    console.log('你的瀏覽器不支持Canvas!');
}

getContext('2d')方法讓我們拿到一個CanvasRenderingContext2D對象，所有的繪圖操作都需要通過這個對象完成。

var ctx = canvas.getContext('2d');
//繪制3D呢
var gl = canvas.getContext("webgl");

繪制形狀
我們可以在Canvas上繪制各種形狀。Canvas的坐標系統：

Canvas的坐標以左上角為原點，水平向右為X軸，垂直向下為Y軸，以像素為單位，所以每個點都是非負整數。
CanvasRenderingContext2D對象有若干方法來繪制圖形：

'use strict';
var 
        canvas = document.getElementById('test-shape-canvas'),
        ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 200, 300);//擦除(0,0)位置大小為200x200的矩形，擦除的意思是把該區域變為透明
ctx.fillStyle = '#dddddd';//設置顏色
ctx.fillRect(10, 10, 130, 130);//把(10, 10)位置大小為130x130的矩形涂色
//利用Path繪制復雜路徑：
var path = new Path2D();
path.arc(75, 75, 50, 0, Math.PI*2, true);
path.moveto(110, 75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveto(65, 65);
path.arc(60, 65, 5, 0, Math.PI*2, true);
path.moveto(95, 65);
path.arc(90, 65, 5, 0, Math.PI*2, true);
ctx.strokeStyle = '#0000ff';
ctx.stroke(path);

繪制文本
繪制文本及時在指定的位置輸出文本，可以設置文本的字體、樣式、陰影等，與CSS完全一致：

'use strict';
var 
        canvas = document.getElementById('test-text-canvas'),
        ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = '#666666';
ctx.font = '24px Arial';
ctx.fillStyle = '#333333';
ctx.fillText('帶陰影的文字', 20, 40);

Canvas除了能繪制基本的形狀和文本，還可以實現動畫、縮放、各種濾鏡和像素轉換等高級操作。如果要實現非常復雜的操作，考慮一下優化方案：

1.通過創建一個不可見的Canvas來繪圖，然后將最終繪制結果復制到頁面的可見Canvas中；
2.盡量使用整數坐標而不是浮點數
3.可以創建多個重疊的Canvas繪制不同的層，而不是在一個Canvas中繪制非常復雜的圖；
4.背景圖片如果不變可以直接用<img>標簽并放到最底層。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

JavaScript學習筆記(六)

JavaScript學習筆記(六)

瀏覽器

1. 簡介

2. 瀏覽器對象

3. 操作DOM 簡介

4. 操作表單

5. 操作文件

6. AJAX

7. Promise

8. Canvas

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

JavaScript學習筆記(六)

瀏覽器

1. 簡介

2. 瀏覽器對象

3. 操作DOM 簡介

4. 操作表單

5. 操作文件

6. AJAX

7. Promise

8. Canvas

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频