GET 和 POST

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库） 向服务器发送大量数据（POST 没有数据量限制） 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

发送一个带有参数的 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('post', './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')

// 接口文档
	// api
	// XMLHttpRequest 对象
	// 1. 创建一个 ajax 对象
	// open(method,url,async)
	// send(string) 将请求发送到服务器。
	// string：仅用于 POST 请求
	var xhr = new XMLHttpRequest()
	// 2. 配置本次的请求信息
	// 请求方式: 按照接口文档来进行书写
	// 请求地址: 按照接口文档来进行书写
	// 是否异步: 默认是 true 表示异步请求, 选填为 false, 表示同步请求
	// xhr 对象中的 open ⽅法是来配置请求信息的
	// 第⼀个参数是本次请求的请求⽅式 get / post / put / ...
	// 第⼆个参数是本次请求的 url
	// 第三个参数是本次请求是否异步，默认 true 表示异步，false 表示同步
	// xhr.open('请求⽅式', '请求地址', 是否异步)
	xhr.open('GET', 'http://webview.happyjia.top/api/api/getBanner_index', true)
	// 3. 配置一个请求完成后触发的事件
	// 请求完整: 本次请求发送出去, 服务器接收到了我们的请求, 并且服务器返回的信息已经回到了浏览器
	xhr.onload = function () {
	// 如何拿到后端返回的信息
	// 语法: xhr.responseText
	console.log(xhr.responseText)
	}
	// 4. 把本次请求发送出去
	xhr.send()

  /*
      第一次尝试 ajax
    */

    // 1. 创建一个 ajax 对象
    var xhr = new XMLHttpRequest()
    
    // 2. 配置本次的请求信息
    // 请求方式: 按照接口文档来进行书写
    // 请求地址: 按照接口文档来进行书写
    // 是否异步: 默认是 true 表示异步请求, 选填为 false, 表示同步请求
    xhr.open('GET', 'http://localhost:8888/test/first', true)
    
    // 3. 配置一个请求完成后触发的事件
    // 请求完整: 本次请求发送出去, 服务器接收到了我们的请求, 并且服务器返回的信息已经回到了浏览器
    xhr.onload = function () {
      // 如何拿到后端返回的信息
      // 语法: xhr.responseText
      console.log(xhr.responseText)
    }
    
    // 4. 把本次请求发送出去
    xhr.send()

```

```

 /*

​      第二次测试 ajax

​    */



​    // 1. 创建ajax 对象

​    var xhr = new XMLHttpRequest()



​    // 2. 配置本次的请求信息

​    xhr.open('GET', 'http://localhost:8888/test/second', true)



​    // 3. 配置请求完成的事件

​    xhr.onload = function () {

​      // 当后端返回的是 json 格式字符串的时候, 我们需要进行单独的解析

​      // 语法: JSON.parse(json格式字符串)

​      // 返回值: 解析好的 js 格式的数据

​      var res = JSON.parse(xhr.responseText)

​      console.log(res)

​    }



​    // 4. 发送出去

​    xhr.send()

```

```


   /*

​      GET 和 POST 请求

​    */



​    // 1. GET 请求

​    // var xhr = new XMLHttpRequest()

​    // // 需要携带参数

​    // // 因为是 GET 请求, 直接在地址后面进行参数的书写

​    // xhr.open('GET', 'http://localhost:8888/test/third?name=前端小灰狼&age=18', true)

​    // xhr.onload = function () {

​    //   console.log(JSON.parse(xhr.responseText))

​    // }

​    // xhr.send()



​    // 2. POST 请求

​    var xhr = new XMLHttpRequest()

​    // 注意: 因为是 POST 请求, 不需要在地址后面拼接参数

​    xhr.open('POST', 'http://localhost:8888/test/fourth', true)

​    xhr.onload = function () {

​      console.log(JSON.parse(xhr.responseText))

​    }



​    // 注意: 当你发送 POST 请求, 并且需要携带参数的时候, 需要进行特殊说明

​    // 语法: xhr.setRequestHeader('content-type', 你传递参数的格式)

​    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')



​    // send 后面的() 就是书写请求体的位置

​    xhr.send('name=前端小灰狼&age=18')

https://www.axios-http.cn/docs/api_intro