ajax工作原理 前后端交互流程

一. 前后端交互流程

1.服务器 : 提供某种服务器的机器(计算机)

qq音乐：音频服务器 ， 迅雷：文件服务器 ，

qq邮箱：邮件服务器，爱奇艺：视频服务器，谷歌：web服务器

2. 前端 访问 服务器的四种方式

1. 直接在地址栏输入网址 ，网页会跳转( 全局刷新 )

2. a标签的href属性 ，网页会跳转( 全局刷新 )

3. location.href = 'url' ，网页会跳转( 全局刷新 )

4. AJAX ，网页不会跳转

3. 什么是ajax

1. ajax技术 : 在网页不跳转的情况下 向服务器请求数据

2. ajax应用场景： 局部刷新

4. ajax组成部分

（1）Ajax(阿贾克斯)：全称  Asynchronous Javascript And XML(异步的js与xml)，说人话： 用js发送异步的网络请求

（2）A :  Asynchronous  异步

同步 ： 指的是代码按照从上往下顺序执行

异步 ： 代码不会立即执行,而是要等一会儿执行

    ECMAScript只有两个语法是异步的：定时器 与  ajax

    DOM事件也是属于异步的，但是这个是属于DOM的执行机制。所以一般在讨论js同步和异步的      时候，主要以js为主，DOM一般不讨论。

（3）J：Javascript

（4）A ：And

（5）X :  XML 与 XMLHttpRequest

   XML ： 解决跨平台数据传输。

  在JSON没有出来以前, 网络传输主要以XML格式数据为主。  后来JSON问世，逐渐取代XML。

5. 前后端交互三个流程

1. 请求 (前端)，2.处理 (后端)，3.响应(后端)

二. ajax工作原理

1.ajax工作流程

(1) 创建xhr对象：let xhr = new XMLHttpRequest()

(2)设置请求方法和地址 ： xhr.open('请求方法','请求地址')

(3)发送请求：xhr.send()

(4)注册响应事件：xhr.onload = function(){}

这个函数不是立即执行的，而是等服务器把数据响应返回才会执行（PS：什么时候执行取决于你的网速快慢）

get与post区别   

1.传参方式不同

get请求： 直接在url后面拼接参数  (参数在url中，安全性不高)

get传参格式： url?key=value

post请求：需要设置请求头（固定语法）：xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')   (注意：这是固定格式，错一个字母都不行)

使用xhr的send方法发送参数： xhr.send('参数名=参数值');  (注意：不要加前面的?)