1.Ajax 运行原理，以及实现步骤

最新推荐文章于 2022-04-07 15:40:01 发布

休息休息夏

最新推荐文章于 2022-04-07 15:40:01 发布

阅读量116

点赞数

文章标签： javascript ajax

本文链接：https://blog.csdn.net/qq_42881159/article/details/117091702

版权

Ajax 的应用场景

1.页面上拉加载更多数据
2.列表数据无刷新分页
3.表单项离开焦点数据验证
4.搜索框提示文字下拉列表

Ajax 运行原理

Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。
在这里插入图片描述

Ajax 的实现步骤

创建 Ajax 对象

 var xhr = new XMLHttpRequest();

告诉 Ajax 请求地址以及请求方式

xhr.open('get', 'http://www.example.com');

发送请求

xhr.send();

获取服务器端给与客户端的响应数据

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

实例代码：

<body>
	<script type="text/javascript">
		// 1.创建ajax对象
		var xhr = new XMLHttpRequest();
		// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
		// 1)请求方式 2)请求地址
		xhr.open('get', 'http://localhost:3000/first');
		// 3.发送请求
		xhr.send();
		// 4.获取服务器端响应到客户端的数据
		xhr.onload = function (){
			console.log(xhr.responseText)
		}

	</script>
</body>

app.js代码：

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
const bodyParser = require('body-parser');
const fs = require('fs');
// 创建web服务器
const app = express();

app.use(bodyParser.json());

// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));

// 对应01html文件
app.get('/first', (req, res) => {
	res.send('Hello, Ajax');
});
// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');