express学习46-ajax实现步骤

简介: express学习46-ajax实现步骤
ajax.js
    // 引用expess框架
     const express = require('express');
     // 处理路径
     const path = require('path');
     // 创建网站服务器
     const app = express();
     app.get('/first', (req, res) => {
         res.send('hello geyao')
     })
     app.use(express.static(path.join(__dirname)));
     // 监听端口
     app.listen(3000);
     console.log('网站服务器启动成功, 请访问localhost')ajax.html
    <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8"><!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Document</title>
     </head>
     <body>
         <script>
             //1创建ajax对象
             var xhr = new XMLHttpRequest();
             //请求方式
             xhr.open('get', 'http://localhost:3000/responsdate');
             //发送请求
             xhr.send();
             //获取数据
             xhr.onload = function() {
                 /* console.log(xhr.responseText); */
                 var res = JSON.parse(xhr.responseText);
                 console.log(res);
                 var str = '<h2></h2>'
                 document.body.innerHTML = str;
             }
         </script>
     </body>
     </html>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Document</title>
     </head>
     <body>
         <script>
             //1创建ajax对象
             var xhr = new XMLHttpRequest();
             //请求方式
             xhr.open('get', 'http://localhost:3000/first');
             //发送请求
             xhr.send();
             //获取数据
             xhr.onload = function() {
                 console.log(xhr.responseText);
             }
         </script>
     </body>
     </html>

image.png

相关文章
|
6月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
52 0
|
1月前
|
JSON JavaScript 前端开发
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
16 0
|
3月前
|
JavaScript Linux API
【Azure 应用服务】NodeJS Express + MSAL 应用实现AAD集成登录并部署在App Service Linux环境中的实现步骤
【Azure 应用服务】NodeJS Express + MSAL 应用实现AAD集成登录并部署在App Service Linux环境中的实现步骤
|
6月前
|
JSON 前端开发 JavaScript
Ajax 学习总结
这是一个关于Ajax学习的总结,包括导入Ajax包、异步请求和表单验证。示例展示了如何使用jQuery进行Ajax请求,从后台获取并显示数据,同时提到了Json乱码问题的解决方法和表单数据的前后端交互。还给出了表单验证的简单示例,通过Ajax实时校验用户名。
56 2
|
6月前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
68 3
|
6月前
|
Web App开发 前端开发 JavaScript
创建AJAX五大基本步骤
创建AJAX五大基本步骤
59 0
|
6月前
|
XML 开发框架 前端开发
Ajax学习(基础知识)
Ajax学习(基础知识)
|
6月前
|
Web App开发 JSON 中间件
express学习 - (3)express 路由
express学习 - (3)express 路由
147 1
|
6月前
|
设计模式 缓存 前端开发
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(下)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
45 1
|
6月前
|
JSON 资源调度 中间件
express学习 - (1)环境配置与第一个express项目
express学习 - (1)环境配置与第一个express项目
249 0