写在前面

在进行前端开发之前，需要了解一些基础概念。 帮助理解网站具体是什么？浏览器又是如何去访问一个网页的？ 本节就将讲解这些在实际开发之前需要理解的知识内容。

知识点

  • HTTP 基础
  • 网站是什么
  • 浏览器访问过程
  • 网站的文件处理

HTTP 基础知识

HTTP 概述

超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的 WWW 文件都必须遵守这个标准。设计 HTTP 最初的目的是为了提供一种发布和接收 HTML 页面的方法。1960 年美国人 Ted Nelson 构思了一种通过计算机处理文本信息的方法，并称之为超文本（Hypertext）,这成为了 HTTP 超文本传输协议标准架构的发展根基。Ted Nelson 组织协调万维网协会（World Wide Web Consortium）和互联网工程工作小组（Internet Engineering Task Force ）共同合作研究，最终发布了一系列的 RFC，其中著名的 RFC 2616 定义了 HTTP 1.1。

请求方法

HTTP/1.1 定义的请求方法有 8 种：GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS、TRACE。最常的两种是 GET 和 POST，如果是 RESTful 接口的话一般会用到 GET、POST、DELETE、PUT。

常见状态码

  • 200 ：成功。
  • 400 ：客户端请求有语法错误，服务器端不能理解。
  • 401 ：该请求可能未经过授权。
  • 403 ：服务器端收到该请求，但是拒绝为它提供服务，可能是没有权限等等。
  • 404 ：该资源没找到。
  • 500 ：服务器端发生了一个不可预知的错误。
  • 503 ：服务器端当前还不能处理客户端的这个请求，可能过段时间之后才能恢复正常。

网站概述

网站(Website)是指在因特网上根据一定的规则，使用 HTML（标准通用标记语言下的一个应用）等工具制作的用于展示特定内容相关网页的集合。简单地说，网站是一种沟通工具，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。

网站的组成

在早期，域名、空间服务器与程序是网站的基本组成部分，随着科技的不断进步，网站的组成也日趋复杂，目前多数网站由域名、空间服务器、DNS 域名解析、网站程序、数据库等组成。

浏览器访问过程

当我们在浏览器中输入一个网址，比如www.zxyaily.top，浏览器就会加载出博客的主页。那么从我们输入网址到打开网页，浏览器的访问过程具体是什么呢？

1. 首先浏览器请求 DNS 服务器，通过 DNS 获取相应的域名对应的 IP。
2. 通过 IP 与目的主机建立 TCP 连接。
3. 发送和接受数据（获取网页内容）。
4. 断开 TCP 连接。

网站的文件处理

文件上传到服务器，一般可以存放于本地文件系统、数据库和远程 FTP 等。

浏览器如何处理文件，文件的上传与下载到底是怎么回事？ 前端的各种处理方式：

  • 传统 flash 上传
  • 新增 iframe 框 ajax 上传:
    通过新建一个隐藏的 iframe 框，把数据放到这个 iframe 框架里，然后把它提交到服务器端处理，服务器返回的信息也是由 iframe 框调用父框架的方法处理。
  • 表单数据提交:
    重点有两个，一个是 FormData 的数据对象，一个是 level2 的 XMLHttpRequest 对象。
    1. FormData 的数据对象
    var form= new FormData();
form.append(field,file,filename);
// field是表单里的key，就类似于一般表单里的name，file文件对象，
// filename是传送至服务器里的文件名，一般缺省
    注：当 FormData 里含有文件时，就要将 enctype 指定为 multipart/form-data 而不是 application/x-www-form-urlencoded。
    注：当 FormData 里含有文件时，就要将 enctype 指定为 multipart/form-data 而不是 application/x-www-form-urlencoded。
    2. XMLHttpRequest 对象
    创建xhr对象:
    if (typeof XMLHttpRequest !== 'undefined') {
//code for all browsers
 xhr = new XMLHttpRequest();
} else {
//code for IE5 and IE6
 var v = [
     "Microsoft.XmlHttp",
     "MSXML2.XmlHttp.2.0",
     "MSXML2.XmlHttp.1.0"
 ];
 for (var i=0; i < v.length; i++){
     try {
         xhr = new ActiveXObject(v[i]);
         break;
     } catch (e){}
 }
}
return xhr;
    xhr 发起请求:
    xhr.open(method,url,async); //method:请求的类型，GET或POST；url:文件在服务器上的位置；async：bool类型，true为异步，false为同步
xhr.overridemimeType('..'); //设定content-type，例如你想上传一个.txt文件，此处设置为text/plain
xhr.send(form); //只有当请求类型method为POST时，才需要form参数，其他情况使用xhr.send()即可
    xhr 处理事件:
    xhr.onreadystatechange=function(evt){
 if(this.readystate!==4) return;
 if(this.status==200){
     success..
 } //执行此判断时 readystate = 4。当(readystate == 4 && status == 200) = true,执行success内容。
 else fail;
};
    注： xhr 对象有 0,1,2,3,4 五个状态,五个状态顺序变化，
    onreadystatechange 事件在状态变化时被触发。
    当状态为 4 的时候，回话结束，无论错误还是获得响应。
    (readystate == 4 && status == 200) = true 说明从服务器成功获得响应,可以对服务端返回的数据进行处理。
  • HTML5 的新工具——File API
赏

zxyaily