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

相关文章
|
6月前
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
85 0
|
6月前
|
前端开发 JavaScript API
Ajax技术的秘密揭秘:异步传输,高效交互
Ajax技术的秘密揭秘:异步传输,高效交互
|
6月前
|
开发框架 前端开发 JavaScript
ASP.NET AJAX使用方法概述(三)
ASP.NET AJAX使用方法概述(三)
51 1
|
3月前
|
前端开发 JavaScript Java
Ajax进行异步交互:提升Java Web应用的用户体验
Ajax 技术允许在不重载整个页面的情况下与服务器异步交换数据,通过局部更新页面内容,极大提升了 Java Web 应用的响应速度和用户体验。本文介绍 Ajax 的基本原理及其实现方式,包括使用 XMLHttpRequest 对象发送请求、处理响应数据,并在 Java Web 应用中集成 Ajax。此外,还探讨了 Ajax 如何通过减少页面刷新、实时数据更新等功能改善用户体验。
73 3
|
3月前
|
XML JSON 前端开发
Ajax 概述
Ajax 概述
24 0
|
5月前
|
XML 移动开发 前端开发
JS设置Ajax为同步或异步
JS设置Ajax为同步或异步
67 0
|
5月前
1.ajax同步和异步区别 2.post和get区别
1.ajax同步和异步区别 2.post和get区别
31 0
|
6月前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
68 3
N..
|
6月前
|
XML JSON 前端开发
Ajax概述
Ajax概述
N..
83 0
|
6月前
|
JSON 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)