VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > JavaScript教程 >
  • Dreamweaver基础教程:学习JavaScript

简介#

直接写入 HTML 输出流:

document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");

注:只能在 HTML 输出中使用 document.write,如果在文档加载后使用该方法,会覆盖整个文档
对事件的反应:

<button type="button" onclick="alert('欢迎!')">点我!</button>

注:alert() 函数对于代码测试非常方便,onclick 事件只是众多事件之一。

改变 HTML 内容:

x=document.getElementById("demo");  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

注:document.getElementById("some id")这个方法是 HTML DOM 中定义的,DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。

改变 HTML 图像:
动态地改变 HTML <image> 的来源(src):

<script>
function changeImage()
{
    var s = document.getElementById('myimage');
    s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
}
</script>
<img loading="lazy" id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

改变 HTML 样式:

x=document.getElementById("demo")  //找到元素 
x.style.color="#ff0000";           //改变样式

验证输入:

if isNaN(x) { alert("不是数字"); }

用法#

标签:在 HTML 页面中插入 JavaScript,请使用 <script> 标签
外部的 JavaScript:外部文件通常包含被多个网页使用的代码,文件扩展名是 .js,请在 <script> 标签的 "src" 属性中设置该 .js 文件

可以在 HTML 文档中放入不限数量的脚本,脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中
通常的做法是把函数放入 部分中,或者放在页面底部。

输出#

JavaScript 可以通过不同的方式来输出数据:

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

语法#

JavaScript 是一个脚本语言,轻量级,但功能强大的编程语言。

字面量#

在编程语言中,一般固定值称为字面量,如 3.14。

  • 数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e),如 123e5 。
  • 字符串(String)字面量 可以使用单引号或双引号:
"John Doe"
'John Doe'
  • 表达式字面量 用于计算,如5 + 6 、5 * 10 。

  • 数组(Array)字面量 定义一个数组:

 [40, 100, 1, 5, 25, 10] 。
  • 对象(Object)字面量 定义一个对象:
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
  • 函数(Function)字面量 定义一个函数:
function myFunction(a, b) { return a * b;}

变量#

JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:

var x, length;
x = 5;
length = 6;

注:变量是一个名称,字面量是一个值。变量通常是可变的,字面量是一个恒定的值。

操作符#

JavaScript语言有多种类型的运算符:

类型 实例 描述
赋值,算术和位运算符 = + - * / 在 JS 运算符中描述
条件,比较及逻辑运算符 == != < > 在 JS 比较运算符中描述

语句#

在 HTML 中,JavaScript 语句向浏览器发出的命令,语句是用分号分隔:

x = 5 + 6;
y = x * 10;

关键字#

JavaScript 关键字用于标识要执行的操作,和其他任何编程语言一样,JavaScript 保留了一些关键字为自己所用。
注:基本上,编程通用的关键字尽量不要使用即可

注释#

不是所有的 JavaScript 语句都是"命令",注释后的内容将会被浏览器忽略
单行注释以 // 开头,多行注释以 /* 开始,以 */ 结尾。

数据类型#

JavaScript 有多种数据类型:数字,字符串,数组,对象等等:

var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

函数#

JavaScript 语句可以写在函数内,函数可以重复引用,引用一个函数 = 调用函数(执行函数内的语句):

function myFunction(a, b) {
    return a * b;                                // 返回 a 乘以 b 的结果
}

注:JavaScript 对大小写是敏感的,使用 Unicode 字符集

函数表达式#

JavaScript 函数可以通过一个表达式定义:

var x = function (a, b) {return a * b};
var z = x(4, 3);

以上函数实际上是一个 匿名函数 (函数没有名称),函数存储在变量中,不需要函数名称,通常通过变量名来调用

Function() 构造函数#

函数可以通过内置的 JavaScript 函数构造器(Function())定义:

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);

注:在 JavaScript 中,需要避免使用 new 关键字,建议使用函数表达式替换函数构造器(Function())

自调用函数#

函数表达式可以 "自调用",自调用表达式会自动调用,如果表达式后面紧跟 () ,则会自动调用:

(function () {
    var x = "Hello!!";      // 我将调用自己
})();

箭头函数#

箭头函数表达式的语法比普通函数表达式更简洁:

(参数1, 参数2, …, 参数N) => { 函数声明 }

(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; }

(单一参数) => {函数声明}
单一参数 => {函数声明}

() => {函数声明}
// ES5
var x = function(x, y) {
     return x * y;
}
 
// ES6
const x = (x, y) => x * y;

注:当使用箭头函数的时候,箭头函数会默认绑定外层 this 的值,所以在箭头函数中 this 的值和外层的 this 是一样的。

arguments 对象#

JavaScript 函数有个内置的对象 arguments 对象,argument 对象包含了函数调用的参数数组
创建一个函数用来统计所有数值的和:

x = sumAll(1, 123, 500, 115, 44, 88);
 
function sumAll() {
    var i, sum = 0;
    for (i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

使用构造函数调用函数#

如果函数调用前使用了 new 关键字, 则是调用了构造函数:

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}
 
// This    creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"

注:构造函数中 this 关键字没有任何的值,this 的值在函数调用实例化对象(new object)时创建。

作为函数方法调用函数#

在 JavaScript 中, 函数是对象,有它的属性和方法。

call() 和 apply() 是预定义的函数方法, 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20

myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20

call() 和 apply()两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。

注:通过 call() 或 apply() 方法可以设置 this 的值, 且作为已存在对象的新方法调用。

闭包#

参考函数自我调用:

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add();
add();
add();
 
// 计数器为 3

变量 add 指定了函数自我调用的返回字值,自我调用函数只执行一次,设置计数器为 0,并返回函数表达式。

add变量可以作为一个函数使用,它可以访问函数上一层作用域的计数器,这个叫作 JavaScript 闭包

它使得函数拥有私有变量变成可能,计数器受匿名函数的作用域保护,只能通过 add 方法修改。

注:闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰,形成一个不销毁的栈环境

对象#

JavaScript 对象是拥有属性和方法的数据。

对象定义#

定义和创建 JavaScript 对象:

var person = {
    //属性
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    //方法
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }

对象属性#

可以说 "JavaScript 对象是变量的容器",或者说"JavaScript 对象是键值对的容器"。
键值对通常写法为 name : value (键与值以冒号分割),键值对在 JavaScript 对象通常称为 对象属性

可以通过两种方式访问对象属性:

//方法1
person.lastName;
//方法2
person["lastName"];

对象方法#

对象的方法定义了一个函数,并作为对象的属性存储
对象方法通过添加 () 调用 (作为一个函数):

name = person.fullName();

如果把函数当成属性访问(不添加()),它将作为一个定义函数的字符串返回:

name = person.fullName;

作用域#

在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。

局部作用域#

变量在函数内声明,变量为局部作用域,只能在函数内部访问:

// 此处不能调用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

不同的函数可以使用相同名称的变量,局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁
注:函数参数只在函数内起作用,是局部变量

全局变量#

变量在函数外定义,即为全局变量,全局变量有全局作用域—— 网页中所有脚本和函数均可使用

var carName = " Volvo";
 
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
} 

如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量

// 此处可调用 carName 变量
 
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

变量生命周期#

JavaScript 变量生命周期在它声明时初始化,局部变量在函数执行完毕后销毁,全局变量在页面关闭后销毁

HTML 中的全局变量#

在 HTML 中, 全局变量是 window 对象:所有数据变量都属于 window 对象。

//此处可使用 window.carName
 
function myFunction() {
    carName = "Volvo";
}

事件#

HTML 事件是发生在 HTML 元素上的事情, JavaScript 可以触发这些事件。

HTML 事件#

HTML 事件可以是浏览器行为,也可以是用户行为,以下是 HTML 事件的实例:

  • HTML 页面完成加载
  • HTML input 字段改变时
  • HTML 按钮被点击

HTML 元素中可以添加事件属性,使用 JavaScript 代码来添加 HTML 元素:

<!-- 单引号 -->
<some-HTML-element some-event='JavaScript 代码'>

<!-- 双引号 -->
<some-HTML-element some-event="JavaScript 代码">

常见的HTML事件#

下面是一些常见的HTML事件的列表:

事件 描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

更多事件列表: JavaScript 参考手册 - HTML DOM 事件

typeof, null, 和 undefined#

typeof 操作符#

可以使用 typeof 操作符来检测变量的数据类型

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

*注:在JavaScript中,数组是一种特殊的对象类型,因此 typeof [1,2,3,4] 返回 object。 *

null#

null是一个只有一个值的特殊类型,表示一个空对象引用(用 typeof 检测 null 返回是object),可以设置为 null 来清空对象:

var person = null;           // 值为 null(空), 但类型为对象

也可以设置为 undefined 来清空对象:

var person = undefined;     // 值为 undefined, 类型为 undefined

undefined#

在 JavaScript 中, undefined 是一个没有设置值的变量,typeof 一个没有值的变量会返回 undefined

var person;                  // 值为 undefined(空), 类型是undefined

任何变量都可以通过设置值为 undefined 来清空, 类型为 undefined:

person = undefined;          // 值为 undefined, 类型是undefined

undefined 和 null 的区别#

null 和 undefined 的值相等,但类型不等:

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

类型转换#

数据类型#

在 JavaScript 中有 6 种不同的数据类型:

  • string
  • number
  • boolean
  • object
  • function
  • symbol

3 种对象类型:

  • Object
  • Date
  • Array

2 个不包含任何值的数据类型:

  • null
  • undefined

typeof 操作符#

可以使用 typeof 操作符来查看 JavaScript 变量的数据类型:

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

constructor 属性#

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

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

可以使用 constructor 属性来查看对象是否为数组 (包含字符串 "Array")、日期 (包含字符串 "Date")

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}
function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}

JavaScript 类型转换#

  • 全局方法 String():可以将数字、字母、变量、表达式、布尔值、日期转换为字符串
  • Number 方法 toString():可以将数字转换为字符串。
  • Boolean 方法 toString():可以将布尔值转换为字符串,"false"、"true"。
  • Date 方法 toString():可以将日期对象转换为字符串,返回 “Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)”。
  • 全局方法 Number():可以将字符串、布尔值、日期转换为数字,空字符串转换为 0,其他的字符串会转换为 NaN (不是个数字),布尔值对应0和1,日期返回 1404568027739(毫秒数)
  • 一元运算符 +:Operator + 可用于将变量转换为数字,如果变量不能转换,则值为 NaN (不是一个数字)。
  • **日期方法 getTime() **:可将日期转换为数字,返回 1404568027739(毫秒数)。

正则表达式#

语法#

/正则表达式主体/修饰符(可选)

其中修饰符是可选的:

var patt = /runoob/i
  • /runoob/i 是一个正则表达式。
  • runoob 是一个正则表达式主体 (用于检索)。
  • i 是一个修饰符 (搜索不区分大小写)。

使用字符串方法#

在 JavaScript 中,正则表达式通常用于两个字符串方法 : search() 和 replace()。

  • search() 方法:用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。
var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i); //不区分大小
var n = str.search("Runoob");
  • replace() 方法:用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/microsoft/i,"Runoob"); //不区分大小
var txt = str.replace("Microsoft","Runoob");

使用 RegExp 对象#

在 JavaScript 中,RegExp 对象是一个预定义了属性和方法的正则表达式对象。

  • test() 方法:用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。
var patt = /e/;
patt.test("The best things in life are free!");

//以上两行代码可以合并为一行:
/e/.test("The best things in life are free!");
  • **exec() 方法:用于检索字符串中的正则表达式的匹配,该函数返回一个存放匹配结果的数组,未找到匹配则返回值为 null。
/e/.exec("The best things in life are free!");

参考 JavaScript RegExp 参考手册。

表单#

表单验证#

判断表单字段(fname)值是否存在, 如果不存在,就弹出信息,阻止表单提交:

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

多表单使用同一验证函数可以使用以下方法:

function validateForm(form) {
    var x = form.name.value;
    if (x == null || x == "") {
        alert("输入不能为空!");
        return false;
    }
}

所有表单调用时都使用:

onsubmit="return validateForm(this)"

onsubmit="validateForm()" 能够调用 validateForm() 对表单进行验证,但是在验证不通过的情况下,并不能阻止表单提交。
onsubmit="return validateForm()" 当验证不通过时,返回 false,可以阻止表单提交。

onsubmit="return validateForm()" 相当于复写了 onsubmit 的默认方法(默认返回 true),根据 validateForm() 的结果返回 true 或 false,当验证不通过时,返回 false,onsubmit="return false;" 阻止表单提交。

this 的多种指向:#

  • 在对象方法中, this 指向调用它所在方法的对象。
  • 单独使用 this,它指向全局(Global)对象。
  • 函数使用中,this 指向函数的所属者。
  • 严格模式下函数是没有绑定到 this 上,这时候 this 是 undefined。
  • 在 HTML 事件句柄中,this 指向了接收事件的 HTML 元素
  • apply 和 call 允许切换函数执行的上下文环境(context),即 this 绑定的对象,可以将 this 引用到任何对象。

let 和 const#

let关键字#

块级作用域(Block Scope)#

使用 var 关键字声明的变量不具备块级作用域的特性,它在 {} 外依然能被访问到

{ 
    var x = 2; 
}
// 这里可以使用 x 变量

let 声明的变量只在 let 命令所在的代码块 {} 内有效,在 {} 之外不能访问

{ 
    let x = 2;
}
// 这里不能使用 x 变量

重新定义变量#

使用 var 关键字重新声明变量可能会带来问题,在块中重新声明变量也会重新声明块外的变量:

var x = 10;
// 这里输出 x 为 10
{ 
    var x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 2

let 关键字可以解决这个问题,它只在 let 命令所在的代码块 {} 内有效:

var x = 10;
// 这里输出 x 为 10
{ 
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

使用全局变量#

使用 var 关键字声明的全局作用域变量属于 window 对象:

var carName = "Volvo";
// 可以使用 window.carName 访问变量

使用 let 关键字声明的全局作用域变量不属于 window 对象:

let carName = "Volvo";
// 不能使用 window.carName 访问变量

重置变量#

  • 使用 var 关键字声明的变量在任何地方都可以修改
  • 在相同的作用域或块级作用域中,不能使用 let 关键字来重置 var 关键字声明的变量
  • 在相同的作用域或块级作用域中,不能使用 let 关键字来重置 let 关键字声明的变量
  • 在相同的作用域或块级作用域中,不能使用 var 关键字来重置 let 关键字声明的变量
  • let 关键字在不同作用域,或不同块级作用域中是可以重新声明赋值的

const 关键字#

const 用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改
const定义常量与使用let 定义的变量相似:

  • 二者都是块级作用域
  • 都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别:

  • const声明的常量必须初始化,而let声明的变量不用
  • const 定义常量的值不能通过再赋值修改,也不能再次声明。而 let 定义的变量值可以修改。

注:const 定义的变量并非不可改变,比如使用const声明对象,可以改变对象值。可以使用Object.freeze()方法来 冻结变量 ,被冻结后的对象只能进行读操作。

重置变量#

  • 使用 var 关键字声明的变量在任何地方都可以修改
  • 在相同的作用域或块级作用域中,不能使用 const 关键字来重置 var 和 let关键字声明的变量
  • 在相同的作用域或块级作用域中,不能使用 const 关键字来重置 const 关键字声明的变量
  • const 关键字在不同作用域,或不同块级作用域中是可以重新声明赋值的

JSON#

JSON 是用于存储和传输数据的格式,通常用于服务端向网页传递数据 。

语法规则#

  • 数据为 键/值 对
  • 数据由逗号分隔
  • 大括号保存对象
  • 方括号保存数组
{"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

JSON 字符串和 JavaScript 对象互转#

要实现从JSON字符串转换为JS对象,使用 JSON.parse() 方法:

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}  一个对象

要实现从JS对象转换为JSON字符串,使用 JSON.stringify() 方法:

var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'  一个JSON格式的字符串

void(0) 含义#

javascript:void(0) 中最关键的是 void 关键字, void 是 JavaScript 中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值

void(alert("Warnning!"))

href="#"与href="javascript:void(0)"的区别

  • 包含了一个位置信息,默认的锚是#top 也就是网页的上端。#

  • javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id,如果要定义一个死链接请使用 javascript:void(0)

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>

异步编程#

异步的概念#

异步(Asynchronous, async)是与同步(Synchronous, sync)相对的概念,同步按码顺序执行,异步不按照代码顺序执行,异步的执行效率更高。
通俗地解释一下异步:异步就是从主线程发射一个子线程来完成任务

什么时候用异步编程#

主线程作为一个线程,不能够同时接受多方面的请求。当一个事件没有结束时,界面将无法处理其他请求。

现在有一个按钮,如果设置它的 onclick 事件为一个死循环,那么当这个按钮按下,整个网页将失去响应。

子线程有一个局限:一旦发射了以后就会与主线程失去同步,无法确定它的结束。

为了解决这个问题,JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理

回调函数#

回调函数就是一个函数,在启动一个异步任务的时候就告诉它:等完成了这个任务之后要干什么

function print() {
    document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000);

这段程序中的 setTimeout 就是一个消耗时间较长(3 秒)的过程,它的第一个参数是个回调函数,第二个参数是毫秒数,这个函数执行之后会产生一个子线程,子线程会等待 3 秒,然后执行回调函数 "print",在命令行输出 "Time out"。

不必单独定义一个函数 print ,常常将上面的程序写成:

setTimeout(function () {
    document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000);

异步 AJAX#

除了 setTimeout 函数以外,异步回调广泛应用于 AJAX 编程,参考:https://www.runoob.com/ajax/ajax-tutorial.html

XMLHttpRequest 常常用于请求来自远程服务器上的 XML 或 JSON 数据,一个标准的 XMLHttpRequest 对象往往包含多个回调:

var xhr = new XMLHttpRequest();
 
xhr.onload = function () {
    // 输出接收到的文字数据
    document.getElementById("demo").innerHTML=xhr.responseText;
}
 
xhr.onerror = function () {
    document.getElementById("demo").innerHTML="请求出错";
}
 
// 发送异步 GET 请求
xhr.open("GET", "https://www.runoob.com/try/ajax/ajax_info.txt", true);
xhr.send();

XMLHttpRequest 的 onload 和 onerror 属性都是函数,分别在它请求成功和请求失败时被调用

如果使用完整的 jQuery 库,也可以更加优雅的使用异步 AJAX:

$.get("https://www.runoob.com/try/ajax/demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
});

Promise#

Promise 是一个 ECMAScript 6 提供的类,目的是更加优雅地书写复杂的异步任务。由于 Promise 是 ES6 新增加的,一些旧的浏览器并不支持。

构造 Promise#

现在新建一个 Promise 对象:

new Promise(function (resolve, reject) {
    // 要做的事情...
});

用 Promise 来实现三次输出字符串,第一次间隔 1 秒,第二次间隔 4 秒,第三次间隔 3 秒:

new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log("First");
        resolve();
    }, 1000);
}).then(function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Second");
            resolve();
        }, 4000);
    });
}).then(function () {
    setTimeout(function () {
        console.log("Third");
    }, 3000);
});

Promise 的使用#

下面通过剖析这段 Promise "计时器" 代码来讲述 Promise 的使用:

Promise 构造函数只有一个参数,是一个函数,这个函数在构造之后会直接被异步运行——称之为起始函数

**起始函数包含两个参数 resolve 和 reject*8,当 Promise 被构造时起始函数会被异步执行:

new Promise(function (resolve, reject) {
    console.log("Run");
});

resolve 和 reject 都是函数,其中调用 resolve 代表一切正常reject 是出现异常时所调用的

new Promise(function (resolve, reject) {
    var a = 0;
    var b = 1;
    if (b == 0) reject("Divide zero");
    else resolve(a / b);
}).then(function (value) {
    console.log("a / b = " + value);
}).catch(function (err) {
    console.log(err);
}).finally(function () {
    console.log("End");
});

Promise 类有 .then() .catch() 和 .finally() 三个方法,这三个方法的参数都是一个函数:

  • .then() 可以将参数中的函数添加到当前 Promise 的正常执行序列;
  • .catch() 则是设定 Promise 的异常处理序列;
  • .finally() 是在 Promise 执行的最后一定会执行的序列。

.then() 传入的函数会按顺序依次执行,有任何异常都会直接跳到 catch 序列:

new Promise(function (resolve, reject) {
    console.log(1111);
    resolve(2222);
}).then(function (value) {
    console.log(value);
    return 3333;
}).then(function (value) {
    console.log(value);
    throw "An error";
}).catch(function (err) {
    console.log(err);
});

执行结果:

1111
2222
3333
An error
  • resolve() 中可以放置一个参数用于向下一个 then 传递一个值,then 中的函数也可以返回一个值传递给 then。如果 then 中返回的是一个 Promise 对象,那么下一个 then 将相当于对这个返回的 Promise 进行操作
  • reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常
  • **resolve 和 reject 的作用域只有起始函数,不包括 then 以及其他序列。
  • **resolve 和 reject 并不能够使起始函数停止运行,别忘了 return。

Promise 函数#

可以将上面程序的核心部分写成一个 Promise 函数:

function print(delay, message) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log(message);
            resolve();
        }, delay);
    });
}

然后实现程序功能:

print(1000, "First").then(function () {
    return print(4000, "Second");
}).then(function () {
    print(3000, "Third");
});

异步函数#

异步函数(async function)是 ECMAScript 2017 (ECMA-262) 标准的规范,可以上面实现程序功能的代码变得更好看:

async function asyncFunc() {
    await print(1000, "First");
    await print(4000, "Second");
    await print(3000, "Third");
}
asyncFunc();

异步函数 async function 中可以使用 await 指令,await 指令后必须跟着一个 Promise,异步函数会在这个 Promise 运行中暂停,直到其运行结束再继续运行。

异步函数实际上原理与 Promise 原生 API 的机制是一模一样的,处理异常的机制将用 try-catch 块实现:

async function asyncFunc() {
    try {
        await new Promise(function (resolve, reject) {
            throw "Some error"; // 或者 reject("Some error")
        });
    } catch (err) {
        console.log(err);
        // 会输出 Some error
    }
}
asyncFunc();

如果 Promise 有一个正常的返回值,await 语句也会返回它:

async function asyncFunc() {
    let value = await new Promise(
        function (resolve, reject) {
            resolve("Return value");
        }
    );
    console.log(value);
}
asyncFunc();

输出:

Return value
 
来源:https://www.cnblogs.com/timefiles/p/JavaScriptNote.html


相关教程