JavaScript学习笔记(六)

作者: ynchai | 来源:发表于2018-08-06 17:32 被阅读0次

主要源于廖雪峰老师的JavaScript教程

浏览器

1. 简介

注意IE浏览器，别的支持的都挺好。
IE 6~11：国内用得最多的IE浏览器，历来对W3C标准支持差。从IE10开始支持ES6标准；
另外还要注意识别各种国产浏览器，如某某安全浏览器，某某旋风浏览器，它们只是做了一个壳，其核心调用的是IE，也有号称同时支持IE和Webkit的“双核”浏览器。
不同的浏览器对JavaScript支持的差异主要是，有些API的接口不一样，比如AJAX，File接口。对于ES6标准，不同的浏览器对各个特性支持也不一样。
在编写JavaScript的时候，就要充分考虑到浏览器的差异，尽量让同一份JavaScript代码能运行在不同的浏览器中。

2. 浏览器对象

JavaScript可以获取浏览器提供的很多对象，并进行操作。

window
window对象不但充当全局作用域，而且表示浏览器窗口。
window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。
兼容性：IE<=8不支持
相对应，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。
navigator
navigator对象表示浏览器的信息，最常用的属性包括：

navigator.appName:浏览器名称
navigator.appVersion:浏览器版本
navigator.language:浏览器设置的语言
navigator.platform:操作系统类型
navigator.userAgent:浏览器设定的User-Agent字符串

请注意,navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的。
很多初学者为了针对不同浏览器编写不同的代码，喜欢用if判断浏览器版本，例如：

var width;
if (getIEVersion(navigator.userAgent) < 9) {
    width = document.body.clientWidth;
} else {
    width = window.innerWidth;
}

这样即可能判断不准确，也很难维护代码。正确的方法是充分利用JavaScript对不存在属性返回undefined的特性，直接用短路运算符||计算：
var width = window.innerWidth || document.body.clientWidth;

screen
screen对象表示屏幕的信息，常用的属性有：

screen.width: 屏幕宽度，以像素为单位
screen.height:屏幕高度，以像素为单位
screen.colorDepth:返回颜色位数，如8、16、24

location
location对象表示当前页面的URL信息，例如：一个完成的URL：
http://www.example.com:8080/path/index.html?a=1&b=2#TOP
可以用location.href获取。要获取各个部分的值：

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

要加载一个新页面，可以用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。

document
document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。
document的title属性是从HTML文档中的<title>xxx</title>读取的，但是可以动态改变：
document.title = '努力学习中...'
要查找DOM树的某个节点，需要从document对象开始查找。最常用根据ID和Tag Name。

#元数据
<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
    <dt>摩卡</dt>
    <dd>热摩卡咖啡</dd>
    <dt>酸奶</dt>
    <dd>北京老酸奶</dd>
    <dt>果汁</dt>
    <dd>鲜榨苹果汁</dd>
</dl>

用document对象提供的getElementById()和getElementByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点：

'use strict';
var menu = document.getElementById('drink-menu');
var drinks = document.getElementByTagName('dt');
var i, s, menu, drinks;

menu = document.getElementById('drink-menu');
menu.tagName;//'DL'

drinks = document.getElementsByTagName('dt');
s  = '提供的饮料有：'；
for (i=0; i<drinks.length; i++) {
    s = s + drinks[i].innerHTML + ',';
}
console.log(s);

document对象还有一个cookie属性，可以获取当前页面的cookie。

Cookie是由服务器发送的key-value标示符。因为HTTP协议是无状态的，但是服务器要区分到底是哪个用户发过来的请求，就可以用Cookie来区分。当一个用户成功登录后，服务器发送一个Cookie给浏览器，例如user=ABC123XYZ(加密的字符串)...，此后，浏览器访问该网站时，会在请求头附上这个Cookie，服务器根据Cookie即可区分出用户。
Cookie还可以存储网站的一些设置，例如，页面显示的语言等等。

JavaScript可以通过document.cookie读取到当前页面的Cookie:
document.cookie; //'v=123; remember=true; prefer=zh'
由于JavaScript能读取到页面的Cookie，而用户的登录信息通常也存在Cookie中，这就造成了巨大的安全隐患，这是因为在HTML页面中引入第三方的JavaScript代码是允许的：

<!-- 当前页面在wwwexample.com -->
<html>
    <head>
        <script src="http://www.foo.com/jquery.js"></script>
    </head>
    ...
</html>

为了解决这个问题，服务器在设置Cookie时可以使用httpOnly，设定了httpOnly的Cookie将不能被JavaScript读取。这个行为由浏览器实现，主流浏览器均支持httpOnly选项，IE从IE6 SP1开始支持。

为了确保安全，服务器端在设置Cookie时，应该始终坚持使用httpOnly。

history
history对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward()，相当于点击了后退或前进。

这个对象属于历史遗留对象，对于现代Web页面来说，由于大量使用AJAX和页面交互，简单粗暴地调用history.back()可能会让用户感到非常愤怒。

新手开始设计Web页面时喜欢在登录页登录成功时调用history.back()，试图回到登录前的页面。这是一种错误的方法。

任何情况，你都不应该使用history这个对象了。

3. 操作DOM 简介

由于HTML文档被浏览器解析后就是一颗DOM树，要改变HTML结构，就需要通过JavaScript来操作DOM。
操作一个DOM节点实际上就是这么几个操作：

更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。
那么，如何拿到DOM节点呢：

#ID是唯一的
document.getElementById()
#下面这两个都是返回一组DOM节点。
document.getElementsByTagName()
#CSS的
document.getElementsByClassName()

要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。例如：

// 返回ID为'test'的节点：
var test = document.getElementById('test');
// 先定位ID为'test-table'的节点，再返回其内部所有tr节点：
var trs = document.getElementById('test-table').getElementsByTagName('tr');
// 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
var reds = document.getElementById('test-div').getElementsByClassName('red');
// 获取节点test下的所有直属子节点:
var cs = test.children;
//获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;

第二种方法是使用querySelector()和querySelectorAll()，需要了解selector语法，然后使用条件获取节点：

// 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector('#q1');
//通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll('div.highlighted > p');

注意：低版本的IE<8不支持querySelector和querySelectorAll。IE8仅有限支持。

严格地讲，我们这里的DOM节点是指Element，但是DOM节点实际上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等很多种，以及根节点Document类型，但是，绝大多数时候我们只关心Element，也就是实际控制页面结构的Node，其他类型的Node忽略即可。根节点Document已经自动绑定为全局变量document。

更新DOM
拿到一个DOM节点后，我们可以对它进行更新。
可以直接修改节点的文本，有两种方法：

-1. 修改innerHTML属性。这种方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：

//获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
//设置文本为abc:
p.innerHTML = 'ABC';  //<p id="p-id">ABC</p>
//设置HTML
p.innerHTML = ' ABC <span style="color:red">RED</span> XYZ';
// <p>...</p>的内部结构已修改

用innerHTML时要注意，是否需要写入HTML。如果写入的字符串是通过网络拿到了，要注意对字符编码来避免XSS攻击。

-2. 修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id">&lt;script&gt;alert("Hi")&lt;/script&gt;</p>

innerText不返回隐藏元素的文本，textContent返回所有文本。IE<9不支持textContent。

-3. 修改CSS也是经常需要的操作。DOM节点的style属性对应所有的CSS，可以直接获取或设置。因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为驼峰式命名fontSize：

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';

插入DOM
获得了一个DOM节点，在这个DOM节点内插入新的DOM，如何做？
如果DOM节点是空的，例如：<div></div>，可以直接使用innerHTML = '<span>child</span>'就可以修改节点，相当于插入新的DOM节点。
如果不为空，就不能这么做，因为innerHTML会替换掉原来的所有子节点。
有两个办法可插入新的节点。

-1. 使用appendChild,把一个子节点添加到父节点的最后一个子节点：

<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>
<!-- 把<p id="js">JavaScript</p>添加到<div id="list">的最后一项：-->
var 
      js = document.getElementById('js'),
      list = document.getElementById('list');
list.appendChild(js);

<!--插入之后新的 HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="js">JavaScript</p>
</div>
#因为我们插入的js节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置。

更多时候我们会从零创建一个新的节点，然后插入指定位置：

var 
      list = document.getElementById('list'),
      haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="haskell">Haskell</p>
</div>

动态创建一个节点然后添加到DOM树中，可以实现很多功能。举个例子，下面的代码动态创建了一个<style>节点，然后把它添加到<head>节点的末尾，这样就动态地给文档添加了新的CSS定义：

var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementByTagName('head')[0].appendChild(d);

-2. insertBefore
如果我们要把子节点插入到指定的位置怎么办？可以使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

var
    list = document.getElementById('list'),
    ref = document.getElementById('python'),
    haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="haskell">Haskell</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

可见，使用insertBefore重点是要拿到一个参考子节点。可以通过遍历父节点的所有子节点:

var 
        i , c, 
        list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
    c = list.children[i];  //拿到第i个子节点
}

删除DOM
要删除一个节点，首先获取该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删除：

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
//删除
var removed = parent.removeChild(self);
removed === self;//true

注意到删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。

当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新。

<div id="parent">
    <p>First</p>
    <p>Second</p>
</div>

var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错

浏览器报错：parent.children[1]不是一个有效的节点。原因在于,当<p>First</p>节点被删除后，parent.children的节点数量已经从2变为1了，索引[1]已经不存在了。因此，删除多个节点是，要注意children属性时刻都在变化。

4. 操作表单

用JavaScript操作表单和操作DOM类似，因为表单本身也是DOM树。

不过表单的输入框、下拉框等可以接收用户输入，所以用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。

HTML表单输入控件主要有以下几种：

#文本框：
<input type="text">//输入文本
#口令框：
<input type="password">//输入口令
#单选框：
<input type="radio">//选择一项
#复选框：
<input type="checkbox">//用于多选
#下拉框
<select>//用于选择一项
#隐藏文本
<input type="hidden">//用户不可见，但表单提交时会把隐藏文本发送到服务器

获取值
如果我们获得了一个<input>节点的引用，就可以直接调用value获得对应的用户输入值：

//<input type="text" id="email">
var input = document.getElementById('email');
input.value;  //用户输入值

这种方式可以应用于text、password、hidden、select。但是，对于单选框radio和复选框checkbox,value返回的永远是HTML预设的值，我们要获得实际用户是否勾选了选项，应该用checked判断：

//<label><input type="radio" name="weekday" id="monday" value="1">Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday')；
var tue = document.getElementById('tuesday');
mon.value;  //'1'
tue.value;  //'2'
mon.checked;  //true或者false
tue.checked;  //true或者false

设置值
设置值和获取值类似，对于text、password、hidden、select直接设置value就可以：

// <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com';  //文本框的内容已更新

对于单选和复选框，设置checked为true或者false即可。

HTML5控件
H5新增了大量的标准控件，常用的包括date、datetime、datetime-local、color等，它们都使用<input>标签:

<input type="date" value="2015-07-01">//输入框2015-07-01
<input type="datetime-local" value="2015-07-01T02:03:04">//输入框2015-07-01T02:03:04
<input type="color" value="#ff0000">//输入框#ff0000

不支持H5的控件无法识别新的控件，会把它们当做type="text"来显示。支持H5的浏览器将获得格式化的字符串。例如:type="date"类型的input的value将保证是一个有效的YYYY-MM-DD格式的日期，或者空字符串。

提交表单
最后,JavaScript可以以两种方式来处理表单的提交(AJAX方式在后面章节介绍)。

方式一是通过<form>元素的submit()方法提交一个表单，例如，相应一个<button>的click事件，在JavaScript代码中提交表单:

<!-- HTML -->
<form id="test-form">
      <input type="text" name="test">
      <button type="button" onclick="doSubmitForm()">Submit</button>
</form>

<script>
function doSubmitForm() {
      var form = document.getElementById('test-form');
    //可以在此修改form的input...
    //提交form:
      form.submit();
}
</script>

这种方式的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击<button type="submit">时提交表单，或者用户在最后一个输入框按回车键。
因此，第二种响应<form>本身的onsubmit事件，在提交form时做修改：

<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
      <input type="text" name="test">
      <button type="submit">Submit</button>
</form>

<script>
 function checkForm() {
      var form = document.getElementById('test-form');
      // 可以在此修改form的input...
    // 继续下一步:
      return true;
}
</script>

注意，return true来告诉浏览器继续提交，如果return false，浏览器将不会继续提交form,这种情况通常对应用户输入有误，提示用户错误信息后终止提交form.
在检查和修改<input>时，要充分利用<input type="hidden">来传递数据。
例如，很多登录表单希望用户输入用户名和口令。但是，安全考虑，提交表单时不传输明文口令，而是口令的MD5。普通JavaScript开发人员会直接修改<input>:

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="password" name="password">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
      var pwd = document.getElementById('password');
// 把用户输入的明文变为MD5:
      pwd.value = toMD5(pwd.value);
// 继续下一步:
      return true;
}
</script>

这个做法看上去没啥问题，但用户输入了口令提交时，口令框的显示会突然从几个*变成32个*。
要想不改变用户的输入，可以利用<input type="hidden">实现：

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="input-password">
    <input type="hidden" id="md5-password" name="password">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var input_pwd = document.getElementById('input-password');
    var md5_pwd = document.getElementById('md5-password');
    // 把用户输入的明文变为MD5:
    md5_pwd.value = toMD5(input_pwd.value);
    // 继续下一步:
    return true;
}
</script>

注意：id为md5-password的<input>标记了name="password",而用户输入的id为input-password的<input>没有name属性。没有name属性的<input>的数据不会被提交。

5. 操作文件

在HTML表单中，可以上传文件的唯一控件就是<input type="file">。
注意：当一个表单包含<input type="file">时，表单的enctype必须指定为multipart/form-data,method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。
出于安全考虑，浏览器只允许用户点击<input type="file">来选择本地文件，用JavaScript对<input type="file">的value赋值是没有任何效果的。当用户选择了上传某个文件后，JavaScript也无法获得该文件的真实路径。通常，上传的文件都由后台服务器处理，JavaScript可以在提交表单时对文件扩展名做检查，以防止用户上传无效格式的文件：

var f = document.getElementById('test-file-upload');
var filename = f.value;  //'C:\fakepath\test.png'
if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {
    alert('Can only upload image file.')
    return false;
}

File API
由于JavaScript对用户上传的文件操作非常有限，尤其是无法读取文件内容，是的很多需要操作文件的网页不得不用Flash这样的三方插件来实现。
随着H5的普及，新增的File API允许JavaScript读取文件内容，获得更多的文件信息。
H5 的File API提供了File和FileReader两个主要对象，可以获得文件信息并读取文件。
下面的例子演示了如何读取用户选取的图片文件，并在一个<div>中预览图像：

var 
        fileInput = document.getElementById('test-image-file'),
        info = document.getElementById('test-file--info'),
        preview = document.getElementById('test-image-preview');
//监听change事件:
fileInput.addEventListener('change', function () {
    //清楚背景图片
    preview.style.backgroundImage = '';
    //检查文件是否选择
    if (!fileInput.value) {
          info.innerHTML = '没有选择文件';
          return;
    }
    //获取File引用
    var file = fileInput.files[0];
    //获取File信息：
    info.innerHTML  = '文件： ' + file.name + '<br>' + '大小： ' + file.size + '<br>' + '修改： ' + file.lastModifiedDate;
    if(file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
          alert('不是有效的图片文件！');
          return;
    }
    //读取文件
    var reader = new FileReader();
    reader.onload = function(e) {
          var
                data = e.target.result;//'data:image/jpeg;base64,/9j/4AAQSK...(base64编码)...'
          preview.style.backgroundImage = 'url(' + data +  ')';
    };
    //以DataURL的形式读取文件：
    reader.readAsDataURL(file);
})

上面的代码演示了如何通过H5的File API读取文件的内容。以DataURL的形式读取到的文件是一个字符串，类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...,常用于设置图像。如果需要服务器端处理，把字符串base64,后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。

回调
上面的代码还演示了JavaScript的一个重要特性就是单线程执行的模式。在JavaScript中，浏览器的JavaScript执行引擎在执行JavaScript代码时，总是以单线程模式执行，也就是说，任何时候，JavaScript代码都不可能同时有多余1个线程在执行。
那么，单线程模式执行的JavaScript，如何处理多任务？？
在JavaScript中，执行多任务实际上都是异步回调,比如上面的代码：
reader.readAsDataURL(file);
会发起一个异步操作来读取文件内容。因为是异步操作，所以我们在JavaScript代码中就不知道什么时候操作结束，因此需要先设置一个回调函数：
reader.onload = function(e){//当文件读取完成后，自动调用此函数};
当文件读取完成后，JavaScript引擎将自动调用我们设置的回调函数。执行回调函数时，文件已经读取完毕，所以我们可以在回调函数内部安全地获得文件内容。

6. AJAX

AJAX不是JavaScript规范，它只是一个发明的缩写:Asynchronous JavaScript and XML，用JavaScript执行异步网络请求。

如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。
这就是Web的运作原理：一次HTTP请求对应一个页面。

如果要让用户留在当前页面中，同时发出HTTP请求，就必须用JavaScript发送这个新的请求，即受到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断更新。
用JavaScript写一个完整的AJAX代码并不复杂，但需要注意：AJAX请求是异步执行的，也就是说，要通过回调函数获得响应。

在现在浏览器上写AJAX主要依靠XMLHttpRequest对象：

'use strict';
function success(text) {
      var textarea = document.getElementById('test-response-text');
      textarea.value = text;
}

function fail(code) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = 'Error code: ' + code;
}

//低版本IE，需要换成ActiveXObject对象来创建
var request;
if(window.XMLHttpRequeest) {
      request = new XMLHttpRequest();  //新建XMLHttpRequest对象
} else {
      request = new ActiveXObject('Microsoft.XMLHTTP');//低版本IE用这个创建ActiveXObject对象
}

request.onreadystatechange = function () {
//状态发生变化时，函数被回调
      if (request.readyState === 4) {
      //成功完成
            if (request.status === 200) {
            //成功，通过responseText拿到相应的文本：
                    return success(request.responseText);
            } else {
            //失败，根据响应码判断失败原因：
                    return fail(request.status);
            }
      } else {
      //HTTP请求还在继续
      }
}

//发送请求
request.open('GET', '/api/categories');
request.send();

alert('请求已发送，请等待响应...');

XMLHttpRequest对象的open()方法有3个参数，第一个参数指定是GET还是POST，第二个参数指定URL 地址，第三个参数指定是否使用异步，默认是true,所以不用写。
注意：千万不要把第三个参数指定为false，否则浏览器将停止响应，知道AJAX请求完成。如果这个请求耗时10秒，那么10秒内你会发现浏览器处于假死状态。
最后调用send()方法才真正发送请求。GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。

安全限制
上面open中的URL使用的是相对路径。如果你把它改为http://www.sina.com.cn/,在运行，肯定报错。这是因为浏览器的同源策略导致的。默认情况下，JavaScript在发送AJAX请求时，URL的域名必须和当前页面完全一致。

完全一致的意思是，域名要相同（www.example.com和example.com不同），协议要相同（http和https不同），端口号要相同（默认是:80端口，它和:8080就不同）。有的浏览器口子松一点，允许端口不同，大多数浏览器都会严格遵守这个限制。

JavaScript如何请求外域的URL了呢？
一是通过Flash插件发送HTTP请求，这种方法可以绕过浏览器的安全限制，但是必须安装Flash，并跟Flash交互。
二是通过在同源域名下架设一个代理服务器来转发，JavaScript负责把请求发送到代理服务器：
/proxy?url=http://www.sina.com.cn
代理服务器再把结果返回，这样就遵守了浏览器的同源策略。这种方式麻烦之处在于需要服务器额外做开发。
第三种方式称为JSONP，它有个限制，只能用GET请求，并且要求返回JavaScript。这种方式跨域实际上利用了浏览器允许跨域引用JavaScript资源：

<html>
<head>
    <script src="http://example.com/abc.js"></script>
    ...
</head>
<body>
...
</body>
</html>

JSONP通常以函数调用的形式返回，例如，返回JavaScript内容如下：
foo('data');
这样一来，我们如果在页面中先准备好了foo()函数，然后给页面动态加一个<script>节点，相当于动态读取外域的JavaScript资源，最后就等着接收回调了。例如：

外域的返回如下：
refreshPrice({"0000001":{"code": "0000001", ... });

//回调函数
function refreshPrice(data) {
      var p = document.getElementById('test-jsonp');
      p.innerHTML = '当前价格： ' + data['0000001'].name + ': ' + data['0000001'].price + '；' + data['1399001'].name + ': ' + data['1399001'].price;
}
//然后用`getPrice()`函数触发：
function getPrice() {
      var
            js = document.createElement('script'),
            head = document.getElementsByTagName('head')[0];
      js.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';
      head.appendChild(js);
}

CORS
如果浏览器支持H5，可以一劳永逸的使用心得跨域策略：CORS了。
CORS全称Cross-Origin Resource Sharing,是HTML5规范定义的如何跨域访问资源。
Origin表示本域，也就是浏览前当前页面的域。当JavaScript向外域发起请求后，浏览器收到响应后，首先检查Access-Control-Allow-Origin是否包含本域，如果是，则此次跨域请求成功，如果不是，则请求失败。

假设本域是my.com，外域是sina.com，只要响应头Access-Control-Allow-Origin为http://my.com,或者是*,本次请求就可以成功。
可见，跨域是否成功，取决于对方服务器是否愿意给你设置一个正确的Access-Control-Allow-Origin,决定权在对方手中。
上面这种跨域请求，称之为简单请求.包括GET、HEAD、POST（POST的content-Type类型仅限application/x-www-form-urlencoded、multipart/form-data和text/plain），并且不能出现任何自定义头(例如：X-Custom: 12345),通常能满足90%需求。

CORS原理，最新浏览器全面支持H5。在引用外域资源时，除了JavaScript和CSS外，都要验证CORS。例如，当你引用了某个第三方CDN上的字体文件时：

/* CSS */
@font-face {
    font-family: 'FontAwesome';
    src: url('http://cdn.com/fonts/fontawesome.ttf') format('truetype');
}

如果该CDN服务商未正确设置Access-Control-Allow-Origin，那么浏览器无法加载字体资源。

对于PUT、DELETE以及其他类型如application/json的POST请求，在发送AJAX请求之前，浏览器会先发送一个OPTIONS请求（称为preflighted请求）到这个URL上，询问目标服务器是否接受：

OPTIONS /path/to/resource HTTP/1.1
Host: bar.com
Origin: http://my.com
Access-Control-Request-Method: POST

服务器必须响应并明确指出允许的Method:

HTTP/1.1  200  OK
Access-Control-Allow-Origin: http://my.com
Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
Access-Control-Max-Age: 86400

浏览器确认服务器响应的Access-Control-Allow-Methods头确实包含将要发送的AJAX请求的Method，才会继续发送AJAX，否则，抛出一个错误。

由于以POST、PUT方式传送JSON格式的数据在REST中很常见，所以要跨域正确处理POST和PUT请求，服务器端必须正确响应OPTIONS请求。

7. Promise

在JavaScript中，所有代码都是单线程执行的。
由于这个缺陷，导致JavaScript的所有网络操作，浏览器事件，都必须异步执行。异步执行可以用回调函数实现：

function callback() {
      console.log('Done');
}
console.log('before setTimeout()');
setTimeout(callback, 1000);  //1秒后调用callback函数
console.log('after setTimeout()');
//执行结果如下：
before setTimeout()
after setTimeout()
(等待1秒后)
Done

AJAX就是典型的异步操作。

request.onreadystatechange = function () {
    if (request.readyState === 4) {
        if (request.status === 200) {
            return success(request.responseText);
        } else {
            return fail(request.status);
        }
    }
}

把回调函数success(request.responseText)和fail(request.status)写到一个AJAX操作中很正常，但是不好看，而且不利于代码复用。有没有更好的写法？比如写成这样：

var ajax = ajaxGet('http://....');
ajax.ifSuccess(success)
       .ifFail(fail);

这种链式写法的好处在于，先统一执行AJAX逻辑，不关心如何处理结果，然后根据结果是成功还是失败，在将来某个时候调用success函数或fail函数。
这种承诺将来会执行的对象在JavaScript中称为Promise对象。
在ES6中，Promise被统一规范，有浏览器直接支持。测试是否支持：

'use strict';
new Promise(function () {});
console.log('支持Promise！');

先看一个Promise的简单例子：生成一个0-2之间的随机数，如果小于1，则等待一段时间后返回成功，否则返回失败：

function test(resolve, reject) {
    var timeOut = Math.random() * 2;
    log('set timeout to: ' + timeOut + ' seconds.');
    setTimeout(function () {
          if (timeOut < 1) {
                log('call resolve()...');
                resolve('200 OK');
          } else {
                log('call reject()...');
                reject('timeout in ' + timeOut + 'seconds.');
          }
    },timeOut * 1000);
}

这个test()函数有两个参数，这两个参数都是函数，如果执行成功，我们将调用resolve('200 OK');,如果失败，调用reject('timeout in ' + timeOut + 'seconds.');。test()函数只关心自身的逻辑，并不关心具体的resolve和reject将如何处理结果。
有了执行函数，我们就可以用一个Promise对象来执行它，并在将来某个时刻获得成功或失败的结果：

var p1 = new Promise(test);
var p2 = p1.then(function (result) {
      console.log('成功：' + result);
});
var p3 = p2.catch(function (reason) {
      console.log('失败：' + reason); 
});

变量p1是一个Promise对象，它负责执行test函数。由于test函数在内部是异步执行的，当test函数执行成功时，我们告诉Promise对象：

//如果成功，执行这个函数：
p1.then(function (result) {
      console.log('成功： ' + result);
});

当test()函数执行失败时，我们告诉Promise对象：

p2.catch(function (reason) {
      console.log('失败：' + reason);
});

Promise对象可以串联起来，所以上述代码可以简化为：

new Promise(test).then(function (result) {
      console.log('成功：' + result);
}).catch(function (reason) {
      console.log('失败：' + reason);
});

实际测试代码，看看Promise是如何异步执行的：

'use strict';

// 清除log:
var logging = document.getElementById('test-promise-log');
while (logging.children.length > 1) {
    logging.removeChild(logging.children[logging.children.length - 1]);
}

// 输出log到页面:
function log(s) {
    var p = document.createElement('p');
    p.innerHTML = s;
    logging.appendChild(p);
}

new Promise(function (resolve, reject) {
    log('start new Promise...');
    var timeOut = Math.random() * 2;
    log('set timeout to: ' + timeOut + ' seconds.');
    setTimeout(function () {
        if (timeOut < 1) {
            log('call resolve()...');
            resolve('200 OK');
        }
        else {
            log('call reject()...');
            reject('timeout in ' + timeOut + ' seconds.');
        }
    }, timeOut * 1000);
}).then(function (r) {
    log('Done: ' + r);
}).catch(function (reason) {
    log('Failed: ' + reason);
});

Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了：

Promise可以做更多的事情，比如，有若干个异步任务，需要先做任务1，如果成功后再做任务2，任何任务失败则不再继续并执行错误处理函数。
要串联执行这样的异步任务，不用Promise需要些一层一层的嵌套代码。有了Promise，我们只需要简单地写：
job1.then(job2).then(job3).catch(handleError);
其中,job1、job2和job3都是Promise对象。
下面的例子演示了如何串行执行一系列需要异步计算获得结果的任务：

'use strict';

var logging = document.getElementById('test-promise2-log');
while (logging.children.length > 1) {
    logging.removeChild(logging.children[logging.children.length - 1]);
}

function log(s) {
    var p = document.createElement('p');
    p.innerHTML = s;
    logging.appendChild(p);
}

// 0.5秒后返回input*input的计算结果:
function multiply(input) {
    return new Promise(function (resolve, reject) {
        log('calculating ' + input + ' x ' + input + '...');
        setTimeout(resolve, 500, input * input);
    });
}

// 0.5秒后返回input+input的计算结果:
function add(input) {
    return new Promise(function (resolve, reject) {
        log('calculating ' + input + ' + ' + input + '...');
        setTimeout(resolve, 500, input + input);
    });
}

var p = new Promise(function (resolve, reject) {
    log('start new Promise...');
    resolve(123);
});

p.then(multiply)
 .then(add)
 .then(multiply)
 .then(add)
 .then(function (result) {
    log('Got value: ' + result);
});

//执行结果如下：
Log:

start new Promise...

calculating 123 x 123...

calculating 15129 + 15129...

calculating 30258 x 30258...

calculating 915546564 + 915546564...

Got value: 1831093128

setTimeout可以看成一个模拟网络等异步执行的函数。我们把上一节的AJAX异步执行函数转换为Promise对象，看看用Promise如何简化异步处理：

'use strict';

//ajax函数将返回Promise对象：
function ajax(method, url, data) {
      var request = new XMLHttpRequest();
      return new Promise(function (resolve, reject) {
            request.onreadystatechange = function () {
                if (request.readyState === 4) {
                      if (request.status === 200) {
                            resolve(request.responseText);
                      } else {
                            reject(request.status);
                      }
                 }
            };
            request.open(method, url);
            request.send(data);
      });
}

var log = document.getElementById('test-promise-ajax-result');
var p = ajax('GET', '/api/categories');
p.then(function (text) {//如果AJAX成功，获得响应内容
    log.innerText = text;
}).catch(function (status) {//如果失败，获得响应码
    log.innerText = 'ERROR: ' + status;
});

除了串行执行若干异步任务外，Promise还可以并行执行异步任务。
试想一个页面聊天系统，我们需要从两个不同的URL分别获得用户的个人信息和好友列表，这两个个任务可以并行执行，用Promise.all()实现如下：

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
//同时执行p1和p2， 并在它们都完成后执行then:
Promise.all([p1, p2]).then(function(results) {
    console.log(results);  //获得一个Array: ['P1', 'P2']
});

有些时候，多个异步任务是为了容错。比如，同时向两个URL读取用户的个人信息，只需要获得先返回的结果即可。这种情况下可以用Promise.race()实现：

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
Promise.race([p1, p2]).then(function (result) {
      console.log(result);  //'P1'
});

由于p1执行较快，Promise的then()将获得结果P1。p2仍在继续执行，但执行结果将被丢弃。
如果我们组合使用Promise，就可以把很多异步任务以并行和串行的方式组合起来执行。

8. Canvas

Canvas是H5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。
没有Cavans的年代，绘图只能借助Flash插件实现，页面不得不用JavaScript和Flash进行交互。
一个Canvas定义了一个指定尺寸的矩形框，在这个范围内我们可以随意绘制：
<canvas id="test-canvas" width="300" height="200"></canvas>
由于浏览器对H5的标准支持不一致，所以，通常在<canvas>内部添加一些说明性的HTML代码，如果浏览器支持Canvas，它将忽略<canvas>内部的HTML，如果浏览器不支持Canvas，它将显示<canvas>内部的HTML：

<canvas id="test-stock" width="300" height="200">
    <p>Current Price: 25.51</p>
</canvas>

测试浏览器是否支持Cavas,用canvas.getContext来进行测试：

var canvas = document.getElementById('test-canvas');
if (canvas.getContext) {
    console.log('你的浏览器支持Canvas!');
} else {
    console.log('你的浏览器不支持Canvas!');
}

getContext('2d')方法让我们拿到一个CanvasRenderingContext2D对象，所有的绘图操作都需要通过这个对象完成。

var ctx = canvas.getContext('2d');
//绘制3D呢
var gl = canvas.getContext("webgl");

绘制形状
我们可以在Canvas上绘制各种形状。Canvas的坐标系统：
Canvas的坐标以左上角为原点，水平向右为X轴，垂直向下为Y轴，以像素为单位，所以每个点都是非负整数。
CanvasRenderingContext2D对象有若干方法来绘制图形：

'use strict';
var 
        canvas = document.getElementById('test-shape-canvas'),
        ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 200, 300);//擦除(0,0)位置大小为200x200的矩形，擦除的意思是把该区域变为透明
ctx.fillStyle = '#dddddd';//设置颜色
ctx.fillRect(10, 10, 130, 130);//把(10, 10)位置大小为130x130的矩形涂色
//利用Path绘制复杂路径：
var path = new Path2D();
path.arc(75, 75, 50, 0, Math.PI*2, true);
path.moveto(110, 75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveto(65, 65);
path.arc(60, 65, 5, 0, Math.PI*2, true);
path.moveto(95, 65);
path.arc(90, 65, 5, 0, Math.PI*2, true);
ctx.strokeStyle = '#0000ff';
ctx.stroke(path);

绘制文本
绘制文本及时在指定的位置输出文本，可以设置文本的字体、样式、阴影等，与CSS完全一致：

'use strict';
var 
        canvas = document.getElementById('test-text-canvas'),
        ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = '#666666';
ctx.font = '24px Arial';
ctx.fillStyle = '#333333';
ctx.fillText('带阴影的文字', 20, 40);

Canvas除了能绘制基本的形状和文本，还可以实现动画、缩放、各种滤镜和像素转换等高级操作。如果要实现非常复杂的操作，考虑一下优化方案：

1.通过创建一个不可见的Canvas来绘图，然后将最终绘制结果复制到页面的可见Canvas中；
2.尽量使用整数坐标而不是浮点数
3.可以创建多个重叠的Canvas绘制不同的层，而不是在一个Canvas中绘制非常复杂的图；
4.背景图片如果不变可以直接用<img>标签并放到最底层。

JavaScript学习笔记(六)

浏览器

1. 简介

2. 浏览器对象

3. 操作DOM 简介

4. 操作表单

5. 操作文件

6. AJAX

7. Promise

8. Canvas

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读