[JavaScript][AJAX] 前后端交互流程,ajax工作流程

目录

前后端交互流程

1.了解服务器 ： 提供服务器的机器（计算机）

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

3.ajax技术 ： 页面不跳转的情况下，向服务器请求数据

4.前后端交互三个流程

ajax工作流程

1. ajax作用 ： 网页局部刷新

2.ajax工作流程：

业务思路

1. 通过交互来发送ajax

2.将表单数据发送给服务器

3.ajax经验

（1）服务器响应图片路径, 可能有的是有  基地址， 有的没有

（2）image标签的src可以有两种方式展示图片

总结

1.【一般】ajax工作流程

2.get与post区别

---

前后端交互流程

1.了解服务器 ： 提供服务器的机器（计算机）

🏆服务器种类

音乐服务器:网抑云，qq音乐
视频服务器:爱奇艺、哔哩哔哩
文件服务器:百度网盘、阿里云盘
邮件服务器:qq邮箱，263邮箱
web服务器:谷歌浏览器,phpstudy

总结：服务器就是电脑，只需要安装对应的软件电脑就可以成为服务器

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

 💎网页会跳转:

（1）地址栏输入网址url
（2）html的a标签href属性
    不需要条件的跳转
（3）js的location.href = url
    需要条件(登录：只有账号密码正确的，才会跳转首页)

💎网页不会跳转
（4）ajax技术

3.ajax技术 ： 页面不跳转的情况下，向服务器请求数据

4.前后端交互三个流程

（1）发送请求  ： 前端
（2）处理请求 ： 后端
（3） 响应请求 ： 后端

ajax工作流程

1. ajax作用 ： 网页局部刷新

2.ajax工作流程：

   （1）创建xhr对象
    （2）设置方法 + 地址
    （3）发送请求
    （4）注册响应事件

代码如下:

//(1).实例化ajax对象
let xhr = new XMLHttpRequest()
//(2).设置请求方法和地址
//get请求的数据直接添加在url的后面 格式是 url?key=value
xhr.open('get', '接口url')
//(3).发送请求
xhr.send()
//(4).注册回调函数
xhr.onload = function() {
    console.log(xhr.responseText)
}

业务思路

1. 通过交互来发送ajax

(1)给元素注册事件
(2)发送ajax
(3)渲染服务器响应的数据
    元素.innerHTML = 数组.map( item=>``html字符串`).join('')

2.将表单数据发送给服务器

(1)注册提交事件
(2)获取表单数据
(3)把表单数据ajax发给服务器
(4)渲染服务器响应数据

3.ajax经验

（1）服务器响应图片路径, 可能有的是有  基地址， 有的没有

有基地址直接使用：  http://www.xxxxx.com/图片路径
没有基地址需要手动拼接地址栏：  'http://www.xxxx.com'   +  图片路径

（2）image标签的src可以有两种方式展示图片

1.图片路径   
2.图片数据(小图片):  base64格式二进制数据
    类似于精灵图，减少图片发送请求的次数，从而提高网络性能

总结

1.【一般】ajax工作流程

    （1）创建xhr对象
    （2）设置方法 + 地址
    （3）发送请求
    （4）注册响应事件

//(1).实例化ajax对象
let xhr = new XMLHttpRequest()
//(2).设置请求方法和地址
//get请求的数据直接添加在url的后面 格式是 url?key=value
xhr.open('get', '接口url')
//(3).发送请求
xhr.send()
//(4).注册回调函数
xhr.onload = function() {
    console.log(xhr.responseText)
}

2.get与post区别

💎 传参方式不同

        get与post区别：传参方式不同

        get(url拼接）：url?key=value

        post(请求体）：xhr.send('key=value')

get:

//(1).实例化ajax对象
let xhr = new XMLHttpRequest()
//(2).设置请求方法和地址
//get请求的数据直接添加在url的后面 格式是 url?key=value
xhr.open('get', '接口url')
//(3).发送请求
xhr.send()
//(4).注册回调函数
xhr.onload = function() {
    console.log(xhr.responseText)
}

post

//(1).实例化ajax对象
let xhr = new XMLHttpRequest()
//(2).设置请求方法和地址
xhr.open('post', '')
//(3).设置请求头（post请求才需要设置）
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
//(4).发送请求 ： 参数格式  'key=value' 
xhr.send('key=value')
//(5).注册回调函数
xhr.onload = function () {
    console.log(xhr.responseText)
}