浏览器输入一个URL会发生什么？

声明：下图的情景不考虑cookie，代理和缓存等。

浏览器输入一个URL会发生什么.png
实例分析：
访问一个不存在的域名:http://www.1231231232112312312312312321.com/
image.png
访问一个存在的域名：https://www.google .com
会重定向到https://www.google.co.jp/?gfe_rd=cr&dcr=0&ei=kYyqWaDmLtLW4gKI1bXgDg image.png

1.如何查看request信息以及response信息？

打开Chrome控制台，到NetWork窗口进行分析。
例如：
查看我的google账号头像的资源信息。

黄色的General部分包含关键request和response信息。
绿色的Response Headers包含完整的响应相关信息，包括通用首部，响应首部，实体首部。
红色的Resquest Headers包含完整的请求相关信息，包括通用首部，请求首部。

聪明的你一定发现了，为什么Response Headers多了一项实体首部？
因为对于前端工程师而言，如何处理response中包含的信息可以说是我们工作的关键！、

那么response的信息存在哪里呢？
答案就是它的content中，也就是在Chrome控制台的Network Response中去查看。
若是有，它会清晰得为你展示完整的Response信息。
若没有，它会告诉你：This request has no response data available.

image.png

2.当前页面返回的资源类型分析？

通过content-type查看。
大多数为2种资源
①无response data的静态资源，例如html，css，js等。

image.png

②主要为response data的数据资源，大多数情况为json格式数据。

image.png

3.如何构建自己的http请求并且获取或者提交数据？

这是一个很有趣的话题。
资源主要分为静态资源和数据资源，方式主要分为同步请求和异步请求。

①静态资源
当你请求服务器上静态资源时，假设我们在css文件中定义了一个图片的背景色为服务器上的一张图片，url(http://www.xxx.com/hello.png)，浏览器会自己为我们去做这件事情。
不需要我们去操心，现在有很多方便的云存储，例如七牛云用来存放图片就不错。
②数据资源
大多数是json数据。
1）获取数据

Axios({
        method: 'get',
        url: 'http://localhost:3000/hello.json',
        })
})

2）提交数据

 Axios({
      method: 'post',
      url: 'http://localhost:3000/about',
      data: {user:{username:"dog"}}
    })

例如我用Axios这个库异步请求和提交数据，一般情况指明方法和url就好，有时会有跨域问题，这个就是后话了。
大多数情况对一下2个响应头部属性做设置就好，一般来说是在后端进行设置。

Access-Control-Allow-Methods:...
Access-Control-Allow-Origin:...

关于同步和异步：

例如同步数据资源指的就是和当前资源一并下载下来.
而异步json则是当你在浏览器进行了一些操作后，例如github关注了一个大牛，此时你只点击了关注按钮，但是整个页面没有刷新，只是关注按钮部分的状态发生了局部更新。
所以说同步和异步，一般情况是和整体渲染和局部渲染相关联的。

其实输入一个url还有很多地方，比如文章开头提到的cookie，缓存和代理等。

目前对于这些知识点，我仅仅停留在概念的理解上，并没有真正实操过，等后面我对这一部分有深入了解后，再来完善这篇博客...

努力成为优秀的大前端工程师！