目录
2.4.1、JSON字符串转JS对象：JSON.parse()
2.4.2、JS对象转JSON字符串：JSON.stringify()
3.2、AJAX的XMLHttpRequest（XHR）对象
1、Exception
1.1、异常概述
在ES3之前JavaScript代码执行的过程中，一旦出现错误，整个JavaScript代码都会停止执行，这样就显的代码非常的不健壮。
在Java或C#等一些高级语言中，都提供了异常处理机制，可以处理出现的异常，而不会停止整个应用程序。
从ES3开始，JavaScript也提供了类似的异常处理机制，从而让JavaScript代码变的更健壮，即使执行的过程中出现了异常，也可以让程序具有了一部分的异常恢复能力。
当错误发生时，JavaScript 提供了错误信息的内置 error 对象。
error 对象提供两个有用的属性：name 和 message 。
1.1.1、Error 对象属性
| 属性 | 描述 |
|---|---|
| name | 设置或返回错误名 |
| message | 设置或返回错误消息（一条字符串） |
1.1.2、Error Name Values
error 的 name 属性可返回六个不同的值：
| 错误名 | 描述 |
|---|---|
| EvalError | 已在 eval() 函数中发生的错误 |
| RangeError | 已发生超出数字范围的错误 |
| ReferenceError | 已发生非法引用 |
| SyntaxError | 已发生语法错误 |
| TypeError | 已发生类型错误 |
| URIError | 在 encodeURI() 中已发生的错误 |
1.2、try-catch异常捕捉
ES3开始引入了 try-catch 语句，是 JavaScript 中处理异常的标准方式。
语法格式：
try { //异常的抛出
// 可能发生异常的代码
throw exception //异常可以是 JavaScript 字符串、数字、逻辑值或对象。
} catch (error) {//异常的捕获与处理
// 发生错误执行的代码
} finally {//结束处理
// 无论是否出错都会执行的代码
}
- try 语句允许我们定义在执行时进行错误测试的代码块。
- catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
- JavaScript 语句 try 和 catch 是成对出现的。
- finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。
- throw 语句允许我们创建自定义错误。正确的技术术语是：创建或抛出异常（exception）。
案例演示：
try {
console.log(a);
console.log("a未定义肯定报错，你看不见我");
} catch (error) {
// 发生错误执行的代码
console.log(error);
} finally {
// 无论是否出错都会执行的代码
console.log("finally 执行了 ...")
}
在JavaScript中，如果添加了 finally 语句，则 catch 语句可以省略。但是如果没有 catch 语句，则一旦发生错误就无法捕获这个错误，所以在执行完 finally 中的语句后，程序就会立即停止了。所以，在实际使用中，最好一直带着 catch 语句。如果你写了 catch 语句，则finally 语句也是可以省略的。
1.3、异常演示
1.3.1、EvalError函数错误
EvalError 指示 eval() 函数中的错误。更新版本的 JavaScript 不会抛出任何 EvalError，请使用 SyntaxError 代替。
案例演示：
try {
eval("alert('Hello)"); // 缺少 ' 会产生错误
} catch (error) {
console.log(error)
}
1.3.2、RangeError范围错误
RangeError 会在您使用了合法值的范围之外的数字时抛出。
案例演示：您不能将数字的有效位数设置为 500。
var num = 1;
try {
num.toPrecision(500); // 数无法拥有 500 个有效数
} catch (error) {
console.log(error)
}
1.3.3、ReferenceError 引用错误
假如您使用（引用）了尚未声明的变量，则 ReferenceError 会被抛出：
案例演示：
var x;
try {
x = y + 1; // y 无法被引用（使用）
} catch (error) {
console.log(error)
}
1.3.4、SyntaxError 语法错误
假如您计算带语法错误的代码，会 SyntaxError 被抛出：
案例演示：
try {
eval("alert('Hello)"); // 缺少 ' 会产生错误
} catch (error) {
console.log(error)
}
1.3.5、TypeError 类型错误
假如您使用的值不在期望值的范围之内，则 TypeError 被抛出：
案例演示：
var num = 1;
try {
num.toUpperCase(); // 您无法将数字转换为大写
} catch (error) {
console.log(error)
}
1.3.6、 URIError编码错误
假如您在 URI 函数中使用非法字符，则 URIError 被抛出：
案例演示：
try {
decodeURI("%%%"); // 您无法对这些百分号进行 URI 编码
} catch (error) {
console.log(error)
}
1.4、异常抛出throw
在大部分的代码执行过程中，都是出现错误的时候，由浏览器(javascript引擎)抛出异常，然后程序或者停止执行或被try…catch 捕获。
然而有时候我们在检测到一些不合理的情况发生的时候也可以主动抛出错误，请使用 throw 关键字抛出来主动抛出异常。
注意事项：
- thow后面就是我们要抛出的异常对象，在以前的时候都是出现错误的时候浏览器抛出异常对象，只是现在是我们自己主动抛出的异常对象。
- 只要有异常对象抛出，不管是浏览器抛出的，还是代码主动抛出，都会让程序停止执行。如果想让程序继续执行，则有也可以用try…catch来捕获。
- 每一个错误类型都可以传入一个参数，表示实际的错误信息。
- 我们可以在适当的时候抛出任何我们想抛出的异常类型。
throw new SyntaxError("语法错误...")
1.4.1、主动抛出内置异常
/*该函数接收一个数字，返回它的平方。*/
function foo(num) {
if (typeof num == "number") {
return num * num;
} else {
throw new TypeError("您输入的是一个非法数字！")
}
}
console.log(foo(4));
console.log(foo("abc"));
1.4.2、主动抛出自定义异常
我们不仅仅可以抛出js内置的错误类型的对象，也可以自定义错误类型，然后抛出自定义错误类型的对象。
如果要自定义错误类型，只需要继承任何一个自定义错误类型都可以，一般直接继承Error即可。
/*自定义错误*/
function MyError(message) {
this.message = "注意：这是自定义的错误"
this.name = "自定义错误";
}
MyError.prototype = new Error();
try {
throw new MyError("注意：这是自定义错误类型")
} catch (error) {
console.log(error.message)
}
2、JSON
- JSON 英文全称 JavaScript Object Notation(JavaScript 对象表示法)
- JSON 是一种轻量级的数据交换格式，是存储和交换文本信息的语法，类似 XML
- JSON是独立的语言
- JSON 具有自我描述性，更易理解
- C、Python、C++、Java、PHP、Go等编程语言都支持 JSON
当数据在浏览器与服务器之间进行交换时，这些数据只能是文本，JSON 属于文本并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。
2.1 JSON与XML
2.1.1、JSON与XML的异同
| 同 | 异 |
|
|
最大的不同是：XML 需要使用 XML 解析器来解析，JSON 可以使用标准的 JavaScript 函数来解析。
- JSON.parse(): 将一个 JSON 字符串转换为 JavaScript 对象。
- JSON.stringify(): 于将 JavaScript 值转换为 JSON 字符串。
2.1.2、为什么使用 JSON？
对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：
| XML | JSON |
|
|
- JavaScript JSON: JavaScript JSON | 菜鸟教程
- XML DOM 教程: XML DOM 教程 | 菜鸟教程
2.2、JSON语法规则
2.2.1、语法格式
- 数据在名称/值对中
- 数据由逗号 , 分隔
- 使用斜杆来转义 \ 字符
- 大括号 {} 保存对象
- 中括号 [] 保存数组，数组可以包含多个对象
2.2.2、两种结构：对象、数组
1、对象
大括号 {} 保存的对象是一个无序的名称/值对集合。一个对象以左括号 { 开始， 右括号 } 结束。每个"键"后跟一个冒号 :，名称/值对使用逗号 , 分隔。
2、数组
中括号 [] 保存的数组是值（value）的有序集合。一个数组以左中括号 [ 开始， 右中括号 ] 结束，值之间使用逗号 , 分隔。
值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array），它们是可以嵌套。
2.2.3、JSON数据类型
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在中括号中）
- 对象（在大括号中）
- null
JSON 的值不可以是以下数据类型之一：
- 函数
- 日期
- undefined
因为 JSON 语法由 JavaScript 对象标记法衍生而来，所以很少需要其它额外的软件来处理 JavaScript 中的 JSON。
通过 JavaScript，您能够创建对象并向其分配数据，就像这样：
var person = {"name": "zhangsan", "age": 62, "city": "BeiJing"};
console.log(person);
2.3、JSON数据类型
- 字符串（在 JSON 中，字符串值必须由双引号编写）
- 数字
- 对象（JSON 对象）
- 数组
- 布尔
- null
2.3.1、JSON 字符串
JSON 中的字符串必须用双引号包围。
{"name": "John"}
2.3.2、JSON 数字
JSON 中的数字必须是整数或浮点数。
{"age": 30}
2.3.3、JSON 对象
JSON 对象使用在大括号 {...} 中书写。
对象可以包含多个 key/value（键/值）对。
key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
key 和 value 中使用冒号 : 分割。
每个 key/value 对使用逗号 , 分割
- 访问对象值
你可以使用点号 . 或中括号（[]）来访问对象的值：var myObj, x,y; myObj = { "name":"runoob", "alexa":10000, "site":null }; x = myObj.name; y = myObj["name"];
- 循环对象
你可以使用 for-in 来循环对象的属性：
尝试一下 »var myObj = { "name":"runoob", "alexa":10000, "site":null }; for (x in myObj) { document.getElementById("demo").innerHTML += x + "<br>"; } - 删除对象属性
使用 delete 关键字来删除 JSON 对象的属性：delete myObj.sites.site1; delete myObj.sites["site1"]删除数值的元素，数组的大小不变，delete 运算符并不是彻底删除元素，而是删除它的值，但仍会保留空间。尝试一下 »
运算符 delete 只是将该值置为 undefined，而不会影响数组长度，即将其变为稀疏数组（《JS权威指南》7.5节）。
更多内容可参考：JS 中彻底删除 JSON 对象组成的数组中的元素
2.3.4、JSON 数组
JSON 数组在中括号中书写。
中括号 [] 保存的数组是值（value）的有序集合。一个数组以左中括号 [ 开始， 右中括号 ] 结束，值之间使用逗号 , 分隔。
- 访问对象值
{ "name":"网站", "num":3, "sites":[ "Google", "Runoob", "Taobao" ] } x = myObj.sites[0];
- 循环数组
使用 for-in 或 for 来访问数组for (i in myObj.sites) { x += myObj.sites[i] + "<br>"; } for (i = 0; i < myObj.sites.length; i++) { x += myObj.sites[i] + "<br>"; }
2.3.5、JSON 布尔
JSON 中的值可以是 true/false。
{"sale": true}
2.3.6、JSON null
JSON 中的值可以是 null。
{"middlename": null}
2.4、相关函数
| 函数 | 描述 |
|---|---|
| JSON.parse() | 用于将一个 JSON 字符串转换为 JavaScript 对象。 |
| JSON.stringify() | 用于将 JavaScript 值转换为 JSON 字符串。 |
更多 JSON 信息，你可以阅读我们的 JSON 教程。
https://c.runoob.com/front-end/53/2.4.1、JSON字符串转JS对象：JSON.parse()
JSON.parse()：可以将以JSON字符串转换为JS对象，它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回
案例演示：
var jsonStr = '{"name":"孙悟空","age":18,"gender":"男"}';
var obj = JSON.parse(jsonStr);
console.log(obj);
注意 ：JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错
2.4.2、JS对象转JSON字符串：JSON.stringify()
JSON.stringify()：可以将一个JS对象转换为JSON字符串，需要一个js对象作为参数，会返回一个JSON字符串
案例演示：
var obj = {name: "猪八戒", age: 28, gender: "男"};
var jsonStr = JSON.stringify(obj);
console.log(jsonStr);
注意 ：JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错
3、AJAX
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 不是新的编程语言，而是一种使用现有标准的新方法——现有的Internet标准，并且联合使用它们：
- XMLHttpRequest 对象 (异步的与服务器交换数据)
- JavaScript/DOM (信息显示/交互)
- CSS (给数据定义样式)
- XML (作为转换数据的格式)
AJAX优点：
1.AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。(传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。)
2.使用异步的方式与服务器通信，不需要中断操作。
3.可以把以前服务器负担的工作转嫁给客户端，减轻服务器和带宽，可以最大程度减少冗余请求。
4.基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
AJAX缺点：
1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
2.安全问题技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
3.1、异步的概念
异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。
在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。
同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。也就是说客户端必须等待服务器端的响应，在等待的期间客户端不能做其他操作。
异步提交：当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显示出来。也就是说客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。
以上是关于异步的概念的解释，接下来我们通俗地解释一下异步：异步就是从主线程发射一个子线程来完成任务。（setTimeout可以了解一下）
传统的web交互是用户触发一个http请求服务器，然后服务器收到之后，在做出响应到用户，并且返回一个新的页面，每当服务器处理客户端提交的请求时，客户都只能空闲等待，并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据，都要返回一个完整的HTML页，而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间，这导致了用户界面的响应比本地应用慢得多。
AJAX 的出现,刚好解决了传统方法的缺陷，AJAX 是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
3.2、AJAX的XMLHttpRequest（XHR）对象
AJAX 的核心是 XMLHttpRequest 对象。 所有现代浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 对象用于幕后同服务器交换数据，这意味着可以更新网页的部分，而不需要重新加载整个页面。
所有现代浏览器（Chrom、IE7+、Firefox、Safari 以及 Opera）都有内建的 XMLHttpRequest 对象。
创建 XMLHttpRequest 的语法是：
variable = new XMLHttpRequest();
老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：
variable = new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，创建 XMLHttpRequest 对象，如果不支持，则创建 ActiveX 对象：
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
但是需要注意的是，出于安全原因，现代浏览器不允许跨域访问，这意味着尝试加载的网页和 XML 文件都必须位于相同服务器上。
3.3、AJAX的XMLHttpRequest对象方法
| 方法 | 描述 |
|---|---|
| new XMLHttpRequest() | 创建新的 XMLHttpRequest 对象 |
| abort() | 取消当前请求 |
| getAllResponseHeaders() | 返回头部信息 |
| getResponseHeader() | 返回特定的头部信息 |
| open(method, url, async, user, psw) | 规定请求method：请求类型 GET 或 POST
|
| send() | 将请求发送到服务器，仅用于 GET 请求 |
| send(string) | 将请求发送到服务器，仅用于 POST 请求 |
| setRequestHeader(header,value) | 向请求添加 HTTP 头。
|
3.3.1、GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
- 不愿使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
3.3.2、异步 - True 或 False？
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：
xmlhttp.open("GET","ajax_test.html",true);
对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。
通过 AJAX，JavaScript 无需等待服务器的响应，而是：
- 在等待服务器响应时执行其他脚本
- 当响应就绪后对响应进行处理
3.4、AJAX的XMLHttpRequest对象属性
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 保存 XMLHttpRequest 的状态。
|
| responseText | 以字符串返回响应数据 |
| responseXML | 以 XML 数据返回响应数据 |
| status | 返回请求的状态号 200: "OK" 403: "Forbidden" 404: "Not Found" 如需完整列表请访问XHR状态码 |
| statusText | 返回状态文本（比如 “OK” 或 “Not Found”） |
3.5、AJAX的GET/POST请求
工程结构：
users.json
[
{"name":"孙悟空","age":18,"gender":"男"},
{"name":"猪八戒","age":19,"gender":"男"},
{"name":"唐僧","age":20,"gender":"男"},
{"name":"沙和尚","age":21,"gender":"男"}
]
3.5.1、GET请求
index.html
//步骤一：创建异步对象
var ajax = new XMLHttpRequest();
//步骤二：设置请求的url参数，参数一是请求的类型，参数二是请求的url
ajax.open("get", "users.json");
//步骤三：发送请求
ajax.send();
//步骤四：注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
//步骤五：如果能够进到这个判断，说明数据完美的回来了，并且请求的页面是存在的
console.log(ajax.responseText);//输入响应的内容
}
};
控制台：
3.5.2、POST请求
index.html
//步骤一：创建异步对象
var ajax = new XMLHttpRequest();
//步骤二：设置请求的类型及url，注意：post请求一定要添加请求头才行不然会报错
ajax.open("post", "users.json");
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//步骤三：发送请求
ajax.send();
//步骤四：注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
//步骤五：如果能够进到这个判断，说明数据完美的回来了，并且请求的页面是存在的
if (ajax.readyState == 4 && ajax.status == 200) {
console.log(ajax.responseText);//输入响应的内容
}
};
控制台：
3.5.3、AJAX的请求整合
index.html
var Ajax = {
get: function (url, fn) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
fn.call(this, xhr.responseText);
}
};
xhr.send();
},
post: function (url, data, fn) {
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
fn.call(this, xhr.responseText);
}
};
xhr.send(data);
}
};
// 演示GET请求
Ajax.get("users.json", function (response) {
console.log(response);
});
// 演示POST请求
Ajax.post("users.json", "", function (response) {
console.log(response);
});
控制台：
3.5.4、 AJAX 实例
创建一个简单的XMLHttpRequest，从一个TXT文件中返回数据。
创建一个简单的XMLHttpRequest，从一个XML文件中返回数据。
检索资源（文件）的头信息。
检索资源（文件）的指定头信息。
当用户在文本框内键入字符时网页如何与Web服务器进行通信
用AJAX网页如何获取数据库中的信息
创建一个XMLHttpRequest从XML文件中检索数据并显示在一个HTML表格中。
用一个callback函数创建一个XMLHttpRequest，并从一个TXT文件中检索数据。
3.6、实现AJAX的基本步骤
要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:
- 创建XMLHttpRequest对象,即创建一个异步调用对象
- 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
- 设置响应HTTP请求状态变化的函数.
- 发送HTTP请求.
- 获取异步调用返回的数据
- 使用JavaScript和DOM实现局部刷新.
- 完整的AJAX实例
-
<html> <head> <title>AJAX实例</title> <script language="javascript" type="text/javascript"> var xmlHttpRequest; //定义一个变量用于存放XMLHttpRequest对象 //定义一个用于创建XMLHttpRequest对象的函数 function createXMLHttpRequest(){ if(window.ActiveXObject){//IE浏览器的创建方式 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }else if(windew.XMLHttpRequest){//Netscape浏览器中的创建方式 xmlHttpRequest = new XMLHttpRequest(); } } //响应HTTP请求状态变化的函数 function httpStateChange(){ if(xmlHttpRequest.readyState == 4){//判断异步调用是否成功,若成功开始局部更新数据 if(xmlHttpRequest.status == 200||xmlHttpRequest.status == 0) { var node = document.getElementById("myDIv");//查找节点 node.firstChild.nodeValue = xmlHttpRequest .responseText;//更新数据 } else {//如果异步调用未成功,弹出警告框,并显示出错信息 alert("error:HTTP状态码为:"+xmlHttpRequest.status + ",HTTP状态信息为:" + xmlHttpRequest.statusText); } } } //异步调用服务器段数据 function getData(name,value){ createXMLHttpRequest();//创建XMLHttpRequest对象 if(xmlHttpRequest!=null){ xmlHttpRequest.open("get","ajax.text",true);//创建HTTP请求 xmlHttpRequest.onreadystatechange = httpStateChange;//HTTP请求状态变化的函数 xmlHttpRequest.send(null);//发送请求 } } </script> </head> <body> <div id="myDiv">原数据</div> <input type = "button" value = "更新数据" onclick = "getData()"> </body> </html>4、WebStorage
HTML5 web 存储，一个比 cookie 更好的本地存储方式。
4.1、WebStorage概述
WebStorage是HTML5中本地存储的解决方案之一，在HTML5的WebStorage概念引入之前除去IE User Data、Flash Cookie、Google Gears等看名字就不靠谱的解决方案，浏览器兼容的本地存储方案只有使用Cookie。有同学可能会问，既然有了Cookie本地存储，为什么还要引入WebStorage的概念？那就要说一说Cookie的缺陷了：
- 数据大小：作为存储容器，Cookie的大小限制在4KB左右这是非常坑爹的，尤其对于现在复杂的业务逻辑需求，4KB的容量除了存储一些配置字段还简单单值信息，对于绝大部分开发者来说真的不知指望什么了。
- 安全性问题：由于在HTTP请求中的Cookie是明文传递的（HTTPS不是），带来的安全性问题还是很大的。
- 网络负担：我们知道Cookie会被附加在每个HTTP请求中，在HttpRequest和HttpResponse的header中都是要被传输的，所以无形中增加了一些不必要的流量损失。
虽然WebStorage是HTML5新增的本地存储解决方案之一，但并不是为了取代Cookie而制定的标准，Cookie作为HTTP协议的一部分用来处理客户端和服务器通信是不可或缺的，session正是依赖于实现的客户端状态保持。WebStorage的意图在于解决本来不应该Cookie做，却不得不用Cookie的本地存储的应用场景。
4.2、WebStorage分类
Web Storage又分为两种： sessionStorage 和 localStorage ，即这两个是Storage的一个实例。从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地； 不管是sessionStorage，还是localStorage，使用的API都相同。
- localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
- sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理，低版本IE可以使用json2.js
作用域：
-
这里的
作用域指的是：如何隔离开不同页面之间的localStorage（总不能在百度的页面上能读到腾讯的localStorage吧，哈哈哈）。 -
localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。 -
sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
4.2.1、localStorage方法
对象介绍：
localStorage在本地永久性存储数据，除非显式将其删除或清空。
常见方法：
- 保存单个数据：localStorage.setItem(key,value);
- 读取单个数据：localStorage.getItem(key);
- 删除单个数据：localStorage.removeItem(key);
- 删除所有数据：localStorage.clear();
- 获取某个索引的key：localStorage.key(index);
案例演示：
// 保存数据
localStorage.setItem("username", "zhangsan");
// 读取单个数据
console.log(localStorage.getItem("username"));
console.log("===============");
// 删除单个数据
localStorage.removeItem("username");
console.log(localStorage.getItem("username"));
console.log("===============");
// 保存两个数据
localStorage.setItem("age", 18);
localStorage.setItem("sex", "男");
console.log("age=" + localStorage.getItem("age"));
console.log("sex=" + localStorage.getItem("sex"));
console.log("===============");
// 使用for-in循环来迭代localStorage中的键值对、属性和方法：
for (var key in localStorage) {
console.log(key + "=" + localStorage[key]);
}
console.log("===============");
// 使用for循环来迭代localStorage中的键值对：
for (var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
var value = localStorage.getItem(key);
console.log(key + "=" + value);
}
console.log("===============");
// 删除所有数据
localStorage.clear();
控制台：
4.2.2、sessionStorage方法
对象介绍：
sessionStorage对象存储特定于某个对话的数据，也就是它的生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。存储在sessionStorage中的数据可以跨越页面刷新而存在，同时如果浏览器支持，浏览器崩溃并重启之后依然可以使用（注意：Firefox和Weblit都支持，IE则不行）。
因为sessionStorage对象绑定于某个服务器会话，所以当文件在本地运行的时候是不可用的。存储在sessionStorage中的数据只能由最初给对象存储数据的页面访问到，所以对多页面应用有限制。
不同浏览器写入数据方法略有不同。Firefox和Webkit实现了同步写入，所以添加到存储空间中的数据是立刻被提交的。而IE的实现则是异步写入数据，所以在设置数据和将数据实际写入磁盘之间可能有一些延迟。
常见方法：
- 保存单个数据：sessionStorage.setItem(key,value);
- 读取单个数据：sessionStorage.getItem(key);
- 删除单个数据：sessionStorage.removeItem(key);
- 删除所有数据：sessionStorage.clear();
- 获取某个索引的key：sessionStorage.key(index);
案例演示：
// 保存数据
sessionStorage.setItem("username", "zhangsan");
// 读取单个数据
console.log(sessionStorage.getItem("username"));
console.log("===============");
// 删除单个数据
sessionStorage.removeItem("username");
console.log(sessionStorage.getItem("username"));
console.log("===============");
// 保存两个数据
sessionStorage.setItem("age", 18);
sessionStorage.setItem("sex", "男");
console.log("age=" + sessionStorage.getItem("age"));
console.log("sex=" + sessionStorage.getItem("sex"));
console.log("===============");
// 使用for-in循环来迭代sessionStorage中的键值对、属性和方法：
for (var key in sessionStorage) {
console.log(key + "=" + sessionStorage[key]);
}
console.log("===============");
// 使用for循环来迭代sessionStorage中的键值对：
for (var i = 0; i < sessionStorage.length; i++) {
var key = sessionStorage.key(i);
var value = sessionStorage.getItem(key);
console.log(key + "=" + value);
}
console.log("===============");
// 删除所有数据
sessionStorage.clear();
控制台：
5、Closure闭包
JavaScript 变量可以是局部变量或全局变量。
私有变量可以用到闭包。
所有函数都能访问全局变量。
实际上，在 JavaScript 中，所有函数都能访问它们上一层的作用域。
JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。
5.1、闭包引入
需求信息：点击某个按钮，提示"点击的是第n个按钮"
第一种解决方法：将btn所对应的下标保存在btn上
var btns = document.getElementsByTagName('button');
//将btn所对应的下标保存在btn上
for (var i = 0, length = btns.length; i < length; i++) {
var btn = btns[i];
btn.index = i;
btn.onclick = function () {
alert('第' + (this.index + 1) + '个');
}
}
第二种解决方法：利用闭包延长局部变量的生命周期
var btns = document.getElementsByTagName('button');
// 利用闭包延长局部变量的生命周期
for (var i = 0, length = btns.length; i < length; i++) {
(function (j) {
var btn = btns[j];
btn.onclick = function () {
alert('第' + (j + 1) + '个');
}
})(i);
}
5.2、闭包概念
| 闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。 直观的说就是形成一个不销毁的栈环境。 |
- 如何产生闭包?
- 当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时，就产生了闭包
- 什么才是闭包？
- 理解一：闭包是嵌套的内部函数(绝大部分人认为)
- 理解二：包含被引用变量(函数)的对象(极少部分人认为)
- 闭包的作用？
- 它的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中
5.3、闭包演示
function fun1() {
var a = 2;
function subFun() {
a++;
console.log(a);
}
return subFun;
}
var f1 = fun1();
f1();
f1();
console.log("===============");
function fun2() {
var a = 2;
function subFun() {
a--;
console.log(a);
}
return subFun;
}
var f2 = fun2();
f2();
f2();
console.log("===============");
5.4、闭包生命周期
生命周期：
- 产生：在嵌套内部函数定义执行完时就产生了(不是在调用)
- 死亡：在嵌套的内部函数成为垃圾对象时就死亡了
演示说明：
function fn1() {
//此时闭包就已经产生了(函数提升, 内部函数对象已经创建了)
var a = 2;
function fn2() {
a++;
console.log(a);
}
return fn2;
}
var f = fn1();
f(); // 3
f(); // 4
f = null; //闭包死亡(包含闭包的函数对象成为垃圾对象)
5.5、闭包应用
闭包应用： 定义JS模块
- 具有特定功能的js文件
- 将所有的数据和功能都封装在一个函数内部(私有的)
- 只向外暴露一个包含n个方法的对象或函数
- 模块的使用者，只需要通过模块暴露的对象调用方法来实现对应的功能
案例演示：
第一种格式：myModule.js
function myModule() {
//私有数据
var msg = 'Hello, World';
//操作数据的函数
function doSomething() {
console.log('doSomething() ' + msg.toUpperCase());
}
function doOtherthing() {
console.log('doOtherthing() ' + msg.toLowerCase());
}
//向外暴露对象(给外部使用的方法)
return {
doSomething: doSomething,
doOtherthing: doOtherthing
}
}
第一种使用：index.html
var module = myModule();
module.doSomething();
module.doOtherthing();
第二种格式：myModule.js
(function (window) {
//私有数据
var msg = 'Hello, World';
//操作数据的函数
function doSomething() {
console.log('doSomething() ' + msg.toUpperCase());
}
function doOtherthing() {
console.log('doOtherthing() ' + msg.toLowerCase());
}
//向外暴露对象(给外部使用的方法)
window.myModule = {
doSomething: doSomething,
doOtherthing: doOtherthing
}
})(window);
第二种使用：index.html
myModule.doSomething();
myModule.doOtherthing();
238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
