半岛综合体育现在工作需要开发web前端页面，公司使用jsp技术，但是我感觉类似php或者jsp这种将逻辑代码嵌入到html页面内的方式太麻烦了，代码混乱不好管理；…

　　现今各种框架、工具‘横行’，到处在讲原理和源码，更有跨端技术需要我们去探索，但如果基本功不好，学什么都是事倍功半，效果很不好，花费时间的同时打击自信心。此篇文章，为我所计划的【轻聊前端】系列第（十五）篇，旨在系统地、逻辑性地把原生JavaScript知识分享给大家，帮助各位较为轻松地理清知识体系，更好地理解和记忆，我尽力而为，望不负期待。

　　前面的文章，我们聊了数据，操作数据的方法，网页载体，宿主，交互，工具箱已经很丰富。

　　但是，需要思考一个重要问题，我们一直在讨论语言本身，而网页，首先是用来呈现信息的——“信息从哪来？”

　　故而，信息“动态化”，是Web的重要特点之一，毫不夸张地说，它改变和引领了一个时代。

　　如果你是新手，从手敲代码输入内容，到从数据库拉取内容，是一种突破和跨越，即便老手，仍旧每天在和数据打交道，拿到准确无误的信息依然令人兴奋。

　　CGI，出现于1993年，距今快30年历史，它定义了Web服务器与外部程序之间的通信接⼝标准，Web服务器可以通过CGI执⾏外部程序，让外部程序根据请求⽣成动态内容。可以使用不同的编程语言编写。

　　它们出现的时间、特点，不尽相同，但较CGI更简单，效率更高。它们有一个共同点，页面是由后端处理完之后生成返回给前端，前后端有相当一部分代码耦合在一起。

　　（2）多数情况下，需要更新的只是网页中很小一部分，但这种方式会刷新整个页面，网络传输中传送了额外的信息，使速度变慢，增加了传输负担。

　　这种方式已经显得陈旧，虽然仍会有公司，包括大公司，由于历史原因仍有使用，但不作为讨论的重点，知道即可。

　　什么是异步传输？它如何模拟？上面提到了页面的整体传输，一片空白。异步传输就是局部更新，iframe可以用来实现局部化。

　　iframe是一种HTML标记，它会创建包含另外一个文档的内联框架，通过iframe框架可以在当前页面显示其他页面的信息。

　　具体操作，是将iframe的src属性设置为对另外一个页面的连接请求，并在当前页面通过JavaScript动态更新iframe的内容，就可以将服务端的数据响应到客户端，这样就不会出现主页面空白，等待刷新的现象，减少了刷新的内容，提高了速度。

　　它不是一门独立的技术，而是使用JavaScript对象——XMLHttpRequest跟XML相结合得出的实现方案。现在我们知道，它不局限于XML，只是名字被保留下来。

　　Ajax通过异步通信和响应完成页面的局部刷新，以此改善传统Web中大量不必要的整页刷新。

　　Ajax出现之后，Google就在Google地图、Google搜索建议、Gmail等投入使用，效果很棒，随后在全世界逐渐流行开来。

　　请求类型看起来很丰富，能充分应对各种需求，但你可能在很多项目中只看到get和post，这就是它”灵活“的地方，虽各有用途，但你用或者不用，并没有强制性，不会被阻止。建议还是应用合适的方法。

　　主要有两种方式，一种是作为查询字符串（query），另一种放在消息体（body）。查询通常对应get，消息体通常对应post。

　　成功了是一种处理，失败又是另一种。怎么判断呢？——onreadystatechange。

　　在这个回调中，有两个属性值可用于判断：readyState 和 status。

　　readyState代表请求的状态，跟结果无关，每当readyState的值发生变化，都会触发readystatechange事件。可以借此机会检查readyState的值。一般来说，我们需要关心的readyState值是4，表示数据已就绪。为保证跨浏览器兼容，onreadystatechange事件处理程序应该在调用open()之前赋值。

　　如果readyState值为4，就需要判断status，它保存着HTTP状态码，当它的值是2xx或3xx，表示请求顺利完成，完成后，我们就拿到返回的数据进行后续处理和展示。

　　还有一些小工具，在某些场景很有用。 - loadstart：接收到第一个字节时触发 - progress：获取响应进度 - error：请求出错时触发 - abort：用来取消发出的请求 - load：成功接收完响应时触发，和readyState值为4时类似 - loadend：在通信完成时，且在error、abort或load之后触发

　　每个请求在发送时都会携带请求头，用于传递除数据之外的信息。常见的有：请求方法、协议、接收的数据类型、请求来源、缓存策略等，数量繁多，每种都有其特定的作用，这里不展开。

　　开发者需要额外关注的，是自定义的请求头，通常是前后端约定用于接口鉴权，如果需要，可以使用setRequestHeader()方法。它接收两个参数：字段的名称和值。

　　上面提到过状态码，状态码能够帮助我们判断请求结果是否可用，如果不可用，发生了什么类型的异常，从而更合理地进行后续处理。

　　这就是为什么说status是2xx或者3xx代表请求顺利完成，因为这两种是没有出错且和数据相关的。状态码种类同样繁多，且每个项目规范不一，酌情使用，这里不再展开。

　　Ajax为Web发展立了大功，现在仍占据主流，但随着时间推移，它终将会被替代，替代者可能就是下面要登场的这位。

　　Fetch API能够执行XMLHttpRequest对象的所有任务，且更容易使用，接口更现代化。

　　只使用URL时，fetch()会发送GET请求，只包含最低限度的请求头。要进一步配置如何发送请求，需要传入可选的第二个参数——init对象。init中包含但不限于：

　　需要注意的是，fetch请求不会帮你判断状态是否真正可用，只要响应完成，就会返回为resolve，所以，要在回调中用response.status和response.ok来判断，如果因为服务器没有响应而导致浏览器超时，这样的失败会导致reject。

　　以上介绍的内容，在页面的生命周期，或者响应用户操作层面足够了，但有一些情况难以胜任，即实时交互。比如，你发出一个请求，后端处理结果的时机是不确定的，需要一个过程，这时候该怎么响应呢？

　　有4种主流方案： - 轮询：客户端定时发送请求，就像普通请求一样。 - 长轮询：客户端发送请求，服务端接收到请求后进行阻塞，并保持连接，当服务端有数据需要响应时，使用保持住的连接进行响应，并关闭连接。 - 长连接：和上一种类似，但最后不关闭连接，而是继续保持。 - 推送：客户端与服务端建立连接后，服务端可以直接向客户端推送数据。

　　iframe、AJAX都是基于HTTP协议进行Web交互。HTTP协议的工作模式对于构建实时Web应用存在诸多的限制，只能先由客户端提交请求，服务器端响应请求，并非是由服务器向客户端进行主动推送。

　　随着HTML 5标准的推出，提出了一种新的浏览器服务器通信协议—WebSocket协议。通过该协议可以在浏览器和服务器之间构建一条全双工的通信连接，支持服务器端向客户端主动推送信息，实现实时刷新页面的功能。

　　为了使用Web Socket，需要在Web服务器上运行一个程序（也叫Web Socket服务器）。这个程序负责协调各方通信，而且启动后就会不间断地运行下去。

　　以ws开头的url，是一个表示Web Socket连接的新协议，还可以是wss表示安全加密。

　　创建WebSocket对象后，页面就会尝试连接服务器。然后就是使用WebSocket对象的4个事件：onOpen、onMessage、onError、onClose。分别对应”建立连接、收到消息、发生异常、连接关闭“。

　　连接成功后，需要向服务器发送一条消息。发送消息要使用WebSocket对象的send()方法，这个方法接收纯文本内容作为参数。

　　第一，Web Socket是一种专用手段，比较适合开发聊天室、大型多人游戏，或者端到端的协作工具，而不是每一种类型。在适合的场景使用才好。

　　第二，Web Socket方案做起来可能比较复杂。JavaScript代码很简单，服务端代码不好写，要对多线程和网络模型有深刻理解。

　　到这里，关于前后端数据通信基本介绍完了，但是，还有一个角色，虽然跟业务数据无关，也属于这个范畴。

　　一般的请求是用来拉取动态数据的，但还有一类请求，它不是来展示数据，而是帮助统计数据，什么数据呢？跟用户行为相关的数据。这个动作称为”数据上报“。

　　一个奇怪的角色出现了，Image对象，你可能会问，这两者似乎完全不搭，是怎么产生联系的。大体有以下几点：

　　sendBeacon有两个参数：URL和要在请求中发送的数据data。data参数是可选的，其类型可以是ArrayBufferView、Blob、DOMString 或FormData。如果浏览器成功的以队列形式排列了用于传递的请求，则该方法返回“true”，否则返回“false”。

　　当我们写了这些代码，它会尝试在卸载文档之前将数据发送到服务器。时机过早可能错失收集数据的机会。所以时机控制很重要，恰恰这是开发人员难以做到的，API帮我们解决了。

　　前后通信，接口调试，是现代Web必有的环节，当我们写好页面结构和布局，就是它了。

　　web前端动态网页开发主流技术大的来说，分为三个流派（Java web、PHP）。

　　Angular原名angularJS诞生于2009年，之前我们都是用jquery开发，自从zhiangular的出现让我们有了新的选择，dao它最大的特点是把后端的一些开发模式移植到前端来实现，如MVC、依赖注入等。

　　React，facebook出品，正式版推出是在2013年，比angular晚了4年，但得益于其创新式的VirtualDOM，性能上碾压angularJS，一经推出，火的一塌糊涂。 特点很多，VirtualDOM、JSX、Diff算法等，支持ES6语法，采用函数式编程，门槛稍高，但也更灵活，能让开发具有更多可能性。

　　Vue作为最后推出的框架（2014年），借鉴了前辈angular和react的特点（如VirtualDOM、双向数据绑定、diff算法、响应式属性、组件化开发等）并做了相关优化，使其使用起来更加方便，更容易上手，比较少适合初学者。