物理层面将网络区分为几种网络结构：

局域网：工作在一个局部范围的多台计算机，一般计算机数量不会特别多； 大部分情况下都是几十台计算机

城域网：广义上指代工作在一个城市的计算机网络体系

广域网：广义上指代的全球互联网络

使用网络，可以让工作在不同地域的计算机实现数据共享和数据通信，提高 生产力

约定数据通信格式

网络协议：约定传输的是什么数据，什么数据格式

ip 地址：约定传输到那台计算机

网络端口：约定传输给那个程序

网络路径：访问对应的资源和数据

http://

超文本传输协议，一般用在网站上使用

HyperText Transfer Protocal ；专门用于在网络上传输 HTML

文件

https://

安全的超文本传输协议，一般用在需要有一定的保密性的网站上

使用

HyperText Transfer Protocal Secrity ；专门在网络上安全的

传输 HTML 文件

ftp://

文件传输协议

File Transfer Protocal ；专门在网络上传输二进制文件，如

图片、音频、电影..

smtp://

邮件传输协议

Simple Mail Tansfer Protoacl ；专门在网络上传输电子邮件

pop3:// 邮局协议，专门接受邮件

ssh:// 隧道协议，专门做远程链接数据通信

...

tcp

传输控制协议；工作在网络上的底层协议，是上面一些协议的基

础

Tansfer Control Protocal

udp

广播协议；工作在网络上的底层协议，上面一些协议的基础，经

常用于开发游戏

ip 数据包协议，工作在网络的底层协议，是 tcp/udp 协议的基础

前端开发人员：开发前端视图应用，完成接口数据的请求和渲染

后端开发人员：开发服务端应用，完成数据接口的开发

最终完成项目的时候，前后端人员对接口请求和数据返回进行联调（联合调

试）保障数据正确性

接口：后端提供的，一个可以获取数据的 url 地址

请求：前端应用中，发送的 url 地址，地址一旦发送就会从服务器请求数

据；称为 request（瑞款斯特）

响应：后端接受到请求后，返回的数据包装成响应对象，称为 response

（瑞斯棒斯）

Ajax ： Asynchronous JavaScript And XML 技术，描述了一种通过 JavaScript 技术完成异步 XML 格式数据交互的技术，主要通过 JavaScript XMLHttpRueset 异步对象完成 XML 格式文件的处理；早期的 Ajax 就是异步交互 XML 格式的数据的，后来通过 JSON 格式的数据替代 了 XML 格式；但是 Ajax 名称依然沿用！

基本语法

Ajax 作为一个异步请求，包含了5个步骤：准备(创建对象)、连接服务器、发送 请求、处理请求、处理响应Ajax 作为一个异步请求，包含了5个步骤：准备(创建对象)、连接服务器、发送 请求、处理请求、处理响应

0准备：创建异步对象，前端操作

1连接服务器：打开和指定接口地址的连接、前端操作

2发送请求：通过异步对象发送请求和需要的参数数据，前端操作

3处理请求：后端操作

4处理响应：获取到接口返回的数据， DOM 操作在页面中渲染数据，前端操

作

// 1、准备

var http = new XMLHttpRequest()

// 2、连接服务器

http.open('GET', 'https://www.example.com')

// 3、发送请求、参数

http.send("city=郑州")

// 4、处理响应数据

http.onreadystatechange = function() {

// 保障当前是最后一个阶段，并且接口正确返回了数据

// readState : 0 / 1 / 2 / 3 / 4(接口返回数据)

// status: 服务状态码，2xx开头表示正确；3xx开头表示重定向；4xx开头表示

请求错误；5xx开头表示服务器内部操作

if(http.readyState= 4 && http.status = 200) {

// 获取服务器返回的数据

var txt = http.responseText // 固定语法，获取返回的文本数据

// DOM操作处理数据

// ...

}

}

HTTP1.1规范 中，将浏览器客户端跟服务器之间的请求，区分8种请求方式：

GET ：发送请求，一般向服务器请求获取数据，参数拼接在 url 地址中出

现【熟练】

POST ：发送请求，一般向服务器请求新增数据，参数一般包含在请求体中

【熟练】

PUT ：发送请求，一般向服务器请求更新数据，参数一般包含在请求体中

【熟悉】

DELETE ：发送请求，一般向服务器请求删除数据，参数拼接在 url 地址

中出现【熟悉】

HEAD ：发送请求，一般向服务器请求响应头数据，经常用来测试响应数据

格式【了解】

TRACE ：发送请求，一般给服务器发送心跳请求，测试服务器是否存活

【了解】

OPTIONS ：发送请求，一般获取请求和响应配置数据【了解】

CONNECT ：发送请求，一般用于保持长连接进行数据交互【了解】

补充格式

浏览器客户端发送的请求，就是发送了一个 url 地址；浏览器底层其实将

用户发送的 url 地址以及浏览器本身的一些信息包装成了一个请求对象进行发

送，主要包含：

请求地址： url 地址， https://www.example.com

请求方式：操作数据的方式， GET/POST..

请求头：请求的格式数据

请求体：包装请求的对象

// 1、创建对象

var _http = new XMLHttpRequest()

// 2、打开服务器连接

// 附带参数：参数拼接格式一定要正确,?name=tom&age=20&gender=1

_http.open('GET', 'http://www.example.com?name=tom&age=20&gender=1')

// 3、发送请求

_http.send()

// 4、处理返回数据

_http.onreadystatechange = function() {

// 判断数据正确返回

if(_http.readyState = 4 && _http.status = 200) {

// 获取服务器接口数据

var _txt = _http.responseText

// DOM操作数据

// ...

}

}

// 1、创建对象

var _http = new XMLHttpRequest()

// 2、打开服务器连接

_http.open('POST', 'https://www.example.com')

// 3、设置请求头

_http.setRequestHeader('content-type', 'application/x-www-formurlencoded')

// 4、发送请求

// 附带参数，以字符串的方式添加参数

_http.send('username=admin&userpass=123')

// 5、处理响应

_http.onreadystatechange = function() {

// 判断数据是否正确返回

if(_http.readyState = 4 && _http.status = 200) {

// 获取返回的数据

var _txt = _http.responseText

// DOM操作

// ...

}

面试题：简述 GET 请求和 POST 请求区别？ 总- GET 请求和 POST 请求都是 HTTP 规范中定义的请求方式，描述了客户 端向服务器发送请求完成后续操作的过程 分- GET 请求在规范中主要用于向服务器请求获取数据，也可以附带字符 串参数，参数会拼接在 url 地址的后面，参数的长度收到服务器限制；请求效 率非常高，浏览器地址栏、超链接、 Ajax 都可以发送 GET 请求 分- POST 请求在规范中主要用于向服务器新增数据，但是项目开发中我们 一般对于给服务器提交比较敏感的数据时，会使用 POST 请求将参数包装在请求 中进行传递，既可以传送字符串数据，也可以传送二进制数据，如实现文件上 传等操作；传递参数的大小受到服务器的限制；请求效率相对 GET 没有那么优 秀，但是数据安全性得到了一定的保障；一般网页中我们通过表单、 Ajax 发 送 POST 请求 总- 网页中实现页面跳转、请求一些不敏感的数据如搜索，这些都可以通过 效率较高的 GET 完成数据的请求操作；网页中一些包含敏感数据的操作如登 录、注册、转账等建议使用 POST 请求完成数据操作