Ajax

前后端交互流程

服务器 :

了解服务器 : 提供某种服务器的机器(计算机)

服务器就是某些安装了特殊软件，可以提供某些服务的电脑。常见的服务器有以下几种

• 数据库服务
• 文件服务
• 多媒体服务(音视频)
• 邮件服务
• Web服务

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

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

• 网页会跳转( 全局刷新 )

  • 直接在地址栏输入网址

  • a标签的href属性

  • location.href = 'url'

• 网页不会跳转:Ajax技术

ajax是什么

Ajax 就是让浏览器跟服务器交互的一套API`。 它的作用就是可以让浏览器和服务器进行交互。

• 说人话： ajax 是一种 在网页不跳转的情况下 用于向服务器请求数据的 技术

• 应用场景: 局部刷新

• MDN官网传送门:developer.mozilla.org/zh-CN/docs/…

前后端交互三个流程

浏览器和服务器之间的每一次交互，都是由三个部分组成

• 请求(浏览器发起请求，服务器接收)

• 处理（服务器处理这个请求）

• 响应（服务器响应数据给浏览器）

ajax工作原理

ajax工作原理

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

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

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

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

接口文档

• 1.接口：Web服务器提供的，让ajax请求的网络地址称之为接口，简称API

• 2.接口文档 ：为了方便开发人员使用，我们的后台小伙伴会提供一种专门的文档称之为接口文档

  • 接口文档，又称为API文档，可以理解为接口的使用说明书

    • 接口文档的本质 ：其实就是后台开发（如Java）他们写的函数注释。后台在处理请求的时候一般都会写一些函数

• 3.一个标准的接口文档至少要包含以下三种信息（只能多，不能少）

  • a.请求的地址 （url）
  • b.请求的方法 （get或者post）
  • c.请求的参数

请求方法get和post的区别

请求方法get和post区别： 传参方式不同

get请求： 直接在url后面拼接参数 url?key=value

• 参数在url中，安全性不高

post请求：

• 1.需要设置请求头（固定语法）：xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')

  • 注意：这是固定格式，错一个字母都不行，强烈建议复制粘贴

• 2.使用xhr的send方法发送参数： xhr.send('参数名=参数值&参数名=参数值');

  • 注意：不要加前面的?