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

相关文章
|
2月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
22 0
|
6月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- ajax方法的POST请求
JavaScript学习 -- ajax方法的POST请求
37 0
|
6月前
|
JSON 前端开发 JavaScript
前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(一)
前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(一)
520 0
|
3月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
58 1
|
3月前
|
Web App开发 JSON 中间件
express学习 - (3)express 路由
express学习 - (3)express 路由
73 1
|
3月前
|
JSON 资源调度 中间件
express学习 - (1)环境配置与第一个express项目
express学习 - (1)环境配置与第一个express项目
56 0
|
3月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- ajax方法的POST请求
JavaScript学习 -- ajax方法的POST请求
29 0
|
3月前
|
设计模式 缓存 前端开发
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(下)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
15 1
|
3月前
|
前端开发 JavaScript fastjson
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(上)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
24 1
|
4月前
|
前端开发 PHP 数据安全/隐私保护
【PHP学习】—利用ajax原理实现密码修改功能(九)
【PHP学习】—利用ajax原理实现密码修改功能(九)