javascript学习-浏览器

浏览器对象

1. window ：不但充当全局作用域，而且表示浏览器窗口。
   window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示页面的净宽高。
   还有outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。

2. navigator：表示浏览器的信息

   
   image.png

3. screen：表示屏幕的信息

   
   image.png

4. location：表示当前页面的URL信息

   
   image.png
   

   要加载一个新页面，可以调用location.assign()
   要重新加载当前页面，调用location.reload()

   
   image.png

5. document：表示当前页面，由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。
   a. 要查找DOM树的某个节点，需要从document对象开始查找，最常用的查找是根据ID和TagName。
   

   HTML数据： image.png
   document对象提供getElementById()和getElementsByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点
   image.png
   

   b. document对象还有一个cookie属性，可以获取当前页面的Cookie
   Cookie是由服务器发送的key-value标识符。因为HTTP协议是无状态的，但是服务器需要区分到底是哪个用户发送过来的请求，就可以用Cookie来区分。当一个用户成功登陆后，服务器发送一个Cookie给浏览器，例如user=ABC123XZY（加密的字符串）...，此后，浏览器访问该网站时，会在请求头附上这个Cookie，服务器根据Cookie即可区分用户。Cookie还可以存储网站的一些设置。

   
   image.png
   由于Javascript能读取页面的Cookie，而用户的登录信息通常页存在Cookie中，会造成巨大的安全隐患。为了解决这个问题，服务器在设置Cookie时可以使用httpOnly，此时Cookie将不能被JavaScript读取。
6. history：保留了浏览器的历史记录，JavaScript可以调用history对象的back()或forward()，相当于用户点击浏览器的“后退”或“前进”按钮。

操作DOM

更新

1. 修改innerHTML属性，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：

   
   image.png
   

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

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

   
   image.png
   

   两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本。

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

   
   image.png

插入DOM

1. 使用appendChild，把一个子节点添加到父节点的最后一个子节点
   a. 已有节点插入

   
   image.png
   

   把<p id ="js">JavaScript</p>添加到<div id =“list”>最后一项：

   
   image.png
   效果：
   image.png
   插入的js节点已经存在与当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置。
   

   b. 动态创建新节点插入指定位置

   
   image.png
   效果：
   image.png
   c. 动态添加CSS
   image.png

2. insertBefore：把节点插入指定位置
   parentElement.insertBefore(newElement,referenceElement)，子节点会插入到referenceElement之前

   
   image.png
   image.png
   

   效果：

   
   image.png

删除DOM

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

image.png

操作表单

用Javascript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。
HTML表单的输入控件主要有一下几种：

image.png

获取值

1. input、text、password、hidden以及select，获取节点的引用，就可以直接调用value获取对应的用户输入值：

   
   image.png

2. 单选框redio、复选框checkbox，value属性返回的永远是HTML预设的值，而我们需要获得的实际是用户是否“勾上了”选项，所以应该用checked判断：

   
   image.png

设置值

1. input、text、password、hidden以及select，直接设置value就可以

   
   image.png
2. 单选框redio、复选框checkbox，设置checked为true或false即可

HTML5控件

HTML5新增了大量标准控件，常用的包括：date、datetime、datetime-local、color等，都是用input标签：

image.png

不支持HTML5的浏览器无法识别新的控件，会把他们当中type="text"来显示。

提交表单

1. 通过<form>元素的submit()方法提交一个表单，相应一个button的click事件：

   
   image.png

2. 第一种方法扰乱了浏览器对form的正常提交。第二种方式是响应form本身的onsubmit事件，在提交form时作修改：

   
   image.png
   

   注意：return true来告诉浏览器继续提交，如果return false，浏览器不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form.
   用户输入用户名、密码提交（MD5加密）：

   
   image.png

操作文件

上传文件input控件：type="file"

当表单包含<input type="file">时，表单enctype必须指定为multipart/form-data，method必须为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。
浏览器只允许选择本地文件，用value来赋值是没有任何效果的。当用户选择上传某个文件后，JavaScript也无法获取该文件的真是路径。

image.png

HTML5的File和FileReader

下面的例子演示了如何获取用户选取的图片文件，并在一个<div>中预览图像：

image.png

回调

 JavaScript的一个重要的特性就是单线程执行模式。在JavaScript中，浏览器的JavaScript执行引擎在执行JavaScript代码时，总是以单线程模式执行，也就是说，任何时候，JavaScript代码都不可能同时有多于1个线程在执行。
在JavaScript中，执行多任务实际上都是异步调用。比如上面的代码：

image.png

发起一个异步操作来读取文件内容。因为是异步操作，所以在JavaScript代码中就不知道什么时候操作结束，因此需要先设置一个回调函数：

image.png

当文件读取完成后，JavaScript引擎将自动调用我们设置的回调函数。执行回调函数时，文件已经读取完毕，可以在回调函数内部安全地获得文件内容。

AJAX

Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。
如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。
这就是Web的运作原理：一次HTTP请求对应一个页面。
如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。

发送AJAX请求

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

image.png

当创建了 XMLHttpRequest 对象后，要先设置 onreadystatechange 的回调函
数。在回调函数中，通常我们只需通过 readyState === 4 判断请求是否完成，
如果已完成，再根据 status === 200 判断是否是一个成功的响应。
XMLHttpRequest 对象的 open() 方法有3个参数，第一个参数指定是 GET 还
是 POST ，第二个参数指定URL地址，第三个参数指定是否使用异步，默认
是 true ，所以不用写。
注意，千万不要把第三个参数指定为 false ，否则浏览器将停止响应，直到AJAX
请求完成。如果这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。
最后调用 send() 方法才真正发送请求。 GET 请求不需要参数， POST 请求需要
把body部分以字符串或者 FormData 对象传进去。

安全限制

  默认情况下，JavaScript在发送AJAX请求时，URL的域名必须和当前页面完全一致。
  完全一致的意思是，域名要相同（ www.example.com 和 example.com 不同），协议要相同（ http 和 https 不同），端口号要相同（默认是 :80 端口，和 :8080 就不同）有的浏览器口子松一点，允许端口不同，大多数浏览器严格遵守这个限制。

用JavaScript发送外域的URL：
一. 是通过Flash插件发送HTTP请求，这种方式可以绕过浏览器的安全限制，但必须
安装Flash，并且跟Flash交互。不过Flash用起来麻烦，而且现在用得也越来越少
了。
二. 是通过在同源域名下架设一个代理服务器来转发，JavaScript负责把请求发送到

代理服务器： image.png
代理服务器再把结果返回，这种方式麻烦之处在于需要服务器端额外做开发。
三. 方式称为JSONP，它有个限制，只能用GET请求，并且要求返回
JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源。JSONP通常以函数调用的形式返回，例如，返回的JavaScript内容如下：
image.png
这样一来，可以在页面先准备好foo()函数，然后给页面动态加载<script>节点，相当于动态读取外域的JavaScript资源。
image.png
image.png

CORS

   全称Cross-Origin Resource Sharing，是HTML5规范定义的如何跨域访问资源。
  Origin表示本域，也就是浏览器当前页面的域。当JavaScript向外域（如sina.com）发起请求后，浏览器收到响应后，首先检查 Access-Control-Allow-Origin 是否包含本域，如果是，则此次跨域请求成功，如果不是，则请求失败JavaScript将无法获取到响应的任何数据。

image.png
假设本域是 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%的需求。
无论你是否需要用JavaScript通过CORS跨域请求资源，你都要了解CORS的原
理。最新的浏览器全面支持HTML5。在引用外域资源时，除了JavaScript和CSS
外，都要验证CORS。
对于PUT、DELETE以及其他类型如 application/json 的POST请求，在发送
AJAX请求之前，浏览器会先发送一个 OPTIONS 请求（称为preflighted请求）到这
个URL上，询问目标服务器是否接受：
image.png
服务器必须响应并明确指出允许的Method：
image.png
浏览器确认服务器响应的 Access-Control-Allow-Methods 头确实包含将要发送
的AJAX请求的Method，才会继续发送AJAX，否则，抛出一个错误。
由于以 POST 、 PUT 方式传送JSON格式的数据在REST中很常见，所以要跨域正
确处理 POST 和 PUT 请求，服务器端必须正确响应 OPTIONS 请求。

Promise

   把回调函数 success(request.responseText) 和 fail(request.status) 写到

一个AJAX操作里很正常，但是不好看，而且不利于代码复用。更好的写法：

image.png

这种链式写法的好处在于，先统一执行AJAX逻辑，不关心如何处理结果，然后，根据结果是成功还是失败，在将来的某个时候调用 success 函数或 fail 函数。这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。
Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清
晰地分离：

image.png
将上面的AJAX异步执行函数转换为Promise对象：
image.png