一些前端概念

一个基本的网站包含很多个网页，一个网页由html, css和javascript组成。html是主体，装载各种dom元素；css用来装饰dom元素；javascript控制dom元素。DOM（Document Object Model）文档对象模型。

1. HTML 定义了网页的内容
2. CSS 描述了网页的布局
3. JavaScript 网页的行为

HTML - 超文本标记语言(Hyper Text Markup Language)

HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

HTML 的关键是标签，其作用是指示将出现的内容。

CSS - 层叠样式表(Cascading Style Sheets)

CSS被用来同时控制多重网页的样式和布局。

例如添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。

再比如定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后，以及向某些选择器添加特殊的效果，比如链接。

JavaScript

html 页面添加 JavaScript，使得网站的动态性和交互性更强。

如果你只想展示内容，静态网站是很好的展示形象，如果你想与用户进行交换或者让网页更加生动那就需要使用到Javascript。

它可以做例如直接写入 HTML 输出流、对事件的反应、改变 HTML 内容、改变 HTML 图像、改变 HTML 样式、验证输入等。

JSON - (JavaScript Object Notation)

JSON 是用于存储和传输数据的格式。类似 XML。

JSON 比 XML 更小、更快，更易解析。

JSON 通常用于服务端向网页传递数据 。

JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。

文本可以被任何编程语言读取及作为数据格式传递。

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

JSON 文件的文件类型是 “.json”

JSON 文本的 MIME 类型是 “application/json”

XML - 可扩展标记语言（eXtensible Markup Language）

XML 被设计用来传输和存储数据。

注意：XML 被设计用来传输和存储数据，其焦点是数据的内容。HTML 被设计用来显示数据，其焦点是数据的外观。XML 是对 HTML 的补充。

JSON与XML相同之处和不同之处

相同之处：

JSON 是纯文本

JSON 具有"自我描述性"（人类可读）

JSON 具有层级结构（值中存在值）

JSON 可通过 JavaScript 进行解析

JSON 数据可使用 AJAX 进行传输

不同之处：

没有结束标签

更短

读写的速度更快

能够使用内建的 JavaScript eval() 方法进行解析

使用数组

不使用保留字

chrome浏览器fitler中的XHR作用是什么
主要作用是用于筛选所有的XHR类型的请求，达到只看XHR类型请求的目的

XHR这个标签出现在Chrome浏览器的开发者工具Network选项卡中

XHR类型即通过XMLHttpRequest方法发送的请求

filter是一个过滤器，它可以筛选包含输入关键词的请求，也可以筛选特性类型的请求，如domain、status-code等。

XHR

XMLHTTPRequest，顾名思义：是基于XML的HTTP请求。XMLHttpRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。自从浏览器提供有了XMLHTTPRequest这个接口之后，ajax操作就此诞生。

AJAX

AJAX不是JavaScript的规范，它只是一个哥们“发明”的缩写：Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。

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

这就是Web的运作原理：一次HTTP请求对应一个页面。

如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。也就是能够刷新局部网页数据而不是重新加载整个网页。

最早大规模使用AJAX的就是Gmail，Gmail的页面在首次加载后，剩下的所有数据都依赖于AJAX来更新。

用JavaScript写一个完整的AJAX代码并不复杂，但是需要注意：AJAX请求是异步执行的，也就是说，要通过回调函数获得响应。

什么叫异步？

异步，异嘛，不同的意思，这里也就是指不跟浏览器加载执行网页代码的步伐一致，也就是说在一个网页中需要用户操作来触发执行代码，而不是整个网页代码一次性执行完毕。(这里的用户操作是指在同一个网页下面请求代码执行渲染，而不是让浏览器直接跳转渲染另一个页面)

我们在浏览器中使用XMLHTTPRequest对象在服务器之间通信，传输的数据是使用XML的方式，但最终还是会被转换成json数据格式来被我们使用。

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