原生js中的Ajax及使用_js 原生ajax类库-CSDN博客

本文链接：https://blog.csdn.net/Lance2574/article/details/120515313

1、什么是Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

2、Ajax的基本使用

使用Ajax无外乎就是以下四个步骤：

1.创建一个http请求实例对象

2.打开连接

3.发送请求

4.处理响应

2.1 向服务器发送请求

XMLHttpRequest 对象用于和服务器交换数据。

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法。

open()方法：

open(method,url,async)

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send()方法：

send(string)

将请求发送到服务器。

string：仅用于 POST 请求

2.2 处理响应

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status 200: "OK"
500: 未找到页面

发送请求时分为get不携带参数，get携带参数，post携带参数

1.get不携带参数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ajax</title>
</head>

<body>

</body>
<script>
  // 1.创建一个http请求实例对象
  var httpRequest = new XMLHttpRequest();
  // 2.打开http连接
  httpRequest.open('get', 'url相应的地址');
  // 3.发起请求
  httpRequest.send();
  // 4.处理响应
  httpRequest.onreadystatechange = function () {
    // httpRequest.readyState === 4 代表http请求完成
    // httpRequest.status === 200 代表请求成功了
    if (httpRequest.readyState === 4 && httpRequest.status === 200) {
      // 获取响应里的数据
      console.log(httpRequest.responseText);
    }
    if (httpRequest.readyState === 4 && httpRequest.status === 500) {
      // 获取响应里的数据
      console.log("错误" + httpRequest.responseText);
    }
  }
</script>

</html>

2.get携带参数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ajax</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.min.js"></script>
</head>

<body>

</body>
<script>
  // 1.创建一个http请求实例对象
  var httpRequest = new XMLHttpRequest();
  var obj = {
    page: 1,
    pageSize: 10,
  }
  // 将js对象转为查询字符串,Qs.stringify()
  var qs = Qs; //第三方库 
  var stringObj = qs.stringify(obj);
  // 2.打开http连接
  httpRequest.open('get', 'url对应的地址?' + stringObj);
  // 3.发起请求
  httpRequest.send();
  // 4.处理响应
  httpRequest.onreadystatechange = function () {
    // httpRequest.readyState === 4 代表http请求完成
    // httpRequest.status === 200 代表请求成功了
    if (httpRequest.readyState === 4 && httpRequest.status === 200) {
      // 获取响应里的数据
      console.log(httpRequest.responseText);
    }
    if (httpRequest.readyState === 4 && httpRequest.status === 500) {
      // 获取响应里的数据
      console.log("错误" + httpRequest.responseText);
    }
  }
</script>

</html>

3.post携带参数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ajax</title>
</head>

<body>

</body>
<script>
  // 用户登录
  // 输入用户名 密码 到后台校验
  // 后台校验成功后 会返回一个令牌 
  // 用户再次访问 携带令牌即可
  // 后台可以通过令牌去判断
  // 登录时间 30 那我后台直接将令牌失效 你需要重新登录
  
  // 1.创建一个http请求实例对象
  var httpRequest = new XMLHttpRequest();
  var obj = {
    username: 'admin1',
    password: '123321',
  }
  // 2.打开http连接
  httpRequest.open('post', 'url对应的地址');
  // 配置post请求 数据格式
  httpRequest.setRequestHeader("Content-Type", "application/json")
  // 3.发起请求
  // post的参数放到send中
  httpRequest.send(JSON.stringify(obj));
  // 4.处理响应
  httpRequest.onreadystatechange = function () {
    // httpRequest.readyState === 4 代表http请求完成
    // httpRequest.status === 200 代表请求成功了
    if (httpRequest.readyState === 4 && httpRequest.status === 200) {
      // 获取响应里的数据
      console.log(httpRequest.responseText);
    }
    if (httpRequest.readyState === 4 && httpRequest.status === 500) {
      // 获取响应里的数据
      console.log("错误" + httpRequest.responseText);
    }
  }
</script>

</html>