天天看點

JavaScript + ajax 學習筆記

ajax

  • 簡介
    • Asynchronous JavaScript and XML
    • Web的運作原理
      • 一次HTTP請求對應一個頁面
    • ajax
      • 讓使用者留在目前頁面中,同時用js發出新的HTTP請求
      • AJAX請求是異步執行的,要通過回調函數獲得響應
      • 在現代浏覽器上寫AJAX主要依靠XMLHttpRequest對象:
  • JavaScript
    • 簡介
      • ECMAScript
        • 一種語言标準
        • JavaScript是網景公司對ECMAScript标準的一種實作
    • 入門
      • JavaScript代碼放到<head>中
      • 法一
        • 由<script>...</script>包含
        • e.g.

          <html>​<head>​<script>alert('Hello, world'); </script></head><body> ... </body></html>

      • 法二
        • 把JavaScript代碼放到一個單獨的.js檔案
        • e.g.

          <html>​<head>​<script src="/static/js/abc.js"></script></head><body> ... </body></html>

      • 可以在同一個頁面中引入 / 編寫多個.js檔案,浏覽器按照順序依次執行。
    • Map
      • “名字”-“成績”的對照表
      • 直接根據名字查找成績,無論這個表有多大,查找速度都不會變慢。
      • e.g.

        var m = new Map(); // 空Mapm.set('Adam', 67); // 添加新的key-valuem.set('Bob', 59);m.has('Adam'); // 是否存在key 'Adam': truem.get('Adam'); // 67m.delete('Adam'); // 删除key 'Adam'm.get('Adam'); // undefined

      • 多次對一個key放入value,後面的值會把前面的值沖掉
    • Set
      • 一組key的集合,但不存儲value
      • 由于key不能重複,是以,在Set中,沒有重複的key
        • 重複元素在Set中自動被過濾
        • 可以重複添加,但不會有效果
      • 數字3和字元串'3'是不同的元素
      • e.g.

        var s = new Set([1, 2, 3, 3, '3']);s; // Set {1, 2, 3, "3"}

    • Iterable
      • 周遊 for ... of
        • 周遊Array可以采用下标循環
          • 周遊Map和Set無法使用下标
        • Array、Map和Set都屬于iterable類型。
        • 具有iterable類型的集合可以通過新的for ... of循環來周遊
          • 隻循環集合本身的元素
        • e.g.

          var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);for (var x of m) { // 周遊Map console.log(x[0] + '=' + x[1]);}

      • for ... in
        • 周遊對象的屬性名稱
          • Array的length屬性不包括在内
        • 一個Array數組實際上也是一個對象,它的每個元素的索引被視為一個屬性。
        • e.g. 手動給對象添加額外屬性

          var a = ['A', 'B', 'C'];a.name = 'Hello';for (var x in a) { console.log(x); // '0', '1', '2', 'name'}

      • forEach
        • e.g. array

          'use strict';var a = ['A', 'B', 'C'];a.forEach(function (element, index, array) {    // element: 指向目前元素的值    // index: 指向目前索引    // array: 指向Array對象本身    console.log(element + ', index = ' + index);});​

        • e.g. set

          var s = new Set(['A', 'B', 'C']);s.forEach(function (element, sameElement, set) { console.log(element);});

          • Set沒有索引 => 回調函數的前兩個參數都是元素本身
        • e.g. Map

          var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);m.forEach(function (value, key, map) { console.log(value);});

      • function
        • 定義

          function abs(x) { if (typeof x !== 'number') { throw 'Not a number'; } if (x >= 0) { return x; } else { return -x; }}

          • abs() => 函數對象
          • 函數名abs => 指向該函數的變量
        • arguments
          • 隻在函數内部起作用
          • 指向目前函數的調用者傳入的所有參數
            • 即使函數不定義任何參數,還是可以拿到參數的值
          • arguments類似Array但它不是一個Array
        • rest
          • e.g.

            function foo(a, b, ...rest) { console.log('a = ' + a); console.log('b = ' + b); console.log(rest);}​foo(1, 2, 3, 4, 5);// 結果:// a = 1// b = 2// Array [ 3, 4, 5 ]​foo(1);// 結果:// a = 1// b = undefined// Array []​

          • 如果傳入的參數連正常定義的參數都沒填滿,rest參數會接收一個空數組
            • 注意不是undefined

繼續閱讀