使用原生javascript发送ajax请求教程

AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。

1.无参get请求

//1.创建请求对象
const xhr = new XMLHttpRequest()

//2.配饰请求方法，设置请求接口地址
//这里我以木小果接口来测试，如果接口无法使用，各位小伙伴可以自行到木小果中获取接口
xhr.open('get','https://api.muxiaoguo.cn/api/tiangourj?api_key=52d76d5180dbb87d')

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

//4.网络请求返回的数据
// xhr.readystate===4代表响应完成了，xhr.status === 200 代表请求成功
        request.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var res = JSON.parse(xhr.responseText).data
          console.log(res)
        }
      }

2.有参get请求

使用Qs前需对其进行引入

<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>

// 创建请求对象
var request = new XMLHttpRequest()
// 配置请求方法，设置请求接口地址
// 在此之前，先说明一下，get传参的方式有两种
// 方式1：拼接字符串
// request.open('get', 'https://api.muxiaoguo.cn/api/tianqi?api_key=60c9c7f9e9852d7e&type=1' + '&city=' + cityName)
// 方式2：封装参数对象
      var params = {
        api_key: '60c9c7f9e9852d7e',
        type: 1,
        city: cityName
      }
// Qs.stringify将对象转成查询字符串
  request.open('get', 'https://api.muxiaoguo.cn/api/tianqi?' + Qs.stringify(params))
  request.send()
// 获取网络请求响应的数据
request.onreadystatechange = function () {
 // 响应完毕，并且请求成功
  if (request.readyState === 4 && request.status === 200) {
          var res = JSON.parse(request.responseText)
          var temp = res.data.temp
          alert('您所查询的城市当前气温是：' + temp + '摄氏度')
        }
      }

3.无参post请求

//1.创建请求对象
const xhr = new XMLHttpRequest()

//2.配饰请求方法，设置请求接口地址
xhr.open('post','请求接口地址')

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

//4.网络请求返回的数据
// xhr.readystate===4代表响应完成了，xhr.status === 200 代表请求成功
        request.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var res = JSON.parse(xhr.responseText).data
          console.log(res)
        }
      }

4.有参post请求

        // 1.创建一个实例对象
        var xhr = new XMLHttpRequest()
        // 2.打开一个连接
        // 需要传递json
        var obj = {
          username: 'admin1',
          password: '123321'
        }
        xhr.open('post', 'http://8.130.49.254:8888/user/login');
        // 设置请求头 告诉后端我们要发送的是什么格式的数据
        xhr.setRequestHeader('Content-Type', 'application/json')
        // 3.发送请求
        // 二、给后端发送json数据
        xhr.send(JSON.stringify(obj))
        // 4.接收响应
        xhr.onreadystatechange = function () {
          // 请求发送完成 请求成功
          if (xhr.readyState === 4 && xhr.status === 200) {
            // console.log(xhr.responseText);//json格式数据
            var res = JSON.parse(xhr.responseText)
            console.log(res);
            // setItem 会话存储的方法 参数：属性名 属性值
            sessionStorage.setItem('token', res.data.token)
          }
        }
      }