【ajax+node.js+webpack+git】学习笔记---ajax01

在学习Ajax的过程中，我们通常会使用Node.js搭建一个本地服务器，并使用Webpack进行模块打包，以便于开发和管理。以下是一个简单的示例，展示了如何使用Node.js和Webpack创建一个简单的本地服务器，并通过Ajax发送GET请求。

1. 初始化Node.js项目并安装依赖：

mkdir my-ajax-project
cd my-ajax-project
npm init -y
npm install --save express webpack webpack-cli webpack-dev-server

2. 创建server.js文件作为服务器入口点：

// server.js
const express = require('express');
const path = require('path');
const app = express();
 
app.use(express.static(path.join(__dirname, 'dist')));
 
app.get('/test', (req, res) => {
  res.send('Hello from the server!');
});
 
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

3. 创建webpack.config.js文件进行Webpack配置：

// webpack.config.js
const path = require('path');
 
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    contentBase: './dist',
  },
};

4. 创建src/index.js文件作为Ajax请求的客户端代码：

// src/index.js
document.addEventListener('DOMContentLoaded', function () {
  const btn = document.getElementById('my-btn');
  btn.addEventListener('click', function () {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://localhost:3000/test', true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        alert(xhr.responseText);
      }
    };
    xhr.send();
  });
});

5. 在package.json中添加脚本以启动开发服务器：

{
  "name": "my-ajax-project",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack-dev-server --open"
  },
  // ... 其他配置
}

6. 运行开发服务器：

npm start

当你运行npm start后，它将启动Webpack开发服务器，并在默认浏览器中打开http://localhost:8080。点击页面上的按钮会发送一个Ajax GET请求到你的Node.js服务器，服务器响应请求并显示一个弹窗。

这个简单的示例展示了如何使用Ajax进行GET请求，以及如何在Node.js和Webpack的帮助下创建一个本地开发环境。在实际应用中，你可能需要处理跨域请求、错误处理、以及更复杂的应用逻辑。