118Ajax-运行原理及实现、json对象格式数据处理、GET\POST请求参数传递

最新推荐文章于 2023-05-08 09:25:44 发布

教练我真的想敲代码

最新推荐文章于 2023-05-08 09:25:44 发布

阅读量317

点赞数

分类专栏： ajax Express 文章标签： ajax

本文链接：https://blog.csdn.net/Gy_9543/article/details/107735363

版权

Ajax技术依赖于网站环境，通常用Node.js作为服务器。实现步骤包括设置服务器，处理JSON对象数据。服务器响应通常为JSON格式，客户端需转换成字符串。AJAX用于GET和POST请求，GET直接在URL中附带参数，POST需设置Content-Type为application/json。

摘要由CSDN通过智能技术生成

Ajax 技术需要运行在网站环境中才能生效，当前使用Node创建的服务器作为网站服务器。

不要直接打开html不会生效，借助node开启网站服务器，实现静态资源访问功能

实现步骤

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<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>
</html>

// 引入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.