node.js安装

  1. 搜索网址：http://nodejs.cn/，选择下载板块

image.png

  1. 点击Windows安装包(如有特殊需求可下方选择版本)，双击打开下载好的文件

image.png

  1. 不停的下一步，看到位置可以选择安装路径

image.png

  1. 看到下面这个框可以不用勾选，继续下一步，直至安装完成

image.png

  1. 验证，打开Windows命令提示符界面，输入：node -v，若显示了版本信息，表示安装完成

image.png

Express框架

Ajax需要对服务端发请求，这里我们需要一个服务端，所以需要粗略学习以下Express框架，由于Express是基于node.js平台的，所以如果没有装node.js需要在安装以下node.js

下面演示这个框架怎么使用(以VSC这款编译器为例，不同编译器可能不同)：

  1. 安装这个包，在文件夹最外层右键点击，打开集成终端

image.png

  1. 输入npm init --yes

image.png

  1. 安装express框架，输入命令：npm i express

image.png

  1. 打开目标文件，输入下列命令 ```javascript //1. 引入express const express = require(‘express’);

//2. 创建应用对象 const app = express();

//3. 创建路由规则 //resquest 是对请求报文的封装 //response 是对响应报文的封装 app.get(‘/‘,(request,response)=>{ //设置响应 response.send(‘Hello Express’); });

//4. 监听端口，启用服务 app.listen(8000,()=>{ console.log(“服务已经启动，8000端口监听中…”); })

  2. 5. 输入完代码后，右键点击文件，打开集成终端
  4. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/12969163/1624263114890-b050559a-6cd5-4e8b-99dc-6daff2373734.png#clientId=ucba0fdea-d5df-4&from=paste&height=521&id=ubd1029eb&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1042&originWidth=1920&originalType=binary&ratio=2&size=171915&status=done&style=none&taskId=ub7974496-ee76-400a-86a2-54583d342dd&width=960)
  6. 6. 在终端中输入：`node 文件名.js`，如果显示服务已经启动，表示一切正常。
  8. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/12969163/1624263147428-dcafbf40-91fd-438e-9dc3-2e703e3ae848.png#clientId=ucba0fdea-d5df-4&from=paste&height=234&id=u550bbaf6&margin=%5Bobject%20Object%5D&name=image.png&originHeight=467&originWidth=1536&originalType=binary&ratio=2&size=51113&status=done&style=none&taskId=u7736c530-5018-4fe5-8347-282a61bb65f&width=768)
  10. 7. 最后到浏览器中，地址栏输入：`127.0.0.1:8000`，看看能不能正常显示，如果能正常显示，打开Network并刷新网页，就可以看到捕获到的包，其中就有我们的响应报文和请求报文。
  12. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/12969163/1624263326504-fc169ec9-0b99-483d-8fb3-e4791e74b6de.png#clientId=ucba0fdea-d5df-4&from=paste&height=461&id=ud6243c8a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=922&originWidth=1869&originalType=binary&ratio=2&size=101979&status=done&style=none&taskId=ubf8307a2-6efb-4537-a870-49b8ce040f3&width=934.5)<br />那么我们之后就可以借助这个服务，跟前端的Ajax进行交互。
  14. ---
  17. <a name="FyPqa"></a>
  18. # Ajax案例准备
  19. > 我们现在对Ajax进行案例准备，首先定义需求，定义一个按钮，当点完这个按钮之后，会向服务端发送一个请求，返回把服务端发送的响应体结果放置到div标签中
  21. 首先创建两个新的文件<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/12969163/1624369759191-de8eba78-b40b-4655-aa2e-7264b3cb0dbc.png#clientId=u55626f88-6ef7-4&from=paste&height=208&id=uc78c239b&margin=%5Bobject%20Object%5D&name=image.png&originHeight=416&originWidth=324&originalType=binary&ratio=2&size=13767&status=done&style=none&taskId=ue816f648-a966-4428-9ecf-5f68144758e&width=162)<br />前端代码准备
  22. ```html
  23. <!DOCTYPE html>
  24. <html lang="en">
  25. <head>
  26.     <meta charset="UTF-8">
  27.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  28.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  29.     <title>AJAX</title>
  30.     <style>
  31.         #result{
  32.             width: 200px;
  33.             height: 200px;
  34.             border: 1px solid red;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <button>点击发送请求</button>
  40.     <div id="result"></div>
  41. </body>
  42. </html>

服务端代码准备

  1. //1. 引入express
  2. const express = require('express');
  4. //2. 创建应用对象
  5. const app = express();
  7. //3. 创建路由规则
  8. //"/server"表示如果说url的路径是请求行的第二段内容，它的路径是/server的话
  9. //那么就会指向后面回调函数中的代码，并且有response做出响应
  10. app.get('/server',(request,response)=>{
  11.     //设置响应头    设置允许跨域(第一次接触Ajax，不需要完全理解代码)
  12.       //这里的参数绝对不能写错！！！
  13.     response.setHeader('Access-Control-Allow-Origin','*');
  14.     //设置响应体
  15.     response.send('HELLO AJAX');
  16. });
  18. //4. 监听端口，启用服务
  19. app.listen(8000,()=>{ 
  20.     console.log("服务已经启动，8000端口监听中...");
  21. })

然后启动服务，右键打开文件所在文件夹的终端，输入：node 新文件名.js，如果上节课端口没关，会发现这么一个错误，这表示8000端口已被占用了，我们需要线关闭上节课已经打开的8000端口，怎么关闭呢，回到之前的终端，使用Ctrl+C关闭原来的服务即可。
image.png
关闭原来的8000端口后，我们就可以正常启用我们新的服务了
image.png
输入网址：http://127.0.0.1:8000/server，注意这里的/server就是前面app.get中设置的参数。
下面的网页中我们可以看到，响应头和响应体都可以正常返回
image.png