前、后端数据传输技术汇总

   

目录

1.前端与后端通讯的演变 

1.1 初期阶段：表单提交与页面刷新

1.2. AJAX 的兴起

1.2.1 什么是 AJAX？

1.2.2 AJAX 的实现示例

1.3. jQuery 的封装与简化

1.3.1 jQuery 的 AJAX 示例

1.4. fetch API：现代浏览器的原生解决方案

1.4.1 fetch API 的使用

1.4.2 fetch 的不足

1.5. axios：现代 Web 开发的首选 HTTP 客户端

1.5.1 axios 的基本用法

1.5.2 axios 的高级功能

1.6. 几种技术的对比

解释：

1.7. 总结

2. jQuery的简介

3. 简单理解jQuery中$.getJSON、$.get、$.post、$.ajax用法

4.C# JQuery 开发Demo

4.1. 创建一个新的 ASP.NET MVC 项目

4.2 引入 jQuery

4.3 在视图中使用 jQuery

4.4 AJAX 与 C# 后端交互

4.5 测试

---

 一直以来都是做C++后端开发的，最近项目二次开发使用C#，涉及到前端开发。前后端数据交互不可避免，不会就学，本文从前后通讯的演变及项目中使用的JQuery技术两个方面，抛砖引玉，算是踏入前端开发入门的第一步。

1.前端与后端通讯的演变 

参考文档：

https://baijiahao.baidu.com/s?id=1807105908813829340&wfr=spider&for=pc

随着 Web 技术的发展，前端与后端之间的通讯方式经历了多个阶段的演变。

1.1 初期阶段：表单提交与页面刷新

在早期的 Web 开发中，前端与后端的通讯主要依赖于 HTML 表单和页面刷新。当用户在浏览器中提交表单时，表单数据会通过 HTTP 请求发送到后端服务器，后端处理请求并返回一个新的 HTML 页面，浏览器会刷新并展示新的内容。

这种方法的缺点显而易见：每次通讯都需要刷新整个页面，用户体验较差，尤其是在网络条件较差的情况下。随着 Web 应用的复杂性增加，开发者们开始寻求一种更高效、更流畅的通讯方式。

1.2. AJAX 的兴起

AJAX（Asynchronous JavaScript and XML）技术的出现，标志着前端与后端通讯方式的重大转变。通过 AJAX，前端可以在不刷新整个页面的情况下，与后端进行异步通讯，动态更新页面内容。

1.2.1 什么是 AJAX？

AJAX 是一组技术的组合，包括：

• XMLHttpRequest：用于在后台与服务器交换数据。

• JavaScript：用于处理响应并更新网页内容。

• XML 或 JSON：作为数据交换格式（现代应用中，JSON 更为流行）。

1.2.2 AJAX 的实现示例

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};
xhr.send();

AJAX 的使用显著提升了用户体验，使得网页可以部分更新，而无需刷新整个页面。然而，XMLHttpRequest 的使用有一定的复杂性和局限性，例如回调地狱、链式回调不友好等问题。

1.3. jQuery 的封装与简化

为了简化 AJAX 的使用，jQuery 库应运而生。jQuery 对 XMLHttpRequest 进行了封装，提供了更简单、更直观的 API，使得前端开发者能够更方便地与后端进行通讯。

1.3.1 jQuery 的 AJAX 示例

$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    success: function(data) {
        console.log(data);
    },
    error: function(error) {
        console.log('Error:', error);
    }
});

jQuery 的流行进一步推动了 AJAX 的广泛使用，并成为 Web 开发的事实标准。然而，随着前端开发的复杂度进一步提升，开发者对更加现代化、模块化的 HTTP 客户端的需求也逐渐显现。

1.4. fetch API：现代浏览器的原生解决方案

为了解决 XMLHttpRequest 的局限性，现代浏览器引入了 fetch API，它是一个更强大、基于 Promise 的 HTTP 客户端，提供了更简单的 API 和更好的可扩展性。

1.4.1 fetch API 的使用

fetch('https://api.example.c