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('参数名=参数值');  (注意:不要加前面的?)

  • 8
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值