关于原生ajax的那些事

传统网站中存在的问题

网速慢的时候页面加载时间长
表单提交之后，如果一项内容不符合，需要重新提交所有表单内容
在表单内容多的时候就会造成资源浪费，增加用户等待时间

关于ajax

ajax：是浏览器提供的一套方法，可以实现页面不需要刷新的更新数据，提高网页的使用体验和减少服务端的资源浪费
ajax的应用场景：页面上拉加载更多的数据，列表无属性更新，表单项目离开焦点验证数据，还有搜索框下方的搜索自动匹配等

ajax的运行环境

Ajax技术需要运行再网站环境下才能使用所以我们需要提前准备一个服务器（这里采用的是express框架实现）
使用到的模块：
path express
代码如下

// app.js
const express = require('express');
// 用于处理路径
const path= require('path');
// 处理路径
const app = express();
// 托管
app.use(express.static(path.join(__dirname, 'public')));
// 监听端口并返回
app.listen(3000,function(){
    
    
  console.log('服务器启动成功 http://localhost:3000/');
})

目录树如图所示
在这里插入图片描述

html 代码：

<!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>Document</title>
</head>
<body>
  <h1>hello word</h1>
</body>
</html>

大家会发现我为什么要创建index.html呢？
因为：在网站目录下index.html相当于进门后的路，打开网站后如果没有指定页面，浏览器等就会自动去找index.html
创建好了之后运行app.js并且打开http://localhost:3000/就会发现自动找到了index.html并且使用了
在这里插入图片描述

ajax运行原理

在这里插入图片描述
由于请求之后，页面分发下来之后，如果html再去获取数据就会造成网站刷新，严重影响了用户使用和服务器资源消耗，所以需要实现的话就要让别人来帮忙获取数据

由ajax帮助页面来实现数据获取，实现不需要实现全局刷新

ajax实现的步骤

创建ajax对象

在JavaScript中有个构造函数（XMLHttpRequest();）使用其来创建ajax对象

var xhr = new XMLHttpRequest();

xml:数据格式（当前大多数数据格式为json格式）
http：网络请求
Request:请求

确定请求地址以及请求方式

使用open方法实现请求第一个参数为请求方式，第二个参数为请求地址，第三个我们后面说，一般只要有了了这两个参数就能做到请求了

xhr.open('GET', 'http://localhost:8080/', true);

发送请求

现在我们设置完成了请求地址以及请求方式之后虽然我们设置好了参数，现在的状况就是我们给东风快递装上了核弹头，却迟迟不去打那个~~小日本~~ 小日子过得不错的那家，所以现在就应该要去下达发射指令（发请求）

xhr.send();

获取服务器给予的响应

终于带着希望的东风快递发出去了，但是发出去之后我们要确定快递客户是否已经签收了，是否还满意，所以我们要做一个回访（接收响应）所以我们需要叫卫星去看看（）

xhr.onload =function(){
    
    
}

解析响应

由于之前叫卫星去看了，卫星传回了数据，保存在了管理处接下来就需要去公布出来（使用responseText）

xhr.onload =function(){
    
    
  console.log(xhr.responseText);
}

经过上次的回访之后我们发现自身的服务还是存在（原子dan的威力太小了）一些问题，隔壁的毛熊家实验都已经开始试运行大伊万快递服务，所以接下来我们就要继续实验创造出更强大的快递服务

ajax

实验ajax

<!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>Document</title>
	</head>
	<body>
		<button onclick="get_xrz()">发送快递</button>
		<script>
			function get_xrz() {
      
      
				// 创建ajax对象
				console.log(1);
				var xhr = new XMLHttpRequest();
				// 告诉东风快递客户位置（告诉ajax向哪里发送快递以什么方式发送请求）
				xhr.open("get", "http://localhost:3000/xrz");
				// 确认客户信息之后发送快递（发送请求）
				xhr.send();
				// 由于发送快递之后不知道什么时候才能签收，所以我们要密切关注对方
				xhr.onload = function () {
      
      
					console.log(xhr.responseText);
				};
			}
		</script>
	</body>
</html>

接口

在这里插入图片描述

响应：

在这里插入图片描述

服务端响应数据的格式

在一般的项目里面服务器响应的数据大多数会以JSON格式来响应当客户端拿到这些数据后还要经过处理才能使用
所以我们新建一个接口返回数据
在这里插入图片描述

我们发送请求查看

通过上图我们貌似发现了一些端倪
我们通过代码来检测一下

输出结果如下

我们不是说是json格式嘛，但是为啥是字符串格式呢？
原因：在http传输中，无论是请求参数还是响应内容如果是对象类型，都会始终呗转换为对象字符进行传输
所以我们就会拿到字符串
在这里插入图片描述