ajax7-同步异步概述

简介: ajax7-同步异步概述

image.png

// 引用expess框架
const express = require('express');
// 处理路径
const path = require('path');
const bodyParser = require('body-parser');
const fs = require('fs');
// 创建网站服务器
const app = express();
app.use(bodyParser.json());
app.get('/first', (req, res) => {
    res.send('hello geyao')
})
app.get('/responsdate', (req, res) => {
    res.send({ "name": "geyao" })
})
app.post('/post', (req, res) => {
    res.send(req.body);
})
app.get('/get', (req, res) => {
    res.send(req.query);
})
app.post('/json', (req, res) => {
    res.send(req.body);
})
app.get('/readystate', (req, res) => {
    res.send('hello');
})
app.get('/error', (req, res) => {
    res.status(400).send('not ok');
})
app.get('/geyao', (req, res) => {
    res.send('hello geyao')
})
app.get('/cache', (req, res) => {
    fs.readFile('./text.txt', (err, result) => {
        res.send(result);
    });
})
app.use(express.static(path.join(__dirname)));
// 监听端口
app.listen(3000);
console.log('网站服务器启动成功, 请访问localhost')

ajax9.html

<!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/geyao');
        //发送请求
        xhr.send();
        //获取数据
        xhr.onload = function() {
            console.log('2');
            console.log(xhr.responseText);
        }
        console.log('1');
    </script>
</body>
</html>

image.png

相关文章
|
27天前
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
|
3月前
|
前端开发 JavaScript API
Ajax技术的秘密揭秘:异步传输,高效交互
Ajax技术的秘密揭秘:异步传输,高效交互
N..
|
1月前
|
XML JSON 前端开发
Ajax概述
Ajax概述
N..
19 0
|
3月前
|
JSON 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
|
3月前
|
XML 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
|
9月前
|
XML 前端开发 JavaScript
ajax 异步
Ajax(异步JavaScript和XML)是一种用于创建优雅的、可交互的Web内容的技术。它使用XMLHttpRequest对象作为后台与服务器端通信的桥梁,并使用JavaScript处理和展示从服务器端返回的数据。 Ajax可以使用户界面更加实时和响应迅速,因为它只需要通过JavaScript处理和展示从服务器端返回的部分数据,而无需重新加载整个页面。这也意味着,用户可以在不必等待整个页面重新加载的情况下,就可以获取和操作服务器端的数据。 Ajax的工作原理是,当用户触发某个操作时,JavaScript代码会向服务器发送一个HTTP请求,并在服务器端返回响应后,使用JavaScript处理
39 0
|
9月前
|
前端开发 JavaScript 关系型数据库
宝塔设置PHP定时任务实战记录(定时任务、ajax异步刷新API、shell脚本、访问url)
宝塔设置PHP定时任务实战记录(定时任务、ajax异步刷新API、shell脚本、访问url)
485 0
|
9月前
|
前端开发 数据可视化
Echarts实战案例代码(14):数据可视化大屏根据ajax异步更新筛选条件查询互动展示的解决思路
Echarts实战案例代码(14):数据可视化大屏根据ajax异步更新筛选条件查询互动展示的解决思路
85 0
|
11月前
|
XML Web App开发 JSON
Ajax 异步通信详解
本文介绍前端开发中的 Ajax 异步通信
60 0
|
XML 存储 前端开发
JavaWeb中异步交互的关键——Ajax
JavaWeb中异步交互的关键——Ajax
147 0