当前位置： 首页 > news >正文

AJAX 学习

news 2025/7/10 10:41:39

1. AJAX简介

AJAX（Asynchronous JavaScript And XML）是一种用于创建交互式网页的技术，允许在不刷新页面的情况下与服务器进行通信，从而实现页面的局部更新。

1.1 AJAX的优点

  • 无需刷新页面：可以与服务器进行异步通信，无需重新加载整个页面。
  • 提升用户体验：页面更新更加流畅，用户操作不会被中断。
  • 减轻服务器负担：只传输必要的数据，而不是整个页面内容。

1.2 AJAX的缺点

  • 无浏览历史：无法通过浏览器的后退按钮回到上一状态。
  • 跨域问题：默认情况下，不能从一个域名向另一个域名发送AJAX请求（同源策略）。
  • 搜索引擎优化（SEO）不友好：搜索引擎可能无法正确索引动态加载的内容。

2. AJAX的实现方式

AJAX可以通过多种方式实现，包括原生JavaScript、jQuery、fetch函数以及第三方库（如axios）。

2.1 原生AJAX（使用XMLHttpRequest）

原生AJAX通过XMLHttpRequest对象实现，是AJAX功能的基础。

核心步骤
  1. 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
  1. 设置请求信息
xhr.open(method, url); // method: 请求方法（GET、POST等），url: 请求地址
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  1. 发送请求
xhr.send(body); // GET请求不传body参数，POST请求需要传入请求体
  1. 接收响应
xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {var responseText = xhr.responseText; // 获取响应文本console.log(responseText);}
};

2.2 jQuery中的AJAX

jQuery提供了简化的AJAX方法，如$.get、$.post和$.ajax。

示例
$.ajax({url: 'http://127.0.0.1:8000/server',type: 'GET',dataType: 'json', // 响应数据类型success: function(data) {console.log(data);},error: function() {console.log('请求失败');}
});

2.3 Fetch API

Fetch是现代浏览器提供的原生API，用于发送HTTP请求。它返回一个Promise对象，支持Promise链式调用。

示例
fetch('http://127.0.0.1:8000/server', {method: 'GET',headers: {'Content-Type': 'application/json'}
}).then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));

2.4 Axios

Axios是一个基于Promise的HTTP客户端，支持浏览器和Node.js环境。它提供了简洁的API和丰富的功能，如拦截请求和响应、自动转换JSON数据等。

示例
axios.get('http://127.0.0.1:8000/server').then(response => console.log(response.data)).catch(error => console.error('Error:', error));

3. HTTP相关知识

AJAX的核心是通过HTTP协议与服务器进行通信。了解HTTP请求和响应的基本结构对于使用AJAX非常重要。

3.1 HTTP请求报文

  • 请求行：method URL 协议版本（如：GET /index.html HTTP/1.1）
  • 请求头：包含各种请求信息（如Host、Content-Type、Cookie等）
  • 请求体：用于POST请求，包含要发送给服务器的数据

3.2 HTTP响应报文

  • 响应状态行：status statusText（如：200 OK）
  • 响应头：包含响应信息（如Content-Type、Content-Length等）
  • 响应体：服务器返回的数据（如HTML、JSON、图片等）

3.3 常见的HTTP状态码

  • 200 OK：请求成功
  • 401 Unauthorized：未授权
  • 404 Not Found：资源未找到
  • 500 Internal Server Error：服务器内部错误

3.4 请求方法

  • GET：用于从服务器获取数据
  • POST：用于向服务器提交数据
  • PUT：用于更新服务器上的数据
  • DELETE：用于删除服务器上的数据

4. 数据传输格式

AJAX的数据传输格式主要有以下几种：

  • application/x-www-form-urlencoded：键值对格式（如name=Tom&age=20）
  • application/json：JSON格式（如{"name": "Tom", "age": 20}）
  • multipart/form-data：用于文件上传

5. 跨域问题

AJAX默认遵守同源策略，即协议、域名和端口号必须完全相同。跨域问题可以通过以下方式解决：

  • JSONP：利用<script>标签的跨域能力，只支持GET请求。
  • CORS（Cross-Origin Resource Sharing）：服务器设置响应头Access-Control-Allow-Origin，允许跨域请求。

5.1 JSONP原理

JSONP通过动态创建<script>标签来加载跨域资源。服务器返回的内容是一个JavaScript函数调用，客户端定义的回调函数会处理这些数据。

示例

客户端：

function handle(data) {console.log(data);
}var script = document.createElement('script');
script.src = 'http://example.com/data?callback=handle';
document.body.appendChild(script);

服务器返回：

handle({"name": "Tom", "age": 20});

5.2 CORS原理

CORS通过在服务器响应头中设置Access-Control-Allow-Origin来允许跨域请求。浏览器会检查该响应头，如果允许，则放行请求。

示例

服务器设置：

response.setHeader('Access-Control-Allow-Origin', '*');

6. AJAX的常见应用场景

  • 动态加载数据：如分页加载、无限滚动
  • 表单提交：无需刷新页面即可提交表单数据
  • 实时交互：如聊天应用、评论系统
  • 文件上传：通过AJAX实现异步文件上传

7. AJAX的状态码和事件

XMLHttpRequest对象的状态码readyState用于表示请求的当前状态：

  • 0：未初始化
  • 1：服务器连接已建立
  • 2：请求已接收
  • 3：请求处理中
  • 4：请求已完成，且响应已就绪

8. AJAX的高级用法

  • 设置请求超时
xhr.timeout = 2000; // 设置超时时间为2秒
xhr.ontimeout = function() {console.log('请求超时');
};
  • 取消请求
xhr.abort(); // 取消请求
  • 处理网络异常
xhr.onerror = function() {console.log('网络异常');
};

9. 实际案例

9.1 GET请求

<button id="btn">点击发送GET请求</button>
<div id="result"></div>
<script>document.getElementById('btn').onclick = function() {var xhr = new XMLHttpRequest();xhr.open('GET', 'http://127.0.0.1:8000/server');xhr.send();xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {document.getElementById('result').innerHTML = xhr.responseText;}};};
</script>

9.2 POST请求

<button id="btn">点击发送POST请求</button>
<div id="result"></div>
<script>document.getElementById('btn').onclick = function() {var xhr = new XMLHttpRequest();xhr.open('POST', 'http://127.0.0.1:8000/server');xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');xhr.send('name=Tom&age=20');xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {document.getElementById('result').innerHTML = xhr.responseText;}};};
</script>

9.3 JSON数据请求

<button id="btn">点击发送JSON请求</button>
<div id="result"></div>
<script>document.getElementById('btn').onclick = function() {var xhr = new XMLHttpRequest();
http://www.dtcms.com/a/270743.html

相关文章：

  • 如何将华为手机中的照片传输到电脑
  • Django核心知识点详解：JSON、AJAX、Cookie、Session与用户认证
  • 【Kafka】登录日志处理的三次阶梯式优化实践：从同步写入到Kafka多分区批处理
  • 2311. 小于等于 K 的最长二进制子序列— day98
  • 数字大脑的培育法则：深度解读监督学习神经网络
  • （C++）任务管理系统（正式版）(迭代器)（list列表基础教程）（STL基础知识）
  • 【Gin】HTTP 请求调试器
  • C/C++ 高频八股文面试题1000题(二)
  • Java中Map、List 和 Set 之间的常见转换方法总结
  • vcpkg交叉编译qt等过程记录（未完成）
  • HarmonyOS应用开发者高级试题2025年7月部分单选题（带答案）
  • 学习日记-spring-day44-7.9
  • C++随机打乱函数：简化源码与原理深度剖析
  • leetcode11.盛最多水的容器
  • Webpack、Vite配置技巧与CI/CD流程搭建全解析
  • 【RTSP从零实践】9、多播传输AAC格式的RTP包(附带源码)
  • mac m1安装大模型工具vllm
  • kotlin学习，val使用get()的问题
  • mysql 安装实战
  • Claude Code 开发使用技巧
  • User手机上如何抓取界面的布局uiautomatorviewer
  • Linux的`if test`和`if [ ]中括号`的取反语法比较 笔记250709
  • Unity Demo-3DFarm详解-其二
  • 以太坊智能合约核心技术解析与应用实践
  • LLaMA-Omni 深度解析：打开通往无缝人机语音交互的大门
  • HCIP 认证可以做什么？如何选择合适的职业路径？
  • C++11 future、promise实现原理
  • AI生成交互式数据图表
  • 【c++八股文】Day5：const和constexpr，define
  • sql查询davinci看板数据