一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第N天，点击查看活动详情。

前后端交互流程

• 服务器 : 提供某种服务器的机器(计算机) 前端 访问 服务器的几种方式:

1. 直接在地址栏输入网址
2. a标签的href属性
3. location.href = 'url' 网页会跳转( 全局刷新 )
4. AJAX 网页不会跳转 了解什么是ajax

• (1) ajax技术 : 在网页不跳转的情况下 向服务器请求数据
• (2) ajax应用场景： 局部刷新 前后端交互三个流程
• 请求 (前端)
• 处理 (后端)
• 响应(后端)

ajax工作原理

ajax工作流程

• (1)创建xhr对象 let xhr = new XMLHttpRequest()
• (2)设置请求方法和地址 xhr.open('请求方法','请求地址')
• (3)发送请求 xhr.send()
• (4)注册响应事件 xhr.onload = function(){}

xhr对象的请求状态码

• 请求未初始化 (open之前)
• 服务器连接已建立 (open之后)
• 请求已接收 ( 服务器已经收到你的请求 )
• 请求处理中 ( 服务器正在处理你的请求 )
• 请求已完成，且响应已就绪 ( 服务器完成响应, onload事件就是在这里执行 )

ajax组成部分

• Ajax：全称 Asynchronous Javascript And XML(异步的js与xml)

• A : Asynchronous 异步 同步 ： 指的是代码按照从上往下顺序执行
  异步 ： 代码不会立即执行,而是要等一会儿执行

• J：Javascript

• A ：And

• X : XML 与 XMLHttpRequest XML ： 解决跨平台数据传输
  在JSON没有出来以前, 网络传输主要以XML格式数据为主。 后来JSON问世，逐渐取代XML