AJAX简介

永久旅途

已于 2023-06-01 12:10:24 修改

阅读量75

点赞数

CC 4.0 BY-SA版权

分类专栏： AJAX 文章标签： ajax javascript ecmascript

于 2023-06-01 12:09:48 首次发布

本文链接：https://blog.youkuaiyun.com/XunLin233/article/details/130984881

AJAX 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了AJAX的基本概念，它用于通过JavaScript向服务器异步请求数据。早期的数据格式为XML，现在主要使用JSON。文中以XMLHTTPRequest为例，展示了如何创建xhr对象并发送GET请求到服务器。同时提到了跨域问题及其解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、AJAX简介

Ajax：A - 异步 J - JavaScript A - and X - xml

其实就是异步的js和xml。

它的作用就是通过js向服务器发送请求来加载数据。

1. xml是早期Ajax使用的数据格式

<student>
    <name>孙悟空</name>
</student>

2. 目前的数据格式都使用JSON

{
    "name":"孙悟空",
    "age":18,
    "gender":"男"
}

二、服务器发送请求方案

可以选择的方案：

1. XMLHTTPRequest (xhr)

2. Fetch

3. Axios

我们以XMLHTTPRequest (xhr)为例发送请求：

HTML中有一个按钮，点击可以发送请求

    <h1>这是客户端</h1>
    <!-- 把服务器中的数据在网页中显示出来！ -->
    <button id="btn">点我加载数据</button>

        // 点击按钮以后，就去自动去加载服务器的数据
        const btn = document.querySelector('#btn');
        btn.onclick = ()=>{
            // xhr
            // 创建一个新的xhr对象，xhr表示请求信息
            const xhr = new XMLHttpRequest();

            // 设置请求的信息
            // 请求地址可以更改，这里我自己用Node开了一个服务器
            xhr.open("GET", "http://localhost:3000/students");

            // 发送请求
            xhr.send();
        }

注：请求中可能出现跨域问题，则需要在服务器中设置一个允许跨域的头，这里在Node.js中有讲解。

点击后我们会发现请求已经发送成功了