Ajax基础：入门使用

最新推荐文章于 2024-09-04 13:14:09 发布

昔冰_G

最新推荐文章于 2024-09-04 13:14:09 发布

阅读量181

点赞数

分类专栏： Ajax 文章标签： ajax javascript

本文链接：https://blog.csdn.net/qq_38800316/article/details/120391360

版权

Ajax 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

可以用于客户端的信息请求

客户端文件代码：（01ajax.html）

1、创建Ajax对象

var xhr=new XMLHttpRequest();

2、告诉Ajax对象以什么样的方式进行请求，向哪里发送请求

xhr.open('get','http://localhost:3000/first');

3、发送请求

xhr.send();

4、获取服务器端响应给客户端的数据

（由于请求受多方面影响，例如：网速，所以不是马上就能拿到的响应数据的，当本次请求的响应内容全部获取到后会触发xhr的onload事件，可以在事件中添加回调函数实现对响应内容的操作）

xhr.onload=function(){
    console.log(xhr.responseText);
}

xhr的responseText可以获取到服务器端响应过来的内容

服务器端的测试ajax请求给予响应的代码：(app.js)

const express = require('express');
const app = express();

//指明静态文件目录位置，以便浏览器中对（客户端）静态文件的加载
app.use(express.static(path.join(__dirname, 'public')));

app.get('/first',(req,res)=>{
    res.send('hello Ajax');
})

app.listen(3000);
console.log('3000已启动');

1、nodemon app.js来执行服务器端文件

2、浏览器中输入：http://localhost:3000/01ajax.html

执行的是静态文件目录下的01ajax.html文件，文件内部script脚本中创建了ajax对象向服务器的 /first 发送了请求。

3、浏览器控制台输出：hello Ajax

【由于Ajax给服务器发送了请求，服务器处理了/first请求并以'hello Ajax'作为响应，客户端的xhr.responseText获取的就是服务器响应的内容，最终输出到客户端（浏览器）控制台】

定时发送请求，不用刷新页面也可以拿到服务器端的相应数据

<body>
    <script>
        // 创建Ajax对象
        var xhr = new XMLHttpRequest();
        // 告诉Ajax对象要向哪发送请求，以什么方式发送
        // 1）请求方式  2）请求地址
        xhr.open('get', 'http://localhost:3000/responseData');
        // 发送请求
        xhr.send();
        // 定时发送请求，不刷新页面也可以拿到服务器端的响应数据
        setInterval(function() {
            xhr.open('get', 'http://localhost:3000/responseData');
            xhr.send();
        }, 2000);

        xhr.onload = function() {
            console.log(responseText);
        }
    </script>
</body>

由于客户端的定时器setInterval的作用，会每2s发送一次请求，每一次请求正常被服务端响应，所以浏览器控制台会每2秒输出一次“hello Ajax”。