JS学习笔记

前言

本学习笔记系作者在学习JS时，摘抄自W3SCHOOL

1.运算符

取幂运算符（ES7）：
var x = 5;
var z = x ** 2;	//结果为25，等同于Math.pow(5,2)

2. 数据类型

2.1 数据类型

基本数据类型：number,string,boolean,undefined,null
引用数据类型：
object,函数,正则表达式
注意：js数组属于对象，只能使用Array.isArray(判断对象)或instanceof来判断是不是数组

堆(heap)：动态分配的内存（存放引用类型）
栈(stack)：自动分配的内存空间，由系统自动释放（存放基本数据类型）

栈中存放指向堆的变量指针，通过引用地址可以查找到保存在堆内存中的对象

2.2 科学计数法

科学计数法：
var x = 11e3;	//11000
var y = 11e-5;	//0.00011

2.3 字符串与数字混合运算

当进行字符串和数字的加运算时，
若多个数字在前面，则先计算数字的值，再转化成字符串与后面字符串相连；
反之，则字符串直接与数字相连。
例：
var x = 911 + 7 + "hello";	//918hello
var x = "hello" + 911 + 7;	//hello9117

2.4 typeof

typeof返回变量或表达式的类型
typeof ""	//返回"string"
typeof (1 + 2)	//返回"number"

2.5 undefined和null

变量可通过undefined进行清空，其类型也变为undefined
var person;	//值为undefined，类型为undefined
person = undefined;	//值为undefined，类型为undefined

null的数据类型是对象，可通过设置值为null来清空对象
var person = {};
person = null;	//值为null，类型为对象

2.6 NaN

NaN(Not a Number)
isNaN()可判断一个值是不是number类型
typeof NaN 将返回number

2.7 Infinity

Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值
除以 0（零）也会生成 Infinity
typeof Infinity 返回number

2.8 constructor

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] }"

可以通过"".constructor.toString().indexOf("")返回的值来判断数据类型

3. 函数

传递参数时若有函数名+()，代表立即执行函数内容
若无()，则只是传递函数引用，在需要的时候再调用执行
setInterval()传递的是函数引用

()运算符调用函数，
访问没有()的函数将返回函数定义

function hello(a,b) {
	return a + b;
}

document.getElementById(‘demo‘).innerHTML = hello(1,2);	//返回3

document.getElementById(‘demo‘).innerHTML = hello;	//返回function hello(a,b){return a+b;}

4. 转义符

转义符\可以用来解决字符串中特殊字符被误解的问题
例：
var str = "小明说：\"hello world!\"\n";

为了增加代码可读性，一般会避免超过80个字符一行
在字符串中会使用\换行
例：
document.getElementById("demo").innerHTML = "Hello world";

5. 字符串方法

5.1 检索字符串

indexOf()方法返回字符串中指定文本首次出现的索引（位置）
若找不到，则返回-1：

var str = "The full name of China is the People‘s Republic of China.";
var pos = str.indexOf("China",10);	//10为检索起始位置，返回17

lastIndexOf()从尾到头进行检索
search() 方法搜索特定值的字符串，并返回匹配的位置

indexOf()和search()的区别：
1. search() 方法无法设置第二个开始位置参数。
2. indexOf() 方法无法设置更强大的搜索值（正则表达式）。

5.2 提取字符串

slice(start,end)	//负数时从结尾开始计数
substring(start,end)	//与slice类似，无法接受负数
substr(start,length)

当slice(n)只有一个参数时，则去掉字符串前面的n个字符，取剩下的

5.3 替换字符串

replace() 方法不会改变调用它的字符串。它返回的是新字符串。
默认地，replace() 只替换首个匹配：

str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/i, "W3School");	//加上/i对大小写不敏感，结果为Please visit W3School and Microsoft!

5.4 转换大小写

toUpperCase()
toLowerCase()

5.5 连接字符串

concat()可连接两个或多个字符串

5.6 删除两端空白符

trim()

5.7 提取字符串

charAt(position)	//只返回对应下标的字符
charCodeAt(position)	//返回字符的unicode编码

5.8 字符串转换成数组

var txt = "a,b,c,d,e";   // 字符串
txt.split(",");          // 用逗号分隔
txt.split(" ");          // 用空格分隔
txt.split("|");          // 用竖线分隔

5.9 字符串返回数值

toString(n)	//n为转换成多少进制的数值，默认为10

toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字。
参数定义小数点后的字符数：
var x = 9.656;
x.toExponential(2);     // 返回 9.66e+0
x.toExponential(4);     // 返回 9.6560e+0
x.toExponential(6);     // 返回 9.656000e+0

toFixed() 返回字符串值，它包含了指定位数小数的数字：
var x = 9.656;
x.toFixed(0);           // 返回 10
x.toFixed(2);           // 返回 9.66
x.toFixed(4);           // 返回 9.6560
x.toFixed(6);           // 返回 9.656000

toPrecision() 返回字符串值，它包含了指定长度的数字：
var x = 9.656;
x.toPrecision();        // 返回 9.656
x.toPrecision(2);       // 返回 9.7
x.toPrecision(4);       // 返回 9.656
x.toPrecision(6);       // 返回 9.65600

valueOf() 以数值返回数值
使用 valueOf() 方法可将 Number 对象转换为原始值

这三种 JavaScript 方法可用于将变量转换为数字：
Number() 方法
parseInt(num,n) 方法	//n表示以几进制来进行转换
parseFloat() 方法

Number(new Date("2019-04-15"));    // 返回 1506729600000

parseInt("10");         // 返回 10
parseInt("10.33");      // 返回 10
parseInt("10 20 30");   // 返回 10
parseInt("10 years");   // 返回 10
parseInt("years 10");   // 返回 NaN

6. 数组

6.1 把数组转换成字符串

toString() 把数组转换为数组值（逗号分隔）的字符串

join() 方法也可将所有数组元素结合为一个字符串
它的行为类似 toString()，但是您还可以规定分隔符

6.2 添加和删除元素

pop()方法从数组中删除最后一个元素并返回被删除的元素

push()在数组结尾处添加一个新的元素并返回新数组的长度

shift()删除数组的首个元素并返回被删除的元素

unshift()在数组首部添加新的元素并返回新数组的长度

delete可以将数组对应下标的元素设置为undefined

splice()可用于向数组指定位置添加或删除新元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");	//Banana,Orange,Lemon,Kiwi,Apple,Mango
第一个参数（2）定义了开始拼接的位置（添加或删除）。
第二个参数（0）定义应删除多少元素。
其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

6.3 裁切数组

slice(start,end) 方法用数组的指定位置前切开，得到新数组。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,4); 	//citrus:["Orange", "Lemon", "Apple", "Mango"]

6.4 排序

sort() 方法以第一个字符顺序对数组进行排序
若要对数字数组进行排序，可以通过比值函数：
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b}); 

以随机顺序排序数组：
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()}); 

reverse() 方法反转数组中的元素

使用 Math.max.apply 来查找数组中的最高值：
function myArrayMax(arr) {
    return Math.max.apply(null, arr);	//第一个参数是调用方法的对象，不需要就写null
}

Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)

6.5 数组迭代

forEach() 方法为每个数组元素调用一次函数（回调函数）
三个参数：
1. 项目值
2. 项目索引
3. 数组本身

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}

map() 方法通过对每个数组元素执行函数来创建新数组，用法与forEach()一样

filter() 方法创建一个包含通过过滤的数组元素的新数组，用法与forEach()一样

reduce() 方法可以计算一个数组元素的总和
四个参数:
1. 总数（初始值/先前返回的值）
2. 项目值
3. 项目索引
4. 数组本身

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

every() 方法检查所有数组值是否通过测试，将返回一个boolean，用法与forEach()一样

some() 方法检查某些数组值是否通过了测试，将返回一个boolean，用法与forEach()一样

find() 方法返回通过测试函数的第一个数组元素的值，用法与forEach()一样

findIndex() 方法返回通过测试函数的第一个数组元素的索引

7. Math

7.1 Math方法

Math.round(x) 的返回值是 x 四舍五入为最接近的整数

Math.pow(x, y) 的返回值是 x 的 y 次幂

Math.sqrt(x) 返回 x 的平方根

Math.abs(x) 返回 x 的绝对（正）值

Math.ceil(x) 的返回值是 x 的向上取整

Math.floor(x) 的返回值是 x 的向下取整

Math.sin(x) 返回角 x（以弧度计）的正弦（介于 -1 与 1 之间的值）

Math.cos(x) 返回角 x（以弧度计）的余弦（介于 -1 与 1 之间的值）

Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值

Math.random() 返回介于 0（包括） 与 1（不包括） 之间的随机数

7.2 Math属性（常量）

Math.E          // 返回欧拉指数（Euler‘s number）
Math.PI         // 返回圆周率（PI）
Math.SQRT2      // 返回 2 的平方根
Math.SQRT1_2    // 返回 1/2 的平方根
Math.LN2        // 返回 2 的自然对数
Math.LN10       // 返回 10 的自然对数
Math.LOG2E      // 返回以 2 为底的 e 的对数（约等于 1.414）
Math.LOG10E     // 返回以 10 为底的 e 的对数（约等于0.434）

8. 位运算

十进制转换成二进制：
function dec2bin(dec){
    return (dec >>> 0).toString(2);	//移位来补齐32位
}

二进制转换成十进制：
function bin2dec(bin){
    return parseInt(bin, 2).toString(10);
}

9. 正则表达式

9.1 修饰符

9.2 正则表达式模式

括号

元字符

量词

9.3 RegExp对象

test() 是一个正则表达式方法
它通过模式来搜索字符串，然后根据结果返回 true 或 false

var patt = /e/;
patt.test("The best things in life are free!");

exec() 方法是一个正则表达式方法
它通过指定的模式（pattern）搜索字符串，并返回已找到的文本

10. JS错误

try 语句使您能够测试代码块中的错误。
catch 语句允许您处理错误。
throw 语句允许您创建自定义错误。
finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。

try {
     供测试的代码块
}
 catch(err) {
     处理错误的代码块
} 
finally {
     无论 try / catch 结果如何都执行的代码块
}

11. 严格模式

通过在脚本或函数的开头添加 "use strict"; 来声明严格模式。
在脚本开头进行声明，拥有全局作用域（脚本中的所有代码均以严格模式来执行）：

"use strict";
x = 3.14;       // 这会引发错误，因为 x 尚未声明

12. this

JavaScript this 关键词指的是它所属的对象。

它拥有不同的值，具体取决于它的使用位置：

在方法中，this 指的是所有者对象。
单独的情况下，this 指的是全局对象。
在函数中，ES6的this指的是函数定义时拥有该函数的对象，之前的版本则是指函数调用时调用该函数的对象。
在函数中，严格模式下，this 是 undefined。
在事件中，this 指的是接收事件的元素。
像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。

显示函数绑定：
call() 和 apply() 方法是预定义的 JavaScript 方法。
它们都可以用于将另一个对象作为参数调用对象方法。

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

13. 对象

13.1 属性getter和setter

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
};

// 使用 setter 设置对象属性：
person.lang = "en";

// 使用 getter 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.lang;

<!--对比JS函数和getter-->

JS函数：通过函数形式访问

var person = {
  firstName: "Bill",
  lastName : "Gates",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// 使用方法来显示来自对象的数据：
document.getElementById("demo").innerHTML = person.fullName();

getter：通过属性形式访问

var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};

// 使用 getter 来显示来自对象的数据：
document.getElementById("demo").innerHTML = person.fullName;

13.2 新的对象属性

object.defineProperty()是ES5中的新对象方法
它允许您定义对象属性和/或更改属性的值和/或元数据。

// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
};

// 更改属性：
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});

// 枚举属性
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

// 定义 setter和getter
Object.defineProperty(obj, "reset", {
  get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
  get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
  get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
  set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
  set : function (value) {this.counter -= value;}
});

<!--ES5 新的对象方法-->

// 添加或更改对象属性
Object.defineProperty(object, property, descriptor)

// 添加或更改多个对象属性
Object.defineProperties(object, descriptors)

// 访问属性
Object.getOwnPropertyDescriptor(object, property)

// 将所有属性作为数组返回
Object.getOwnPropertyNames(object)

// 将可枚举属性作为数组返回
Object.keys(object)

// 访问原型
Object.getPrototypeOf(object)

// 防止向对象添加属性
Object.preventExtensions(object)

// 如果可以将属性添加到对象，则返回 true
Object.isExtensible(object)

// 防止更改对象属性（而不是值）
Object.seal(object)

// 如果对象被密封，则返回 true
Object.isSealed(object)

// 防止对对象进行任何更改
Object.freeze(object)

// 如果对象被冻结，则返回 true
Object.isFrozen(object)

13.3 对象的构造方法

//构造器函数
function Person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
	this.fangfa = function() {return this.firstName + " " + this.lastName;};
}

//new关键词调用构造器函数可以创建同类型的对象
var myFather = new Person("Bill", "Gates", 62, "blue");
var myMother = new Person("Steve", "Jobs", 56, "green");

//为对象添加新的属性
myFather.nation = "China";

//为对象添加新方法
myFather.name = function(){
	return this.FirstName;
}

13.4 原型继承

13.4.1 概念

所有 JavaScript 对象都从原型继承属性和方法。

日期对象继承自 Date.prototype。数组对象继承自 Array.prototype。Person 对象继承自 Person.prototype。

Object.prototype 位于原型继承链的顶端：

日期对象、数组对象和 Person 对象都继承自 Object.prototype。

13.4.2 使用prototype属性

JavaScript允许使用prototype为构造器添加新的方法和属性

//添加属性

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";

//添加方法

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};

14. 函数

14.1 构建函数

函数声明：
function functionName(parameters){
	//代码
}

函数表达式：
var x = function (a, b) {	//匿名函数，存放在变量中
	return a * b;
};

Function构造器（尽量避免）：
var myFunction = new Function("a", "b", "return 0 * b");

14.2 自调用函数

函数周围添加括号()，表示他是一个函数表达式
表达式后面跟着()，函数表达式会自动执行

(function(){
	var x = "hello";
})();

14.3 函数是对象

arguments.length 会返回函数被调用时收到的参数数目
函数参数（parameter）指的是在函数定义中列出的名称
函数参数（argument）指的是传递到函数或由函数接收到的真实值，数组形式

function myFunction(a, b) {
    return arguments.length;
}

14.4 call()

方法重用：
使用 call() 方法，您可以编写能够在不同对象上使用的方法
它可以用来调用所有者对象作为参数的方法
总结：使用自己的参数，调用别人的方法，调用后this指向调用者

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"

call() 和 apply() 之间的区别
不同之处是：

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

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

如果要使用数组而不是参数列表，则 apply() 方法非常方便。

14.5 闭包

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

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

// 计数器目前是 3 

变量 add 的赋值是自调用函数的返回值。
这个自调用函数只运行一次。它设置计数器为零（0），并返回函数表达式。
这样 add 成为了函数。最“精彩的”部分是它能够访问父作用域中的计数器。
这被称为 JavaScript 闭包。它使函数拥有“私有”变量成为可能。
计数器被这个匿名函数的作用域保护，并且只能使用 add 函数来修改。
闭包指的是有权访问父作用域的函数，即使在父函数关闭之后。

15. HTML DOM

document.getElementById(id)
document.getElementsByTagName(name)
document.getElementsByClassName(name)

element.innerHTML = new content
element.attribute = new value
element.setAttribute(attribute,value)
element.style.property = new style

document.createElement(element)
document.removeChild(element)
document.appendChild(element)	//添加HTML元素
document.replaceChild(element)
document.write(text)	//注意：该方法会覆盖文档内容

document.anchor	//返回拥有name属性的所有<a>元素
document.body	//返回<body>元素
document.documentElement	//返回<html>元素
document.forms["id"]	//返回所有<form>元素

querySelectorAll()	//查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素

16. 动画

16.1 创建容器

应该通过 style = "position: relative" 创建容器元素。
应该通过 style = "position: absolute" 创建动画元素。

16.2 动画实例

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p><button onclick="myMove()">单击我</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

<script>
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);	//调用函数不用加()，因为不是立即执行，只是把函数的引用传递给计时器就可以了
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + "px"; 
      elem.style.left = pos + "px"; 
    }
  }
}
</script>

</body>
</html>

17. 事件

17.1 冒泡事件和捕获事件

冒泡事件：
冒泡事件只由内到外，比如有下面的DOM：
<div>
<p></p>
<div>
当<p>被点击时，会先触发<p>的点击事件，再出发<div>的点击事件

捕获事件：
捕获事件由外到内，由以上例子，
当<p>被点击时，会先触发<div>的点击事件，再出发<p>的点击事件

17.2 监听事件

可以向相同元素添加多个相同/不同类型事件，并且不会覆盖

element.addEventListener("mouseover", myFunction,useCapture);	//useCapture为boolean值，默认为false，为冒泡事件
element.addEventListener("click", myFirstFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

移除监听事件：
element.removeEventListener("mousemove", myFunction);

旧版本浏览器兼容：
element.attachEvent(event, function);
element.detachEvent(event, function);

18. DOM节点

18.1 节点属性

可以使用一下节点属性在节点之间导航：
parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling

nodeName 规定节点的名称，是只读的
元素节点的 nodeName 等同于标签名
属性节点的 nodeName 是属性名称
文本节点的 nodeName 总是 #text
文档节点的 nodeName 总是 #document

nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined
文本节点的 nodeValue 是文本文本
属性节点的 nodeValue 是属性值

nodeType 属性返回节点的类型

18.2 添加节点

在para最后面追加node:
para.appendChild(node);

在para里面的child前插入node:
para.insertBefore(node,child);	//新节点，已存在节点

18.3 删除节点

para.remove(node);	//需要找到父元素para和子元素node

node.parentNode.removeChild(node);	//使用parentNode关键字即可

18.4 替换节点

para.replaceChild(node,child);	//node为要替换的新节点，child为被替换的

19. window

//浏览器窗口（视口）的高度
window.innerHeight
document.documentElement.clientHeight

//访问者屏幕高度
window.screen.height

//访问者可用的屏幕高度（除去工具栏等）
window.screen.availHeight

//屏幕色彩深度
window.screen.colorDepth

//屏幕像素深度，与色彩深度相等
window.screen.pixelDepth

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口

//获取URL地址
window.location.href 返回当前页面的 href (URL)
window.location.hostname 返回 web 主机的域名
window.location.pathname 返回当前页面的路径或文件名
window.location.protocol 返回使用的 web 协议（http: 或 https:）
window.location.assign 加载新文档

//浏览器历史
window.history 对象可省略window
history.back() - 等同于在浏览器点击后退按钮
history.forward() - 等同于在浏览器中点击前进按钮

navigator.appName	//Nascape
navigator.appCodeName	//Moziller
navigator.platform	//Win32

navigator.cookieEnabled	//返回boolean值，判断是否开启cookie

window.alert();	//警告框
window.confirm();	//确认框，返回boolean值

//提示框prompt()弹出可输入的提示框，若点击确认则返回输入内容，否则返回null

var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
    document.getElementById("demo").innerHTML = "你好 " + person + "！今天过的怎么样？";
}

关于screen.height和screen.availHeight以及window.innerHeight，摘自FOR=10000的博客

20. Cookie

document.cookie = "username=value;expires=expireTime;path=/";	//读取、添加、删除cookie

21. AJAX

Ajax 的核心是 XMLHttpRequest 对象

//创建XHR对象
xhttp = new XMLHttpRequest();
xhttp = new ActiveXObject("Microsoft.XMLHTTP");	//兼容处理

//设置收到应答时执行的函数
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();

GET 还是 POST？
GET 比 POST 更简单更快，可用于大多数情况下。

不过，请在以下情况始终使用 POST：

缓存文件不是选项（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 无大小限制）
发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

如需像 HTML 表单那样 POST 数据，请通过 setRequestHeader() 添加一个 HTTP 头部。请在 send() 方法中规定您需要发送的数据：

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");	//header,value
xhttp.send("fname=Bill&lname=Gates");

XMLHttpRequest 对象方法

XMLHttpRequest 对象属性

JS学习笔记

原文：https://www.cnblogs.com/windyz99/p/12757932.html