ajax的工作原理

前后端交互，首先需要创建一个XMLHttpRequest对象，通过这个对象的open方法与服务器建立连接，通过send方法将请求发送给服务器，最后通过事件监听，将后端请求的数据通过回调函数返回给前端。

使用 ajax 发送请求时携带参数

• 我们使用 ajax 发送请求也是可以携带参数的
• 参数就是和后台交互的时候给他的一些信息
• 但是携带参数 get 和 post 两个方式还是有区别的

发送一个带有参数的 get 请求

• get 请求的参数就直接在 url 后面进行拼接就可以

  const xhr = new XMLHttpRequest()
  // 直接在地址后面加一个 ?，然后以 key=value 的形式传递
  // 两个数据之间以 & 分割
  xhr.open('get', './data.php?a=100&b=200')
  
  xhr.send()
  

  • 这样服务端就能接受到两个参数
  • 一个是 a，值是 100
  • 一个是 b，值是 200

发送一个带有参数的 post 请求

• post 请求的参数是携带在请求体中的，所以不需要再 url 后面拼接

  const xhr = new XMLHttpRequest()
  xhr.open('get', './data.php')
  
  // 如果是用 ajax 对象发送 post 请求，必须要先设置一下请求头中的 content-type
  // 告诉一下服务端我给你的是一个什么样子的数据格式
  xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
  
  // 请求体直接再 send 的时候写在 () 里面就行
  // 不需要问号，直接就是 'key=value&key=value' 的形式
  xhr.send('a=100&b=200')
  

  • application/x-www-form-urlencoded 表示的数据格式就是 key=value&key=value

get与post的区别？

get

1. 传递速度快
2. 传递数据大小为1KB
3. 参数在url地址后面传递
4. get以明文方式传递参数，所以不安全。
5. get会留下历史记录

post

1. 传递速度慢
2. 传递数据大小为 2MB
3. 参数在http协议的请求体中传递
4. post传递参数相对安全。
5. 不会留下历史记录