关于Ajax

一、异步请求
（1） 什么是网络
是多台互联的计算机组成的对象数据通信结构
物理层面将网络区分为几种网络结构：

• 局域网：工作在一个局部范围的多台计算机，一般计算机数量不会特别多；大部分情况下都是几十台计算机
• 城域网：广义上指代工作在一个城市的计算机网络体系
• 广域网：广义上指代的全球互联网络
  （2） 网络数据共享
  计算机和计算机之间，实现网络互联之后，可以通过网络完成数据通信，需要满足如下的条件：
• 实现互联
• 约定数据通信格式
  • 网络协议：约定传输的是什么数据，什么数据格式
  • ip地址：约定传输到那台计算机
  • 网络端口：约定传输给那个程序
  • 网络路径：访问对应的资源和数据
    （3） 网络传输协议
    主要描述了工作在网络中的计算机，进行数据传输的约定/格式；主要包含了协议本身已经协议中要求的数据的格式！
    ① 常见的网络传输协议

协议	描述
http://	超文本传输协议，一般用在网站上使用<br />HyperText Transfer Protocal；专门用于在网络上传输HTML文件
https://	安全的超文本传输协议，一般用在需要有一定的保密性的网站上使用<br />HyperText Transfer Protocal Secrity；专门在网络上安全的传输HTML文件
ftp://	文件传输协议<br />File Transfer Protocal；专门在网络上传输二进制文件，如图片、音频、电影..
smtp://	邮件传输协议<br />Simple Mail Tansfer Protoacl；专门在网络上传输电子邮件
pop3://	邮局协议，专门接受邮件
ssh://	隧道协议，专门做远程链接数据通信
...
tcp	传输控制协议；工作在网络上的底层协议，是上面一些协议的基础<br />Tansfer Control Protocal
udp	广播协议；工作在网络上的底层协议，上面一些协议的基础，经常用于开发游戏
ip	数据包协议，工作在网络的底层协议，是tcp/udp协议的基础

② OSI/RM网络互联模型
在 OSI/RM 模型的基础上，网络软件开发中衍生出了 TCP四层模型

image.png
（4） 网络传输端口

端口	描述
80	浏览器软件，访问http://协议使用
443	浏览器软件，访问https://协议使用
20/21	FTP软件在访问ftp://协议使用
110	smtp邮件协议使用
3306	mysql数据库访问端口
22	ssh协议访问端口
......	......

（5） 关于IP地址
描述了 网络协议地址；就是在网络上的给每个计算机分配唯一一个地址来标识当前计算机！
主流的IP地址，主要有两种格式：

• IPv4：以四段、8位二进制数据标识的地址：
  • 二进制：00000000.00000000.00000000.00000000~11111111.11111111.11111111.11111111
  • 十进制：0.0.0.0 ~ 255.255.255.255
  • 目前市场主流的IP地址
• IPv6：以十六进制的方式描述计算机的地址
  • 本地链接 IPv6 地址. . . . . . . . : fe80::b097:32a3:1921:95c4%14
IPv4不同的地址段，描述的主体不同：
• A类地址：1.0.0.0~126.0.0.0，可以用来描述1亿多个主机地址
  • 首位地址：1~126，都是A类网络地址
  • 局域网：10.10.x.x，是A类网络的局域网地址
• B类地址：128.0.0.0~191.255.255.255，可以用于容纳16382 * 6W左右主机
  • 首位地址：128~191，都是B类地址
• C类地址：192.0.0.0~223.255.255.255可以用于容纳209W * 254左右主机
  • 首位地址：192~233
  • 局域网：192.168.x.x，是C类网络的局域网地址
• D/E类地址：保留地址，主要用于实验室做实验使用、特定机构使用
  二、Ajax技术
  （1） 什么是Ajax
  描述了一种通过JavaScript技术完成异步XML格式数据交互的技术，主要通过JavaScript XMLHttpRueset异步对象完成XML格式文件的处理；早期的Ajax就是异步交互XML格式的数据的，后来通过JSON格式的数据替代了XML格式；但是Ajax名称依然沿用！

Ajax中的各项技术：

• XMLHttpRequest：JavaScript异步对象
• json数据：json字符串和json对象之间进行切换stringify() / parse()
• DOM渲染：接口返回的数据，我们需要在HTML网页中渲染展示
  （2） 基本语法
  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操作处理数据
    // ...
  }
}

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

• GET：发送请求，一般向服务器请求获取数据，参数拼接在url地址中出现【熟练】
• POST：发送请求，一般向服务器请求新增数据，参数一般包含在请求体中【熟练】
• PUT：发送请求，一般向服务器请求更新数据，参数一般包含在请求体中【熟悉】
• DELETE：发送请求，一般向服务器请求删除数据，参数拼接在url地址中出现【熟悉】
• HEAD：发送请求，一般向服务器请求响应头数据，经常用来测试响应数据格式【了解】
• TRACE：发送请求，一般给服务器发送心跳请求，测试服务器是否存活【了解】
• OPTIONS：发送请求，一般获取请求和响应配置数据【了解】
• CONNECT：发送请求，一般用于保持长连接进行数据交互【了解】
  （4） GET/POST请求
  ① get请求

// 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操作数据
    // ...
  }
}

② post请求

// 1、创建对象
var _http = new XMLHttpRequest()
// 2、打开服务器连接
_http.open('POST', 'https://www.example.com')
// 3、设置请求头
_http.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
// 4、发送请求
// 附带参数，以字符串的方式添加参数
_http.send('username=admin&userpass=123')
// 5、处理响应
_http.onreadystatechange = function() {
  // 判断数据是否正确返回
  if(_http.readyState === 4 && _http.status === 200) {
    // 获取返回的数据
    var _txt = _http.responseText
    // DOM操作
    // ...
  }
}