首页手记 Ajax网络请求入门教程：轻松掌握前端技能

Ajax网络请求入门教程：轻松掌握前端技能

标签：

JavaScript 前端工具 API

概述

本文介绍了Ajax网络请求的基本概念和工作原理，详细讲解了如何通过XMLHttpRequest和fetch API发送Ajax请求，并展示了在实际项目中应用Ajax的示例代码，包括实时搜索建议和无刷新评论加载等功能。文中还提供了设置开发环境、处理服务器响应和常见问题如CORS跨域资源共享及请求超时的解决方案。

Ajax简介

什么是Ajax

Ajax (Asynchronous JavaScript and XML) 是一种在无需重新加载整个网页的情况下，能够更新网页部分数据的技术。Ajax 通过异步方式与服务器进行数据交互，提高了用户体验和网页交互的实时性。

Ajax的工作原理

Ajax的工作原理基于四个关键组成部分：

XMLHttpRequest 对象：这是Ajax的核心，用于发送请求和接收响应。
JavaScript：用于处理用户的交互事件，如点击、键盘输入等。
HTML/CSS：用于展示数据和美化界面。
服务器端技术：如PHP、Node.js等，用于处理Ajax请求，返回数据。

示例代码

以下是一个简单的Ajax请求示例，使用XMLHttpRequest对象来请求数据：

// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 明确指定请求类型、URL和是否异步处理
xhr.open("GET", "https://api.example.com/data", true);

// 设置响应类型
xhr.responseType = "json";

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

// 设置响应处理函数
xhr.onload = function() {
    if (xhr.status == 200) {
        var data = xhr.response;
        console.log("数据请求成功，返回的数据是:", data);
    } else {
        console.log("请求失败，错误状态码为:", xhr.status);
    }
};

Ajax与传统网页请求的区别

请求方式：Ajax 请求是异步的，传统网页请求是同步的，即页面会重新加载以获取服务器响应。
用户体验：Ajax 请求提高了用户体验，因为页面无需刷新即可显示新的内容。
数据传输：Ajax 只传输需要更新的数据，而传统网页请求传输整个页面。

设置开发环境

安装必要的软件工具

文本编辑器：可以使用任何文本编辑器，例如 VSCode、Sublime Text 或 Atom。
Web 浏览器：使用支持最新Web标准的浏览器，如 Google Chrome 或 Mozilla Firefox。
服务器软件：如果需要本地测试服务器响应，可以使用简单的本地服务器如 Python 的 SimpleHTTPServer（Python 2）或 http.server（Python 3）。

创建HTML和JavaScript文件

创建一个基本的HTML文件和JavaScript文件，用于测试Ajax请求。

示例代码

创建一个HTML文件（例如 index.html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax 示例</title>
</head>
<body>
    <h1>Ajax 示例</h1>
    <button id="ajaxButton">点击请求数据</button>

    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="ajax.js"></script>
</body>
</html>

创建一个JavaScript文件（例如 ajax.js）：

document.getElementById('ajaxButton').addEventListener('click', function() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://api.example.com/data", true);
    xhr.responseType = "json";
    xhr.onload = function() {
        if (xhr.status == 200) {
            var data = xhr.response;
            console.log("数据请求成功，返回的数据是:", data);
        } else {
            console.log("请求失败，错误状态码为:", xhr.status);
        }
    };
    xhr.send();
});

发送Ajax请求

使用XMLHttpRequest对象

XMLHttpRequest 是一种用于在浏览器和服务器之间进行异步通信的JavaScript对象。它支持各种HTTP请求方法，如 GET、POST、PUT 等。

示例代码

以下是一个使用XMLHttpRequest对象发送GET请求的示例：

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.responseType = "json";
xhr.onload = function() {
    if (xhr.status == 200) {
        var data = xhr.response;
        console.log("数据请求成功，返回的数据是:", data);
    } else {
        console.log("请求失败，错误状态码为:", xhr.status);
    }
};
xhr.send();

使用fetch API发送请求

fetch API 是一种更现代的发送HTTP请求的方式，它返回一个Promise，使异步编程更容易。

示例代码

以下是一个使用fetch API发送GET请求的示例：

fetch("https://api.example.com/data")
    .then(response => {
        if (!response.ok) {
            throw new Error("请求失败，错误状态码为: " + response.status);
        }
        return response.json();
    })
    .then(data => {
        console.log("数据请求成功，返回的数据是:", data);
    })
    .catch(error => {
        console.log("请求失败，错误:", error);
    });

处理服务器响应

获取异步响应数据

服务器响应可以通过 onload 事件处理器获取，也可以通过 fetch API 的 Promise 链获取。

示例代码

下面是一个使用 fetch API 的响应数据处理示例：

fetch("https://api.example.com/data")
    .then(response => {
        if (!response.ok) {
            throw new Error("请求失败，错误状态码为: " + response.status);
        }
        return response.json();
    })
    .then(data => {
        console.log("数据请求成功，返回的数据是:", data);
    })
    .catch(error => {
        console.log("请求失败，错误:", error);
    });

处理响应成功和错误

在处理响应时，需要区分成功和错误响应，并采取相应的操作。

示例代码

以下是一个处理响应成功和错误的示例：

fetch("https://api.example.com/data")
    .then(response => {
        if (!response.ok) {
            throw new Error("请求失败，错误状态码为: " + response.status);
        }
        return response.json();
    })
    .then(data => {
        console.log("数据请求成功，返回的数据是:", data);
    })
    .catch(error => {
        console.log("请求失败，错误:", error);
    });

实践案例：使用Ajax实现功能

实时搜索建议

实时搜索建议功能常见于搜索引擎或电商平台，用户输入关键词时，提供相关建议。

示例代码

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时搜索建议</title>
</head>
<body>
    <input type="text" id="searchInput" placeholder="输入搜索关键词">
    <ul id="suggestionsList"></ul>

    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="search.js"></script>
</body>
</html>

JavaScript部分（search.js）：

document.getElementById('searchInput').addEventListener('input', function() {
    var keyword = this.value.trim();
    if (keyword.length > 0) {
        fetch("https://api.example.com/search/" + encodeURIComponent(keyword))
            .then(response => {
                if (!response.ok) {
                    throw new Error("请求失败，错误状态码为: " + response.status);
                }
                return response.json();
            })
            .then(suggestions => {
                var suggestionsList = document.getElementById('suggestionsList');
                suggestionsList.innerHTML = "";
                suggestions.forEach(suggestion => {
                    var li = document.createElement('li');
                    li.textContent = suggestion;
                    suggestionsList.appendChild(li);
                });
            })
            .catch(error => {
                console.log("请求失败，错误:", error);
            });
    }
});

无刷新评论加载

无刷新评论加载常见于论坛、博客等，用户滚动页面时加载更多评论。

示例代码

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无刷新评论加载</title>
</head>
<body>
    <div id="commentsList"></div>
    <button id="loadMoreButton">加载更多评论</button>

    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="comments.js"></script>
</body>
</html>

JavaScript部分（comments.js）：

document.getElementById('loadMoreButton').addEventListener('click', function() {
    var lastCommentId = document.getElementById('commentsList').lastElementChild.getAttribute('data-comment-id');
    fetch("https://api.example.com/comments?lastId=" + encodeURIComponent(lastCommentId))
        .then(response => {
            if (!response.ok) {
                throw new Error("请求失败，错误状态码为: " + response.status);
            }
            return response.json();
        })
        .then(comments => {
            var commentsList = document.getElementById('commentsList');
            comments.forEach(comment => {
                var li = document.createElement('li');
                li.textContent = comment.text;
                li.setAttribute('data-comment-id', comment.id);
                commentsList.appendChild(li);
            });
        })
        .catch(error => {
            console.log("请求失败，错误:", error);
        });
});

常见问题与解决方法

CORS跨域资源共享

CORS (Cross-Origin Resource Sharing) 是一种浏览器的安全机制，用于防止恶意脚本向其他域发起请求。当请求跨域时，服务器必须正确设置响应头，允许来自客户端域名的请求。

解决方法

服务器需要在响应头中添加适当的CORS设置，例如：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

请求超时处理

请求超时是Ajax请求中常见的问题，可以通过设置超时时间来解决。

示例代码

以下是一个处理超时请求的示例：


var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.timeout = 5000; // 设置超时时间为5秒

xhr.onload = function() {
    if (xhr.status == 200) {
        var data = xhr.response;
        console.log("数据请求成功，返回的数据是:", data);
    } else {
        console.log("请求失败，错误状态码为:", xhr.status);
    }
};

xhr.onerror = function() {
    console.log("请求失败，错误:", xhr.statusText);
};

xhr.ontimeout = function() {
    console.log("请求超时");
};

xhr.send();
``

通过以上步骤，你可以轻松掌握Ajax网络请求的基本技能，并在实际项目中应用这些技术。希望本文对你有所帮助！

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

炎炎设计

手记
篇

粉丝

75

获赞与收藏

372

关注作者，订阅最新文章

阅读免费教程

JavaScript 入门教程

80个小节 315747 2221

Hibernate 入门教程

29个小节 6390 94

HTTP 入门教程

28个小节 38145 654

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Ajax网络请求入门教程：轻松掌握前端技能

什么是Ajax

Ajax的工作原理

示例代码

Ajax与传统网页请求的区别

安装必要的软件工具

创建HTML和JavaScript文件

示例代码

使用XMLHttpRequest对象

示例代码

使用fetch API发送请求

示例代码

获取异步响应数据

示例代码

处理响应成功和错误

示例代码

实时搜索建议

示例代码

无刷新评论加载

示例代码

CORS跨域资源共享

解决方法

请求超时处理

示例代码

阅读免费教程