AJAX入门

南风吹云

已于 2022-06-10 17:12:48 修改

阅读量151

点赞数

文章标签： ajax javascript 前端

于 2022-06-10 17:10:41 首次发布

本文链接：https://blog.csdn.net/qq_43753895/article/details/125221498

版权

AJAX入门

什么是 AJAX？

什么是 AJAX？

AJAX 是异步的 JavaScript 和 XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据。AJAX 最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

ajax有两大特性：

在不重新加载页面的情况下发送请求给服务器。
接受并使用从服务器发来的数据。

使用node的express模块创建一个服务器。
新建一个server.js文件
代码如下：

// 1. 引人express
const express = require('express');

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

// 3.创建路由规则
// request 对请求报文的封装
// response 对请求响应报文的封装

app.get('/', (request, response) => {
    response.send('hello express');
});

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

运行 node server.js 命令启动服务器。

新建一个get.html文件，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid #90b;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result');
        btn.onclick = function () {
            console.log('test');
            // 1. 创建对象
            const xhr = new XMLHttpRequest();
            // 2. 初始化 设置请求方法和url
            xhr.open('GET', 'http://127.0.0.1:8000/server');
            // 3. 发送
            xhr.send();
            xhr.onreadystatechange = function () {
                // 服务端返回所有的结果
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体

                        result.innerHTML = xhr.response;
                    }
                }
            }
        }
    </script>
</body>

</html>

打开html文件，点击按钮发送请求，后端返回的数据就填充到页面上，此时我们就完成了ajax请求。

南风吹云

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX入门

AJAX 是异步的 JavaScript 和 XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据。AJAX 最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。......
复制链接

扫一扫