JavaScript学习总结

JS的基础操作

基本语法

break 终止 switch 或循环。
continue 跳出循环并在顶端开始。
debugger 停止执行 JavaScript，并调用调试函数（如果可用）。
do ... while 执行语句块，并在条件为真时重复代码块。
for 标记需被执行的语句块，只要条件为真。
function 声明函数。
if ... else 标记需被执行的语句块，根据某个条件。
return 退出函数。
switch 标记需被执行的语句块，根据不同的情况。
try ... catch 对语句块实现错误处理。
var 声明变量。

注意for/in

const numbers = [45, 4, 9, 16, 25];

let txt = "";
for (let x in numbers) {
  txt += numbers[x];
}

注意for/of (ES6)

const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
  text += x;
}

运算符

算数运算符

运算符 描述
+ 加法
- 减法
* 乘法
/ 除法
% 取模（余数）
++ 递加
-- 递减

赋值运算符

运算符 例子 等同于
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
<<= x <<= y x = x << y
>>= x >>= y x = x >> y
>>>= x >>>= y x = x >>> y
&= x &= y x = x & y
^= x ^= y x = x ^ y
|= x |= y x = x | y
**= x **= y x = x ** y

 **= 运算符属于ES7（2016版）

比较运算符

运算符 描述
== 等于
=== 等值等型
!= 不相等
!== 不等值或不等型
> 大于
< 小于
>= 大于或等于
<= 小于或等于
? 三元运算符

逻辑运算符

运算符 描述
&& 逻辑与
|| 逻辑或
! 逻辑非

类型运算符

运算符 描述
typeof 返回变量的类型。
instanceof 返回 true，如果对象是对象类型的实例。

位运算符

运算符 描述 例子 等同于 结果 十进制
& 与 5 & 1 0101 & 0001 0001 1
| 或 5 | 1 0101 | 0001 0101 5
~ 非 ~ 5 ~0101 1010 10
^ 异或 5 ^ 1 0101 ^ 0001 0100 4
<< 零填充左位移 5 << 1 0101 << 1 1010 10
>> 有符号右位移 5 >> 1 0101 >> 1 0010 2
>>> 零填充右位移 5 >>> 1 0101 >>> 1 0010 2

上面的例子使用 4 位无符号二进制数。所以 ~ 5 返回 10。

JavaScript 使用 32 位有符号整数，JavaScript ~ 5将返回 -6。

00000000000000000000000000000101 (5)

11111111111111111111111111111010 (~5 = -6)

按位取反公式：~x = -(x+1);

有符号整数使用最左边的位作为减号。

类型

类型 数值
typeof null “object”
typeof undefined "undefined"
typeof NaN "number"
typeof 0.1 "number"
typeof "" "string"
typeof true "boolean"
typeof {} "object"
typeof [] "object"
typeof (() => {}) "function"
typeof new Date() "object"

类型构造器

constructor 属性返回所有 JavaScript 变量的构造器函数。

"Bill".constructor                 // 返回 "function String()  { [native code] }"
(3.14).constructor                 // 返回 "function Number()  { [native code] }"
false.constructor                  // 返回 "function Boolean() { [native code] }"
[1,2,3,4].constructor              // 返回 "function Array()   { [native code] }"
{name:'Bill', age:62}.constructor  // 返回" function Object()  { [native code] }"
new Date().constructor             // 返回 "function Date()    { [native code] }"
function () {}.constructor         // 返回 "function Function(){ [native code] }"

一般不用new 对象的方式来创建一个字符串，数字或者布尔值，而是直接使用字面量。
因为原始值会快很多，而new 对象会调用对象的内置构造方法并访问原型链，效率会拖慢。
因此我们直接使用字面量：
var num = 1;
var boo = true;
var str = "a";
var arr = [];
var obj = {};
var fn = function(){};
var reg = /\s/g;

可以通过构造器检查数据类型

function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}
function isDate(myDate) {
    return myDate.constructor === Date;
}
数据转换表使用 Number,String,Boolean 构造方法转换
原始值 转换为数字 转换为字符串 转换为逻辑
false 0 "false" false
true 1 "true" true
0 0 "0" false
1 1 "1" true
"0" 0 "0" true
"000" 0 "000" true
"1" 1 "1" true
NaN NaN "NaN" false
Infinity Infinity "Infinity" true
-Infinity -Infinity "-Infinity" true
"" 0 "" false
"20" 20 "20" true
"twenty" NaN "twenty" true
[ ] 0 "" true
[20] 20 "20" true
[10,20] NaN "10,20" true
["twenty"] NaN "twenty" true
["ten","twenty"] NaN "ten,twenty" true
function(){} NaN "function(){}" true
{ } NaN "[object Object]" true
null 0 "null" false
undefined NaN "undefined" false

使用 == 比较中的5条规则

1. NaN和其他任何类型比较永远返回false（包括和他自己）

2.Boolean 和其他任何类型比较，Boolean 首先被转换为 Number 类型

3.String和Number比较，先将String转换为Number类型

4.null == undefined比较结果是true，除此之外，null、undefined和其他任何结果的比较值都为false。

原始类型和引用类型做比较时，引用类型会依照ToPrimitive规则转换为原始类型。

⭐️ToPrimitive规则，是引用类型向原始类型转变的规则，它遵循先valueOf后toString的模式期望得到一个原始类型。

如果还是没法得到一个原始类型，就会抛出 TypeError。

考验一下

[] == ![] 是 true

- 第一步，![] 会变成 false
- 第二步，应用 规则2 ，题目变成： [] == 0
- 第三步，应用 规则5 ，[]的valueOf是0，题目变成： 0 == 0
- 所以， 答案是 true

[undefined] == false 是 true

- 第一步，应用 规则5 ，[undefined]通过toString变成 '',题目变成  '' == false
- 第二步，应用 规则2 ，题目变成  '' == 0
- 第三步，应用 规则3 ，题目变成  0 == 0
- 所以， 答案是 true ！
// 但是 if([undefined]) 又是个true！

NaN == NaN 和 NaN === NaN 都是false

二进制转十进制

function bin2dec(bin){
    return parseInt(bin, 2).toString(10);
}
function dec2bin(dec){
    return (dec >>> 0).toString(2);
}

变量作用域

ES2015之前只有var，只有全局作用域和函数作用域，没有块作用域的概念。

ES2015引入了let和const，支持块作用域和常量

函数

- 函数对象

function sayHi(sName, sMessage) { alert("Hello " + sName + sMessage);}
// 每个 arg 都是一个参数，最后一个参数是函数主体,参数必须是字符串
var sayHi = new Function("sName", "sMessage", "alert(\"Hello \" + sName + sMessage);");
尽管可以使用 Function 构造函数创建函数，但最好不要使用它，因为用它定义函数比
用传统方式要慢得多。不过，所有函数都应看作 Function 类的实例

- 函数参数，默认可以从 arguments中获取传入的参数，参数最多255个

function howManyArgs() {
  if (arguments.length === 0){
   alert(arguments[0]);
  }
  //可以使用arguments的length来模拟函数的重载
}
howManyArgs("string", 45);
howManyArgs();
howManyArgs(12);

- 闭包，函数 addNum() 包括函数 doAdd() （闭包）内部函数是一个闭包，因为它将获取外部函数的参数 iNum1 和 iNum2 以及全局变量 iBaseNum 的值，doAdd() 函数根本不接受参数，它使用的值是从执行环境中获取的。

var iBaseNum = 10;

function addNum(iNum1, iNum2) {
  function doAdd() {
    return iNum1 + iNum2 + iBaseNum;
  }
  return doAdd();
}

对象

- 本地对象 - 独立于宿主环境的 ECMAScript 实现提供的对象，需要理解并掌握以下对象常用的原形方法。参考手册

  • Object
  • Function
  • Array
  • String
  • Boolean
  • Number
  • Date
  • RegExp
  • Error
  • EvalError
  • RangeError
  • ReferenceError
  • SyntaxError
  • TypeError
  • URIError

- 内置对象 - 由 ECMAScript 实现提供的、独立于宿主环境的所有对象，在 ECMAScript 程序开始执行时出现，也是本地对象

  • Global
  • Math

- 宿主对象 - 所有非本地对象都是宿主对象（host object），即由 ECMAScript 实现的宿主环境提供的对象

  • Dom
  • Bom

ECMAScript 中的所有对象都由Object这个对象继承而来。

Object 对象具有下列属性：

constructor
对创建对象的函数的引用（指针）。对于 Object 对象，该指针指向原始的 Object() 函数。
Prototype
对该对象的对象原型的引用。对于所有的对象，它默认返回 Object 对象的一个实例。

Object 对象还具有几个方法：

hasOwnProperty(property)
判断对象是否有某个特定的属性。必须用字符串指定该属性。（例如，o.hasOwnProperty("name")）
IsPrototypeOf(object)
判断该对象是否为另一个对象的原型。
PropertyIsEnumerable
判断给定的属性是否可以用 for...in 语句进行枚举。
ToString()
返回对象的原始字符串表示。对于 Object 对象，ECMA-262 没有定义这个值，所以不同的 ECMAScript 实现具有不同的值。
ValueOf()
返回最适合该对象的原始值。对于许多对象，该方法返回的值都与 ToString() 的返回值相同。

JavaScript 全局属性

Infinity 表示正/负无穷大的数值。
NaN “非数字”（"Not-a-Number"）值。
undefined 表示变量尚未赋值。

JavaScript 全局函数

函数 描述
decodeURI() 解码 URI。
decodeURIComponent() 解码 URI 组件。
encodeURI() 对 URI 进行编码。
encodeURIComponent() 对 URI 组件进行编码。
escape() 在 1.5 版中已弃用。请使用 encodeURI() 或 encodeURIComponent() 代替。
eval() 评估字符串并像脚本代码一样执行它。
isFinite() 确定值是否是有限的合法数。
isNaN() 确定值是否是非法数字。
Number() 将对象的值转换为数字。
parseFloat() 解析字符串并返回浮点数。
parseInt() 解析字符串并返回整数。
String() 将对象的值转换为字符串。
unescape() 在 1.5 版中已弃用。请使用 decodeURI() 或 decodeURIComponent() 代替。

ES5, ES6 与 ECMAScript 2015 的关系

ES6是ECMA的为JavaScript制定的第6个版本的标准，标准委员会最终决定，标准在每年的 6 月份正式发布一次，作为当年的正式版本。ECMAscript 2015 是在2015年6月份发布的ES6的第一个版本。依次类推ECMAscript 2016 是ES6的第二个版本、 ECMAscript 2017 是ES6的第三个版本

ES5 也就是  ECMAScript 2009 或叫 ECMAScript 5

ECMAScript 5 特性

这些是 2009 年发布的新特性：

  • "use strict" 指令
  • String.trim()
  • Array.isArray()
  • Array.forEach()
  • Array.map()
  • Array.filter()
  • Array.reduce()
  • Array.reduceRight()
  • Array.every()
  • Array.some()
  • Array.indexOf()
  • Array.lastIndexOf()
  • JSON.parse()
  • JSON.stringify()
  • Date.now()
  • 属性 Getter 和 Setter
  • 新的对象属性和方法

ECMAScript 6（ECMAScript 2015） 特性

  • JavaScript let
  • JavaScript const
  • 幂 (**)
  • 默认参数值
  • Array.find()
  • Array.findIndex()

ECMAScript 2016 的新特性

  • JavaScript 求幂 (**)
  • JavaScript 求幂赋值 (**=)
  • JavaScript Array.prototype.includes

ECMAScript 2017 的新特性

  • JavaScript 字符串填充 // 添加了两个 String 方法：padStart 和 padEnd，以支持在字符串的开头和结尾进行填充
  • JavaScript Object.entries
  • JavaScript Object.values
  • JavaScript 异步函数 async/await
  • JavaScript 共享内存 Worker // Web Workers API允许我们创建可用于在后台执行代码的工作线程，以便主线程可以自由地继续其执行，并可能处理UI事件，从而确保不冻结UI。

ECMAScript 2018 的新特性

  • 异步迭代 通过异步迭代，我们可以在 for/of 循环中使用 await 关键字。 
    • for await () {}
  • Promise Finally, 使用 Promise.finally 完成了 Promise 对象的完整实现 
    • let myPromise = new Promise();
myPromise.then();
myPromise.catch();
myPromise.finally();
  • 对象 Rest / Spread 
    • let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x; // 1
y; // 2
z; // { a: 3, b: 4 } // reset
      let n = {x, y, ...z}
      n // {x:1, y:2, a:3, b:4} // spread
  • 新的 RegExp 特性
    • Unicode 属性转义 (\p{...})
    • 后行断言（Lookbehind Assertions） (?<= ) 和 (?<! )
    • 命名捕获组（Named Capture Groups） 
      • onst regex = /(\d{4})-(\d{2})-(\d{2})/
        const matchers = regex.exec('2018-07-02')
        matchers[0]    // 2018-07-02
        matchers[1]    // 2018
        matchers[2]    // 07
        matchers[3]    // 02
    • s (dotAll) 标志

对象原形Prototype 原理参考

function Person(a, b) {
  this.a = a;
  this.b = b;
  this.fn = function(){
    console.log(this.a + "----" + this.b);
  }
}
var x = new Person(1, 2);
console.log(x)

【构造函数】

　　用来初始化新创建的对象的函数是构造函数。在例子中，Person(a, b)函数是构造函数

【实例对象】

　　通过构造函数的new操作创建的对象是实例对象。可以用一个构造函数，构造多个实例对象,x是实例对象

【原型对象及__proto__属性】

　　构造函数有一个__proto__属性，指向实例对象的原型对象。通过同一个构造函数实例化的多个对象具有相同的原型对象。经常使用原型对象来实现继承。原形对象也是实例对象

Person.prototype.constructor === Person  //true

x.constructor === Person //true

Person.prototype.__proto__ === Object.prototype // true

x.__proto__ === Person.prototype //true

x.__proto__.__proto__ === Object.prototype  //true

Function.prototype.constructor === Function // true

函数也是对象，函数的构造器是Function，函数的原形属性指向Function的原形对象,

Object.constructor === Function // true

Person.constructor === Function // true

Object.__proto__ === Function.prototype // true

Person.__proto__ === Function.prototype // true

Object.constructor.__proto__ === Function.prototype // true

Function.prototype.__proto__ === Object.prototype // true

Object.prototype.__proto__ === null // true

如果给Person一个prototype，那么他本身的Propotype就会多一个add方法。

Person.prototype.add = function() {
  return this.a + this.b;
}

当我们对一个对象调用其方法时，js运行环境首先看，这个对象本身有没有这个方法，如果有就直接调用，如果没就查找这个对象的_proto_属性指向的对象(也就是该对象的构造器的prototype属性)， 如果有该方法就调用，没有继续查找_proto_属性指向对象的_proto_属性指向的对象， 以此类推。这就是所谓原型链，在原型链的最末端，就是Object构造函数的prototype属性指向的那一个原型对象，这个原型上定义了一些基本的方法，如valueOf,toString等，这就像是java中的Object

对象访问器

ECMAScript 5 (2009) 引入了 Getter 和 Setter, 可以得到更简洁的语法，以自定义属性形式访问，可以确保数据质量。

// Getter
var person = {
  language : "en",
  get lang() {
    return this.language;
  }
};

var lan = person.lang; // "en"

// Setter
var person = {
  language : "",
  set lang(lang) {
    this.language = lang;
  }
};

// 使用 setter 来设置对象属性：
person.lang = "en";
var lan = person.language; // "en"
Object.defineProperty() 方法也可用于添加 Getter 和 Setter
Object.defineProperty(person , "lang", {
  get: function () {return this.language;},
  set: function (lang) { this.language = lang; }
});

Call 和 Apply

Call 和 Apply都是 Function的原形方法，所以我们定义的任何方法，都将拥有这两个方法。比如下面的fullName方法，它的构造器就是Function，所以也就拥有能够调用Call和Apply的能力。

使用 call() 方法，您可以编写能够在不同对象上使用的方法

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName:"Bill",
    lastName: "Gates",
}
var person2 = {
    firstName:"Steve",
    lastName: "Jobs",
}
person.fullName.call(person1);  // 将返回 "Bill Gates"

也可以带参数调用：
var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Bill",
  lastName: "Gates"
}
person.fullName.call(person1, "Seattle", "USA");

apply() 方法与 call() 方法非常相似

call() 方法分别接受参数。

apply() 方法接受数组形式的参数。

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);
person.fullName.call(person1, "Oslo", "Norway");
Math.max(1,2,3); // 会返回 3
Math.max.apply(null, [1,2,3]); // 也会返回 3， 因为判断大小与第一个参数无关

闭包

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// 计数器目前是 3

例子解释

变量 add 的赋值是自调用函数的返回值。

这个自调用函数只运行一次。它设置计数器为零（0），并返回函数表达式。

这样 add 成为了函数。最“精彩的”部分是它能够访问父作用域中的计数器。

这被称为 JavaScript 闭包。它使函数拥有“私有”变量成为可能。

计数器被这个匿名函数的作用域保护，并且只能使用 add 函数来修改。

闭包指的是有权访问父作用域的函数，即使在父函数关闭之后。

类

ES6引入了class，和java很像了，拥有构造方法，成员方法，类中的语法必须以“严格模式”编写。

您必须先声明类，然后才能使用它，函数可以声明和调用顺序不同（会自动声明提前）。

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}

构造方法

构造方法是一种特殊的方法：

  • 它必须有确切的名称的 “constructor”
  • 创建新对象时自动执行
  • 用于初始化对象属性
  • 如果您没有定义构造方法，JavaScript 会添加一个空的构造方法。

继承

使用extends继承父类和使用super调用父类构造方法

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}

let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();

同样支持getter和setter 和静态方法。静态方法只能类名调用。
class Car {
  constructor(brand) {
    this.carname = brand;
  }

  static hello() { return "Hello!!"; }

  get cname() {
    return this.carname;
  }
  set cname(x) {
    this.carname = x;
  }
}

let myCar = new Car("Ford");
myCar.cname= "Volvo"; // set
document.getElementById("demo").innerHTML = myCar.cname; //get

Callback、Promise，Async，Await的知识将在ES6章节细谈

DOM 对象

document对象

查找 

方法 描述
document.getElementById(id) 通过元素 id 来查找元素
document.getElementsByTagName(name) 通过标签名来查找元素
document.getElementsByClassName(name) 通过类名来查找元素
document.querySelectorAll(CSS 选择器) 通过CSS选择器来查找元素

修改

方法 描述
element.innerHTML = new html content 改变元素的 inner HTML
element.attribute = new value 改变 HTML 元素的属性值
element.setAttribute(attribute, value) 改变 HTML 元素的属性值
element.style.property = new style 改变 HTML 元素的样式

添加和删除

方法 描述
document.createElement(element) 创建 HTML 元素
document.removeChild(element) 删除 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.replaceChild(element) 替换 HTML 元素
document.write(text) 写入 HTML 输出流

事件

document.getElementById(id).onclick = function(){code} 向 onclick 事件添加事件处理程序

事件监听

addEventListener
element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（比如 "click" 或 "mousedown"）。

element.addEventListener("click", function(){ myFunction(p1, p2); });

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。useCapture默认值是 false，可不传，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

<div><p></p></div>

在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。

在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。

removeEventListener
删除已通过addEventListener() 方法附加的事件处理程序：
element.removeEventListener("mousemove", myFunction);

getElementsByTagName() 方法返回 HTMLCollection。

HTMLCollection 也许看起来像数组，但并非数组。

您能够遍历列表并通过数字引用元素（就像数组那样），有length属性。

不过，您无法对 HTMLCollection 使用数组方法，比如 valueOf()、pop()、push() 或 join()。

querySelectorAll() 方法返回 NodeList 对象，NodeList 对象与 HTMLCollection 对象几乎相同

 

Window 对象

表示浏览器中打开的窗口。

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至（HTML DOM 的）document 对象也是 window 对象属性

如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

常见的属性：

document

history

location

navigator

screen

innerheight

innerwidth


浏览器窗口（浏览器视口）不包括工具栏和滚动条的宽高，正常下面代码兼容所有浏览器。

window/document
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; 

screen
screen.width // 电脑屏幕宽度
screen.height // 电脑屏幕高度
screen.availWidth //除开电脑屏幕工具栏
screen.availHeight
location
location.href 返回当前页面的 href (URL)
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径或文件名
location.protocol 返回使用的 web 协议（http: 或 https:）
location.assign 加载新文档

history
history.back() - 等同于在浏览器点击后退按钮
history.forward() - 等同于在浏览器中点击前进按钮
nivigator
navigator.cookieEnabled - cookie 启用状态
navigator.appName
navigator.appCodeName
navigator.platform

JavaScript 弹出框

alert
confirm
prompt

Timing 事件

setTimeout(function, milliseconds)
- 在等待指定的毫秒数后执行函数。
setInterval(function, milliseconds)
- 等同于 setTimeout()，但持续重复执行该函数
注意function是函数名或者匿名函数或者箭头函数，而非函数的调用

clearTimeout / clearInterval 可以停止Timing事件：

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
myVar = setInterval(function, milliseconds);
clearInterval(myVar);
 

Ajax请求

用到XMLHttpRequest对象

var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
老板IE不支持XMLHttpRequest对象，用ActiveXObject代替
var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
} else {
  // code for IE6, IE5
   xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequest 对象方法

方法 描述
new XMLHttpRequest() 创建新的 XMLHttpRequest 对象
abort() 取消当前请求
getAllResponseHeaders() 返回头部信息
getResponseHeader() 返回特定的头部信息
open(method, url, async, user, psw)

规定请求

  • method：请求类型 GET 或 POST
  • url：文件位置
  • async：true（异步）或 false（同步）
  • user：可选的用户名称
  • psw：可选的密码
send() 将请求发送到服务器，用于 GET 请求
send(string) 将请求发送到服务器，用于 POST 请求
setRequestHeader() 向要发送的报头添加标签/值对

XMLHttpRequest 对象属性

属性 描述
onreadystatechange 定义当 readyState 属性发生变化时被调用的函数
readyState

保存 XMLHttpRequest 的状态。

  • 0：请求未初始化
  • 1：服务器连接已建立
  • 2：请求已收到
  • 3：正在处理请求
  • 4：请求已完成且响应已就绪
responseText 以字符串返回响应数据
responseXML 以 XML 数据返回响应数据
status

返回请求的状态号

  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Not Found"

如需完整列表请访问 Http 消息参考手册
statusText 返回状态文本（比如 "OK" 或 "Not Found"）

Jquery

参考手册

上一节：HTML学习总结 下一节：ES6的学习总结（上）